Grafik über Grafik legen

[Dragosius]

Hallo zusammen,

ich verwende aktuell folgenden Code, um Grafiken anzeigen zu lassen:

<img src="images/blank.png" class="lazy setbildNormal" data-src="/Cards/axsens12.gif" style="width:65px; height:80px;" alt="axsens12" title="axsens12" />

"data-src" ist dafür gut, dass die Bilder erst beim Scrollen nachgeladen werden.

Jetzt würde ich gerne unter bestimmten Kriterien eine weitere Grafik (einen grünen Haken) über die Grafik legen.
Kann mir jemand sagen wie ich dies denn realisieren kann?
Also eine weitere Grafik über der Grafik einbinden?

Vielen Dank

 

[Sempervivum]

Da gibt es zwei Möglichkeiten. In jedem Fall brauchst Du einen Container, in dem beide Grafiken liegen.

1. Die Hauptgrafik als Hintergrund anlegen und die weitere Grafik normal als img-Element in den Container legen und evtl. zentrieren. Nachteil: Der Container passt sich nicht automatisch die Größe der Hauptgrafik an; das Lazyloading muss angepasst werden. Vorteil: Keine absolute Positionierung erforderlich; leichte Zentrierung der weiteren Grafik wenn gewünscht.
2. Die Hauptgrafik wie bisher als img-Element und die weitere Grafik mit absoluter Positionierung darüber legen. Vorteil: Der Container passt sich automatisch an die Größe der Hauptgrafik an; dein Lazyloading bleibt wie es ist. Nachteil: Absolute Positionierung, Zentrierung der weiteren Grafik etwas unübersichtlich aber machbar.

 

[Dragosius]

Könntest du mir denn weitere Hilfestellung zur 2. Lösung geben?
Das wäre aus meiner Sicht die einfachste Lösung, ohne alles umbauen zu müssen.

 

[Sempervivum]

Würde so aussehen:
http://jsfiddle.net/jkeyswmr/4/
Das Lazyloading musst Du bei der Hauptgrafik wieder hinzu fügen.
Ich will hoffen, dass dieses Dummyimg zuverlässiger ist als Lorempixel.

 

[Dragosius]

Danke, ich werde es demnächst auf jeden Fall testen.

 

[Dragosius]

Hallo,

ich habe hier noch eine Rückfrage.
Ich habe nun folgenden Code verbaut:

    <style>
.imgcontainer {
  position: relative;
  display: inline-block;
  width:65px;
  height:80px;
}
.ovlimg {
  position: absolute;
  top: 22%;
  left: 70%;
  transform: translate(-50%, -50%);
}
</style>

    <figure class="imgcontainer">
        <img src="images/blank.png" class="lazy" data-src="<?php echo kartenPfadAnzeigen('aang', '05'); ?>.gif" style="width:65px; height:80px;" alt="" title="" />
        <img class="ovlimg" src="images/ausrufezeichen.png">
    </figure>
    <figure class="imgcontainer">
        <img src="images/blank.png" class="lazy" data-src="<?php echo kartenPfadAnzeigen('aang', '05'); ?>.gif" style="width:65px; height:80px;" alt="." title="" />
        <img class="ovlimg" src="images/ausrufezeichen.png">
    </figure>

Dies funktioniert auch soweit, nur wie bekomme ich denn den großen Abstand dazwischen raus, bzw wo kommt der denn her?

 

[Sempervivum]

Ja, das ist etwas blöd beim figure-Tag, dass es per Default solch eine großes Margin hat. Du kannst dieses leicht auf Null setzen:

figure {
    margin: 0;
}

 

[Dragosius]

Danke dir, so sieht es nun super aus.