bildväxling med JavaScript

1. Bildväxling/rollover

Många har frågat efter bildväxlingsprogram i JavaScript, och här är ett sådant som du kan använda på din hemsida. Koden består av två delar, skulle man kunna säga. Den första delen nedan klistrar du in inom head-sektionen på din hemsida:

<script language = "JavaScript">

<!--


// Vilka bilder som är 'on' och vilka som är 'off'

if (document.images) {

  img1on = new Image();
  img1on.src = "bilder/start2.gif";

  img2on = new Image();
  img2on.src = "bilder/hunden2.gif";

  img3on = new Image();
  img3on.src = "bilder/fritid2.gif";


  img1off = new Image();
  img1off.src = "bilder/start1.gif";

  img2off = new Image();
  img2off.src = "bilder/hunden1.gif";

  img3off = new Image();
  img3off.src = "bilder/fritid1.gif";

  }




// Funktion som aktivera bilderna; 'on'

function imgOn(imgName) {
  if (document.images) {
     document[imgName].src = eval(imgName + "on.src");
	}
}



// Funktion som inaktiverar bilderna; 'off'

function imgOff(imgName) {

  if (document.images) {
     document[imgName].src = eval(imgName + "off.src");
	}

}


// -->

</script>

Den andra delen utgör koden som du använder inom body-sektionen och består av själva länkarna som du vill ha:


<a href="startsidan.html" onMouseOver = "imgOn('img1')" onMouseOut="imgOff('img1')"> <img src="bilder/start1.gif" name="img1" width="100" height="20" border="0" alt="Startsidan"></a>

<a href="hunden.html" onMouseOver = "imgOn('img2')" onMouseOut="imgOff('img2')"> <img src="bilder/hunden1.gif" name="img2" width="100" height="20" border="0" alt="Min hund"></a>

<a href="fritid.html" onMouseOver = "imgOn('img3')" onMouseOut="imgOff('img3')"> <img src="bilder/fritid1.gif" name="img3" width="100" height="20" border="0" alt="Mina fritidsintressen"></a>


I exempelet har jag utgått ifrån en hemsida med tre länkar. Vill du ha fler, bygger du ut koden enligt samma mönster och du förändrar alltså både inom head-sektionen och body-sektionen.