8 besökare, 2 medlemmar och 2 Studenter är online nu
Loopia

webdesign och HTML

OnMouseOver med rolloverbild

Rollover- eller OnMouseOver-script finns i ett flertal olika varianter. Här används två bilder, en bild som visas i original (och OnMouseOut) och en bild som visar rolloverbilden (OnMouseOver).

Prova att föra muspekaren över knapparna!

 

 

TIPS! Fler rollover-script hittar du i guiderna:
OnMouseOver med popupbild »
Rollover-image och Navigation Bar »
Rollovers i ImageReady »

 

Steg 1:
Lägg koden inom <HEAD>

Byt ut namnen på bilderna mot dina egna bildnamn på originalbilden och rolloverbilden. De bilder som ska användas hämtas till en vektor (array) och numreras.

<HEAD>

<script language="javascript">
<!-- kontrollerar om webbläsaren kan köra scriptet -->

function getBrowserVersion() {
appname= navigator.appName;
appversion = navigator.appVersion;
majorver = appversion.substring(0, 1);
if ( (appname == "Netscape") && ( majorver >= 3 ) ) return 1;
if ( (appname == "Microsoft Internet Explorer") && (majorver >= 4) ) return 1;
return 0;
}function switch_image(num, imgname) {
if (getBrowserVersion()) {
document[imgname].src = img[num].src;
}
}

<!-- förladdning (preload) av bilder som ska användas -->

imagesrc = new Array();
imagesrc[0] = "bild1.gif";
imagesrc[1] = "bild1_over.gif";
imagesrc[2] = "bild2.gif";
imagesrc[3] = "bild2_over.gif";
imagesrc[4] = "bild3.gif";
imagesrc[5] = "bild3_over.gif";

if (getBrowserVersion()) {
img = new Array();
for (i = 0; i < imagesrc.length; i++) {
img[i] = new Image();
img[i].src = imagesrc[i];
}
}
</script>

</HEAD>

 

Steg 2:
Lägg koden inom <BODY>

Inom <A HREF> för varje bildlänk placeras javascriptet för OnMouseOVER och OnMouseOut. Observera att varje bild måste ha ett eget namn som tex: img name="bild1" och det är alltså inte filnamnet (bild1.gif) utan det angivna bildnamnet (bild1) som används av javascriptet.

Numreringen 0,1,2,3,4,5 refererar till filnamnen på bilderna som hämtas till vektor (array) i javascriptet ovan. Den första bilden "bild1.gif" använder identifieraren "0" osv...

<BODY>

<!-- bildlänkarna med javascriptkoden -->

<a href="https://webdesignskolan.se"
onMouseOver="switch_image('1','bild1')"
onMouseOut="switch_image('0','bild1')">
<img name="bild1" src="bild1.gif" border="0"> </a>

<a href="https://webdesignskolan.se"
onMouseOver="switch_image('3','bild2')"
onMouseOut="switch_image('2','bild2')">
<img name="bild2" src="bild2.gif" border="0"> </a>

<a href="https://webdesignskolan.se"
onMouseOver="switch_image('5','bild3')"
onMouseOut="switch_image('4','bild3')">
<img name="bild3" src="bild3.gif" border="0"> </a>

</BODY>

 

Här är bilderna i exemplet om du vill prova att använda dem:

Startbild:

bild1.gif

bild2.gif

bild3.gif

Rolloverbild:

bild1_over.gif

bild2_over.gif

bild3_over.gif