Saturday, September 17, 2011

How to make image hover

"Image hover" vil si at du kan få en link eller et bilde til å skifte til et annet bilde når piltasten møter bildet. Det er veldig enkelt og ganske praktisk når man lager bilder eller linker som skal trykkes på (for å bekrefte at det kan trykkes på).

Lag dine to bilder. Linker eller hva enn du måtte ønske å bruke dem til. Jeg kaller dem "b1.png" og "b2.png". Mitt "b2.png" bilde er et sort symbol, og kaaanskje et litt dårlig eksempel. La gå.

b1.png
b2.png

Bytt ut linkene i koden under med egne bilder og linker.

<a href="http://www.catharina-kroken.blogspot.com/"><img onmouseout="this.src='http://img849.imageshack.us/img849/5895/94477364.png';" onmouseover="this.src='http://img17.imageshack.us/img17/6013/55295922.png';" src="http://img849.imageshack.us/img849/5895/94477364.png';" /></a>

Bytt ut teksten i denne fargen med din link. Legg til " target="_blank" " etter link" om du ønsker at siden du linker til skal åpnes i et nytt vindu. Fjern hele <a href="http://www.catharina-kroken.blogspot.com/"> og </a> i enden av koden om du ikke ønsker at det skal være en link.

Bytt ut teksten i denne fargen til bildet du i utgangspunktet vil at det skal være. "b1.png".

Bytt ut teksten i denne fargen med bildet du ønsker at skal synes når piltasten er over bildet. "b2.png"

Bytt ut teksten i denne fargen til originalbildet "b1.png" igjen.

Slik blir resultatet:

0 comments :