Hvordan endre et bilde på en mus Over i HTML
Nettstedet knapper som inneholder bilder som endres på mouse gi de besøkende med en mer dynamisk opplevelse. De har også sende en subtil instruksjon til å klikke på knappen. Velg din normale funksjonsknapp og den som vises når en bruker ruller over knappen. Bruk HTML og Javascript for å oppnå dette nyttig tillegg til websiden.
Bruksanvisning
1 Åpne en tekst eller HTML-editor og sett inn følgende:
<Script type = "text / javascript">
<! -
Var roArray = new Array ();
funksjon setrollover (OverImg, docImgName)
{
hvis retur (document.images!);
if (docImgName == null)
docImgName = document.images[document.images.length-1].name;
roArray [docImgName] = new Object;
roArray [docImgName] .overImage = new Bilde;
roArray [docImgName] .overImage.src = OverImg;
}
funksjon roll (docImgName)
{
hvis retur (document.images!);
hvis retur (roArray [docImgName]!);
if (! roArray [docImgName] .outImage)
{
roArray [docImgName] .outImage = new Bilde;
roArray [docImgName] .outImage.src = document.images [docImgName] .src;
}
document.images [docImgName] .src = roArray [docImgName] .overImage.src;
}
funksjon utrulling (docImgName)
{
hvis retur (document.images!);
hvis retur (roArray [docImgName]!);
document.images [docImgName] .src = roArray [docImgName] .outImage.src;
}
// ->
</ SCRIPT>
2 Finn området til knappen og sett inn følgende:
<A
HREF="mydoc.html"
onMouseOver = "roll ( 'myimage')"
onmouseout = "utrulling ( 'myimage')"
> & Lt; IMG
SRC = "mainbutton.jpg"
NAME = "myimage"
ALT = "Home Page" BORDER = 0
Height = 130 width = 115
> & Lt; / a>
<Script type = "text / javascript">
<! -
setrollover ( «overbutton.jpg", "myimage");
// ->
</ SCRIPT>
Erstatt "mydoc.html" med filnavnet. Erstatt "mainbutton.jpg" og "overbutton.jpg" med bilde navnene på dine viktigste og mouse knapper hhv.
3 Lagre filen. Sørg for at bildene finnes i samme katalog som HTML-dokumentet eller på banen gitt i din "SRC" og "setrollover" attributter. Test ved å dobbeltklikke på filen på systemet.