Lupe als Rollover über Bilder

[Felix Riesterer]

Liebe SusiBunterblume,

Wie stell ich das mit JS am besten an? Brauche keine Anleitung, nur Denkanstöße.

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".

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.

Liebe Grüße,

Felix Riesterer.