Onmouseover bzw. Mouseover Effekt

Dafür brauchen wir zwei Bilder: Das erste erscheint als Standard, das zweite erscheint wenn wir uns mit dem Mauszeiger darüber befinden.

1. Als erstes müssen wir die zwei Bilder hochladen, z.B. auf einer unsichtbaren Seite in unserer Website.

2. Dann werden die Adressen der Bilder ermittelt. Die Adressen kann man mit Rechtsklick >> "Grafik Adresse kopieren" ermitteln.

3. Als nächstes fügen wir den unteren Code als html/Widget in die Website ein.

   - Bei Höhe/Breite kann man die Größe des Bildes definieren

   - Bei AdresseBild1 und AdresseBild2 gibt man die Adressen der Bilder 1 bzw. 2. Die kleinen ( ' ) nicht übersehen!

Code

<

img src="AdresseBild1" alt="" width="Breite" height="Höhe"

onmouseover="src='AdresseBild2'"

onmouseout="src='AdresseBild1'"

/>

Beispiel

       

 Bild1:

http://u.jimdo.com/www30/o/s578bdaf3b95b13fc/img/if751f9672c5a713e/1296584879/std/image.jpg

 


Bild 2:

 

http://u.jimdo.com/www30/o/s578bdaf3b95b13fc/img/i02602ed45ae9db83/1296584905/std/image.jpg

https://u.jimcdn.com/www30/o/s578bdaf3b95b13fc/img/if751f9672c5a713e/1296584963/std/http-u-jimdo-com-www30-o-s578bdaf3b95b13fc-img-if751f9672c5a713e-1296584879-std-image-jpg.jpg https://u.jimcdn.com/www30/o/s578bdaf3b95b13fc/img/i02602ed45ae9db83/1296584989/std/http-u-jimdo-com-www30-o-s578bdaf3b95b13fc-img-i02602ed45ae9db83-1296584905-std-image-jpg.jpg

 

 

 

 

und so sieht´s aus: