Pimp my Blog - Der Image-Rollover-Effekt

Ihr kennt vielleicht folgende Spielerei: Ein ganz normales Bild, und wenn die Maus drüber ist verändert es sich. Ja, schwierig zu erklären. Ein Beispiel könnt Ihr rechts sehen:


Ist Javascript aktiviert (sollte im Normalfall so sein .. ohne wird's schwierig ^^) wird der Satz des Pythagoras richtig angezeigt, wenn man mit der Maus drüber fährt. Ein Problem bei dem Ganzen ergibt sich jedoch: Wenn - wie bei obigem Beispiel - die zwei Bilder verschiedene Abmessungen haben, verschiebt sich beim Wechsel natürlich der Text, da dieser dynamisch an das Bild angepasst ist. Die Lösung liegt einfach darin, erst die Abmessungen bzw. den äußeren Rahmen des Bildes festzulegen und dann nur noch im Inneren Veränderungen vorzunehmen. Wie im rechten Beispiel passiert. Man sieht, der Smiley mag es gar nicht, wenn man mit der Maus über ihm rumfuchtelt ;)



Aber nun wollt ihr sicher wissen, wie man sowas in den Blog oder die Homepage einbinden kann bzw. wie das Javascript denn aussieht. Also, hier der grundlegende Aufbau vom Script:

<a href="ZIELSEITE" onmouseout="if (document.images) document.Doc.src= 'LINK_BILD_EINS';" onmouseover="if (document.images) document.Doc.src= 'LINK_BILD_ZWEI';" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" name="Doc" src="LINK_BILD_EINS" /></a>

Um nicht jedes Mal diesen Code verändern zu müssen, nutzt man einfach einen Online-Generator, der mit den drei nötigen Links das Script erstellt. Ein solcher ist zum Beispiel hier zu finden.

Da es doch einiges an Aufwand mitbringt, die Bilder gleich groß zu halten bei verschiedenem Inhalt, das zweite Bild erst Laden muss und deshalb der Effekt von den Speedsurfern wohl eher unerkannt bleiben wird und außerdem Javascript eingeschaltet sein muss ... muss man eben abwägen, ob bei den ganzen Nachteilen das Script überhaupt nötig ist. Man kann seine Seite damit zwar ein wenig aufpeppen, aber das war's dann auch schon ...