Tutorial 18

Ein Bild-Hover ist ein ganz normaler Hover, nur bei einem Bild.
Also: Fährt man mit der Maus über das Bild, verändert sich dieses.

Dazu musst du einfach nur folgenden Code in den Quellcode von der Seite einfügen wo der Hover gebraucht wird!

<img src="http://www.DEINE-BILD-URL-HIER.png" onmouseover="this.src='http://www.DEINE-BILD-HOVER-EFFEKT-URL-HIER.png';" onmouseout="this.src='http://www.DEINE-BILD-URL-HIER.png';" />


Und so sieht das ganze dann aus:



Erklärung:

Rot: Grafikadresse der Grafik, welche angezeigt wird OHNE dass man mit der Maus rüberfährt
(Das Ganze 2x)
Blau: Grafikadresse der Graik, welche angezeigt wird wenn die Maus über das Bild fährt

Oder so:


<img src="http://www.DEINE-BILD-URL-HIER.png" onmouseover="this.src='http://www.DEINE-BILD-HOVER-EFFEKT-URL-HIER.png';>

Selbe Erklärung wie bei dem anderen Beispiel, nur 1x Grafikadresse von rot.
Wenn du das so machst, ändert sich der Hover nicht in die alte Grafik zurück, sonder er verschwindet vom Seiteninhalt!

Beispiel: