Hur gör man en Mouseover? Tutorial

Har fått en fråga på Mejlen från Lisa som undrar hur man gör en Mouseover på bloggen. Så i dagens designtips ska jag försöka förklara hur man gör en enkel Mouseover i ett vanligt inlägg i Blogspot (Blogger) eller Wordpress, utan att behöva krångla i kodmallen. Med mouseover betyder alltså att bilden ändrar sig när man för muspekaren över den. Testa att föra din muspekare över bilden nedan för att se effekten. 

Exempel

Så här gör du!

1. Gör två olika bilder som du vill använda dig av.
Här kommer exemplet av mina bilder jag har på bilden ovan.
Tänk på att bilderna ska vara lika stora och döp dom till namn så du kan skilja på dom!

2. Ladda sedan upp dessa på din blogg och spara länken till bilderna så du har dom!

3. Börja skriva på ditt inlägg! Där du vill ha din Mouseover bild stannar du och klistrar in koden nedanför i inlägget. Kom ihåg att du måste vara inne i "Redigera HTML" delen och inte i "skriv" delen.

<a href="LÄNK"><br /> <img src="BILD1" onmouseover="this.src='BILD2';" onmouseout="this.src='BILD1';" /></a>

4. Där det står "LÄNK" kan du klistra in en länk till den sidan du vill att man ska komma när man klickar på din bild. Där det står "BILD1" ska du klistra in länken till den bild du vill ska synas när muspekaren INTE är över bilden. Där det står "BILD2" klistrar du in länken till den bild du vill ska synas när muspekaren är över bilden. Sedan klistrar du in länken till bild 1 igen där det står "BILD1".

5. För ett centrera din bild skriver du bara center innan koden, som här under.
<center> HTML-koden du nyss klistrade in</center>    Hoppas detta hjälpte!
Har du några frågor är det bara att höra av dig!
Antingen i en kommentar eller ett mejl.
Erikawilhelmsson@hotmail.com