Het wijzigen van een afbeelding op een muis Over in HTML

Website knoppen met afbeeldingen die op mouseover veranderen bieden uw bezoekers met een meer dynamische ervaring. Zij ook verzenden een subtiele instructie te klikken op de knop. Kies uw knoop van het normale statuswaarden en degene die wordt weergegeven wanneer een gebruiker op de knop rolt. Gebruik HTML en JavaScript om te bereiken deze nuttige toevoeging aan uw Web-pagina.

Instructies

1

Open een teksteditor of HTML-editor en voeg de volgende:

< SCRIPT TYPE = "text/javascript" >

<!--

var roArray = nieuwe Array();

functie setrollover(OverImg,docImgName)

{

Als (! document.images)return;

Als (docImgName == null)

docImgName = document.images[document.images.length-1].name;

roArray [docImgName] = nieuw Object;

roArray [docImgName] .overImage = nieuwe afbeelding;

roArray [docImgName].overImage.src = OverImg;

}

functie rollover(docImgName)

{

Als (! document.images)return;

Als (! roArray [docImgName]) terugkeer;

Als (! roArray[docImgName].outImage)

{

roArray[docImgName].outImage = new Image;

roArray[docImgName].outImage.src = document.images[docImgName].src;

}

document.images[docImgName].src=roArray[docImgName].overImage.src;

}

functie rollout(docImgName)

{

Als (! document.images)return;

Als (! roArray [docImgName]) terugkeer;

document.images[docImgName].src=roArray[docImgName].outImage.src;

}

-->

< / SCRIPT >

2

Ga naar het gedeelte voor uw knop en voeg het volgende toe:

< A

HREF="mydoc.html"

onMouseOver = "rollover('myimage')"

onMouseOut = "rollout('myimage')"

><IMG

SRC="mainbutton.jpg"

NAME="myimage"

ALT="Home Page" BORDER=0

HEIGHT=130 WIDTH=115

></A>

< SCRIPT TYPE = "text/javascript" >

<!--

setrollover ("overbutton.jpg", "myimage");

-->

< / SCRIPT >

"Mydoc.html" vervangen door de naam van uw bestand. Vervang "mainbutton.jpg" en "overbutton.jpg" met de namen van de afbeelding van uw hoofd- en mouseover knoppen respectievelijk.

3

Sla het bestand. Zorg voor de afbeeldingen in dezelfde map als uw HTML-document of in het doelpad in uw kenmerken "SRC" en "setrollover". Testen door te dubbelklikken op het bestand op uw systeem.