Een mouseover is een effect dat plaatsvindt wanneer een gebruiker de muiscursor over een afbeelding en de afbeelding wordt gewijzigd als gevolg daarvan beweegt. Mouseovers worden meestal bereikt met behulp van een client-side scripttaal zoals JavaScript en zijn gebruikt voor het maken van knoppen en drop-down menu's.
Voeg de afbeelding die als de standaardafbeelding fungeert voor het uitvoeren van de muis-over effect in het HTML-document. Dit doen door de volgende regel code toe te voegen in de hoofdtekst van een HTML-document:
<img src='myMouseOutImage.jpg' height='40' width='100' name='myimage' />Zorg geven de afbeelding een naamkenmerk, zoals dit zal worden hoe de JavaScript zal verwijzen naar dit bijzondere beeld. Het wijzigen van de bron "myMouseOutImage.jpg" op de naam van de afbeelding die u wilt gebruiken als de mouseover "up" staat.
Invoegen van een openende en sluitende script-tag in de "
"sectie van de webpagina. De kopsectie van een HTML-document is altijd aan het begin van het document. Dit is waar de JavaScript voor de mouseover zal worden geschreven, zodat de browser wat begrijpt te doen met de code. De head-sectie ziet er ongeveer als volgt:<head> <title> My First MouseOver </title> <script language='javascript'> * Your functions will go here* </script> </head>Maak de handlerfunctie voor de gebeurtenis "onMouseOver" door de volgende JavaScript invoegen in de script-sectie die u hebt ingevoegd in de head-sectie van de webpagina:
function mouseOn(){ document.images["myimage"].src = "myMouseOverImage.jpg"; }Deze functie wordt de afbeelding omgezet in de mouseover-afbeelding die u opgeeft. Als een knop de mouseover is, zou dit beeld een depressief versie van de knop om te simuleren van de muis naar beneden duwen in de pagina. Wijzigt de naam van de afbeelding die u wilt gebruiken als de mouseover afbeelding voor de status "omlaag" de bron "myMouseOverImage.jpg".
Maak de handlerfunctie voor de gebeurtenis "onMouseOut" door de volgende JavaScript invoegen in de script-sectie die u hebt ingevoegd in de head-sectie van de webpagina:
function mouseOff(){ document.images["myimage"].src = "myMouseOutImage.jpg"; }Deze functie herstelt de mouseover afbeelding aan het origineel "up" positie beeld. Vergeet niet om het wijzigen van de bron "myMouseOutImage.jpg" aan de procesnaam die u voor de "up" staat gebruikt.
De functies toewijzen aan hun respectieve gebeurtenissen met behulp van de link-element om in te kapselen het afbeeldingselement mouseover:
<a href="javascript:void(0)" onMouseOver="mouseOn()" onMouseOut="mouseOff()"> <img src='myMouseOutImage.jpg' height='40' width='100' name='myimage' /> </a>Merk op dat het de afbeelding wordt nu omgezet in een link door het toevoegen van een anker-tag eromheen. Het "href"-kenmerk van de link doet niets, aangezien de koppeling niet de pagina verandert, maar de link essentieel is voor het maken van een gebeurtenis die leiden de "mouseOver" en "mouseOut" gebeurtenis functies tot zal.
Controleer dat uw HTML-document ziet er ongeveer als volgt:
<title> My First MouseOver </title> <script language='javascript'> function mouseOn(){ document.images["myimage"].src = "myMouseOverImage.jpg"; } function mouseOff(){ document.images["myimage"].src = "myMouseOutImage.jpg"; } </script><a href="javascript:void(0)" onMouseOver="mouseOn()" onMouseOut="mouseOff()"><img src='myMouseOutImage.jpg' height='40' width='100' name='myimage' /></a>
- JavaScript is hoofdlettergevoelig, dus "mouseOn" is niet hetzelfde als "MouseOn."
