Sven Rautenberg: Mouse Over

Beitrag lesen

Ich wollte Fotos als Minis in Form einer Collage anordnen. Jedesmal, wenn die Maus über eins dieser Minis schwebt, sollte sich das Bild in einem Popup-Fenster oder einem bestimmten Tabellenteil öffnen.

Was auch immer du willst: Du willst KEINE POPUP-Fenster aufmachen!

Stell dir das Szenario selbst einmal vor: Du kommst als Surfer auf so eine Seite, klickst auf Galerie, siehst kleine Bilder und fährst quer über die Bilder, um das oberste anzuklicken. In dem Moment gehen zehn Popup-Fenster auf (weil die Maus über zehn Bilder gefahren wurde), und die großen Bilder laden.

Wumm! Die Modemleitung ist erstmal dicht wegen der Bilder, und man hat unerwartet zehn Popup-Fenster zu schließen. Wer sich mit der Maus dabei ungeschickt anstellt, öffnet dabei neue Popups, wenn er aus Versehen die Mini-Bilder nochmal überfährt...

Naja, wenn du deine Lösung ungeschickt erstellst, dann könnte das passieren...

Das, was du willst, ist eine Abwandlung des typischen Rollovers: Wenn sich die Maus über ein Bild bewegt, ändert sich dieses.

Das Beispiel dazu ist hier: </selfhtml/tedg.htm>

Du mußt das Skript so ändern: Auf deiner Seite ist ein Bild, welches als Platzhalter für die großen Bilder dient. Alle Mini-Bilder haben ein Mouseover und ein Mouseout, welches nicht sie selbst ändert, sondern das Vorschaubild.

Du zählst, das wievielte Bild (beginnen bei Null!) das Vorschaubild ist, und fügst die Zahl in allen Mouseovers und -outs ein:
onMouseover="Bildwechsel(DIEZAHL,Bild)"

- Sven Rautenberg