So ändern Sie ein Bild auf ein Mouse-over in HTML

Webseite-Tasten, die Bilddateien, die auf Mouseover ändern bieten Ihren Besuchern mit einer dynamischen Erfahrung. Sie senden auch eine subtile Anleitung auf die Schaltfläche klicken. Wählen Sie Ihren Normalzustand Button und eine, die angezeigt wird, wenn ein Benutzer über die Schaltfläche bewegt. Verwenden Sie HTML und JavaScript, um diese sinnvolle Ergänzung zu Ihrer Webseite zu erreichen.

Anweisungen

1 Eine Text- oder HTML-Editor öffnen und Folgendes einfügen:

< SCRIPT TYPE = "Text/Javascript" >

<!--

Var RoArray = new Array();

Funktion setrollover(OverImg,docImgName)

{

Wenn (! document.images)return;

Wenn (DocImgName == Null)

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

RoArray [DocImgName] = Neues Objekt;

RoArray [DocImgName] .overImage = neues Bild;

RoArray [DocImgName].overImage.src = OverImg;

}

Funktion rollover(docImgName)

{

Wenn (! document.images)return;

Wenn (! RoArray [DocImgName]) zurück;

Wenn (! roArray[docImgName].outImage)

{

roArray[docImgName].outImage = new Image;

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

}

Document.Images[docImgName].src=roArray[docImgName].overImage.src;

}

Funktion rollout(docImgName)

{

Wenn (! document.images)return;

Wenn (! RoArray [DocImgName]) zurück;

Document.Images[docImgName].src=roArray[docImgName].outImage.src;

}

-->

< / SCRIPT >

2 Suchen Sie den Bereich für die Schaltfläche und fügen Sie die folgenden:

< 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 >

Ersetzen Sie "mydoc.html" mit Ihren Dateinamen. Ersetzen Sie "mainbutton.jpg" und "overbutton.jpg" mit den Bildnamen von Ihren Haupt- und Mouseover-Buttons an.

3 Speichern Sie die Datei. Stellen Sie sicher, dass die Bilder im selben Verzeichnis wie Ihr HTML-Dokument oder an der in Ihrer Attribute "SRC" und "Setrollover" angegebene Pfad vorhanden sind. Testen Sie mit einem Doppelklick auf die Datei auf Ihrem System.