nicht angemeldet
Hallo Felix,
Du vergibst jedem <img>-Element dynamisch über JS einen onmouseover- und einen onmouseout-Eventhandler. Diese Eventhandler machen nichts anderes, als ein <div>-Element ein- bzw. auszublenden. Beim Einblenden werden dann die Koordinaten des Bildes ermittelt, und das <div>-Element in seiner absoluten Positionierung entsprechend ausgerichtet. Wenn es dann noch die Abmessungen des Bildes erhält, dann deckt es das Bild genau passend ab.
Um ein Flackern zu vermeiden (das Einblenden des <div>-Elements verdeckt das Bild und löst ein "vorzeitiges" onmouseout-Event aus), sollte das <div>-Element auch ein onmouseover- und onmouseout-Event haben, das die Anzeige des Elements erhält bzw. "repariert".
das ist exakt das, was Alex CSS-Lösung auch macht - ohne die von Dir angerissenen Probleme zu haben.
Wozu Du allerdings den Play-Button anzeigen willst, ist mir nicht klar. Wenn das <div>-Element mit dem Play-Button das Bild "verdeckt" (auch wenn es transparent ist), kann man das ursprüngliche Bild nicht mehr anklicken.
Das lässt sich sehr einfach lösen, indem man (in Alex' Lösung) das click-Ereignes des a-Elementes nutzt ...
Freundliche Grüße
Vinzenz