HTML/JS Popup über mehrere Ebenen Bilder

Question

Für ein kleines privates Projekt habe ich eine Karte, die aus mehreren Bildern besteht, übereinander gelegt, jede mit einem anderen transparenten Teil, so dass sie alle zusammen die Karte bilden. Alle Bilder haben die gleiche Größe und beginnen bei 0,0 (um das Ausrichten zu erleichtern).

Jetzt wäre es schön, Pop-ups für die verschiedenen Teile zu haben, aber offensichtlich nur das oberste Bild gets alle Maus schwebt ...

<p style="position:relative"> 

    <img id="de_background" src="background.gif" style="position:absolute;left:0px;right:0px"/> 
    <img id="de_10" src="1.gif" style="position:absolute;left:0px;right:0px" title="Title 1"/> 
    <img id="de_12" src="2.gif" style="position:absolute;left:0px;right:0px" title="Title 2"/> 

So gibt es einen cleveren Trick schweben zu lassen/popus auch für den Teil des Bildes, der nicht transparent ist? Kann ich irgendwie per JavaScript fragen "Welches der Bilder hier ist an dieser Stelle nicht transparent?".

Answer 1

Sie setzen transparent in CSS-Eigenschaften oder gif Bilder sind noch transparent? und übrigens, Sie haben keine Elemente geschrieben z-index

Answer 2

Verwenden Sie einfach die Anzeige CSS-Eigenschaft für alle Elemente, die Sie ausblenden möchten, abgesehen von der ersten. Sie können die CSS-Eigenschaft sogar über JS anwenden und zwischen versteckt und sichtbar wechseln.

.hiddenImg { 
    display: none; 
} 

Weitere Informationen: http://www.w3schools.com/css/css_display_visibility.asp