Montag, 23. Februar 2015 um 10:58 Uhr

Einen Rollover- / Mouseover-Effekt in deine Seite einbinden

Der Rollover-, auch Mouseover-Effekt genannt, ist ein sehr beliebter und gern gesehener moderner Effekt auf Webseiten.
Das Prinzip besteht darin, fährt man mit der Maus über ein Objekt, verwandelt sich dieses in ein anderes. So ist es möglich, beispielsweise einen schwarzen Text in rot umzufärben sobald man mit der Maus darüber fährt. Natürlich kann man das Objekt daraufhin mit einer URL verlinken sodass man beim Klick auf das Objekt auf eine andere Seite gelangt.
Was ich damit genau meine, wird in meinem Tutorial genau erklärt bzw. kannst du es bei TechnikPirat.com in der linken Sidebar bei den Menüpunkten Warum TechnikPirat.com und Forum erkennen.

Möglich ist das Ganze mittels HTML-Code, der wie folgt aussieht:

 <a href="EXTERNE URL"><img src="URL VOM ERSTEN BILD" onmouseover="this.src='URL VOM ZWEITEN BILD'" onmouseout="this.src='URL VOM ERSTEN BILD'" /></a> 

Unter EXTERNE URL gibst du die Adresse ein, die geöffnet werden soll wenn man auf das Bild klickt. Möchtest du das Bild nicht verlinken sondern nur einen einfachen Rollover-Effekt einbinden, so lass diese Zeile zwischen den Anführungszeichen frei.
Bei img src wird der Link zum ersten Bild eingefügt und so weiter wie im Code beschrieben.

SAG DEINE MEINUNG!

Sei der Erste, der einen Kommentar abgibt!

Benachrichtigung bei
wpDiscuz