Hvordan å gjøre Mouse på en webside
En mouse er en effekt som skjer når en bruker beveger musepekeren over et bilde og bildet endrer som resultat. Mouseovers er vanligvis oppnås ved hjelp av en klient-side skriptspråk som Javascript og brukes til å lage knapper og rullegardinmenyer.
Bruksanvisning
1 Sett bildet som vil fungere som standard bilde for å utføre mouse inn i HTML-dokumentet. Gjør dette ved å legge til følgende kode inn i kroppen på HTML-dokumentet:
<img src='myMouseOutImage.jpg' height='40' width='100' name='myimage' />
Sørg for å gi bildet et navn attributt, da dette vil være hvordan Javascript vil referere til denne spesielle bildet. Endre kilden "myMouseOutImage.jpg" til navnet på bildet du ønsker å bruke som mouse er "opp" tilstand.
2 Sett inn en åpning og lukking skriptmerket inn i "<head>" delen av nettsiden. Hodet delen av et HTML-dokument er alltid i begynnelsen av dokumentet. Det er der Javascript for mouse vil bli skrevet slik at leseren forstår hva de skal gjøre med koden. Hodet delen bør ligne på følgende:
<head>
& Lt; title> Min første Mouse & lt; / title>
& Lt; script language = "javascript">
* Din funksjoner vil gå her *
& Lt; / script>
& Lt; / head>
3 Lag behandleren funksjon for "onmouseover" event ved å sette inn følgende Javascript inn i skriptet delen som du satt inn i hodet delen av nettsiden:
function mouseOn(){
document.images [ "myimage"] src = "myMouseOverImage.jpg.";
}
Denne funksjonen endrer bildet til mouse bilde som du angir. Hvis mouse er en knapp, kan dette bildet være en deprimert versjon av knappen for å simulere musen skyve den ned i siden. Endre kilden "myMouseOverImage.jpg" til navnet på bildet du ønsker å bruke som mouse bilde for "ned" tilstand.
4 Lag behandleren funksjonen for "onmouseout" hendelse ved å sette inn følgende Javascript inn i skriptet delen som du satt inn i hodet delen av nettsiden:
function mouseOff(){
document.images [ "myimage"] src = "myMouseOutImage.jpg.";
}
Denne funksjonen gjenoppretter mouse bilde til den opprinnelige posisjon "opp" bilde. Husk å endre kilden "myMouseOutImage.jpg" til bildenavnet du brukte for "opp" tilstand.
5 Tilordne funksjoner til sine respektive hendelser ved hjelp av koblingen element for å kapsle mousebildeelement:
<a href="javascript:void(0)" onMouseOver="mouseOn()" onMouseOut="mouseOff()"> <img src='myMouseOutImage.jpg' height='40' width='100' name='myimage' /> </a>
Legg merke til at bildet er nå omgjort til en link ved å legge til et anker tag rundt det. Den "href" egenskap av koblingen gjør ingenting ettersom koblingen endrer ikke på siden, men koblingen er avgjørende for å skape et arrangement som vil utløse "mouse" og "mouseout" hendelsesfunksjoner.
6 Sjekk at HTML-dokumentet ligner på følgende:
<Html>
<Head>
<title> My First MouseOver </title>
& Lt; script language = "javascript">
funksjon mouseOn () {
document.images [ "myimage"] src = "myMouseOverImage.jpg.";
}
fungere mus av () {
document.images [ "myimage"] src = "myMouseOutImage.jpg.";
}
& Lt; / script>
</ Head>
<Body>
<a href="javascript:void(0)" onMouseOver="mouseOn()" onMouseOut="mouseOff()"><img src='myMouseOutImage.jpg' height='40' width='100' name='myimage' /></a>
</ Body>
</ Html
Hint
- Javascript er case sensitive, så "mouseOn" er ikke det samme som "MouseOn."