Het wijzigen van een beeld op de muis Rollover

Het wijzigen van een beeld op de muis Rollover


Het veranderen van een beeld op een muis rollover is een populaire manier om interactiviteit toe te voegen aan een webpagina. Webdesigners afbeeldingen te wijzigen op een rollover om het beeld lijken te bewegen, zoals een knop, later verschijnen gedrukt, wanneer een muisaanwijzer eroverheen. Andere toepassingen voor deze techniek onder meer entertainment, zoals wanneer een kat beeld wordt een hond of een afbeelding pop verandert in een boze geest, en onderwijs, zoals wanneer het antwoord op een vraag verbergt onder een ander beeld. Rollovers vereisen 2 JavaScript event handlers en 2 of meer afbeeldingen voor de afbeelding verandering functionaliteit goed te laten werken.

instructies

1 Kies 2 afbeeldingen te gebruiken voor de rollover. Voor professionele functionaliteit moet de afbeeldingen dezelfde afmetingen hebben. Voor entertainment doeleinden, de afmetingen van de beelden afhankelijk van de gewenste uitkomst van het spel. Let op hun bestandsnamen. Noem de 2 images "img_1.jpg" en "img_2.jpg" in de zin van deze oefening. Sla de afbeeldingen naar dezelfde map waar de HTML-document zich bevindt.

2 Open het HTML-document in een teksteditor, zoals Kladblok of TextEdit. De code voor de muis rollover vereist 2 JavaScript event handlers te worden toegevoegd aan de pagina. Een daarvan is de onMouseOver, die de beweging van de muis vangt bij het passeren van het beeld. De andere is onmouseout, die detecteert wanneer de muis weg van deze afbeelding is verhuisd.

3 Construct het beeld HTML-tag. Het ziet er als volgt uit:

<Img width = "143" height = "39" border = "0"

alt = "Beweeg uw muis over me" id = "button_but" />

De "src" attribuut brengt de eerste afbeelding naar de pagina. De andere attributen zijn optioneel: breedte en hoogte verklaren de afmetingen van het beeld. "Border" plaatst een grens rond het beeld. Het kan pixels voor een grens. Laat het bij 0 als er geen grenzen zijn wilde. De "alt" attribuut is noodzakelijk voor blinde of slechtziende gebruikers zien. De tekst binnen dat attribuut wordt gelezen door een tekst naar spraak programma, evenals de browser wanneer een muis over het. Het evenement handlers verwijzen naar de beelden door de "id" attribuut, dus het is belangrijk om een ​​goede naam te gebruiken.

4 Voeg een anker tag rond de afbeelding tag. Dit label zal het event handlers te houden. "Javascript: void (0)" stopt de browser uit te proberen naar een andere webpagina te laden.

<a href="javascript: void(0)">

<Img width = "143" height = "39" border = "0" alt = "Druk op deze knop" name = "button_but" />

</a>

5 Vooraf laden van de beelden door meer JavaScript in de <head> van het document. De afbeeldingen worden aangeroepen door functies en het "id" attribuut vertelt het script waar de nieuwe foto's te zetten.

<Head>

<Script type = "text / javascript">

functie mouseOver ()

{

document.getElementById ( "button_but"). src = "img_1.jpg"

}

functioneren mouseOut ()

{

document.getElementById ( "button_but"). src = "img_2.jpg"

}

</ Script>

</ Head>

Wees voorzichtig om zowel het script en het hoofd-tags te sluiten.

6 Voeg de JavaScript-event handlers om het anker tag zoals hieronder aangegeven. Merk op dat "img_1.jpg" wordt gebruikt in de onmouseover event handler evenals de eigenschap afbeelding tag bron. "Img_2.jpg" is verborgen in de onmouseout handler en zal alleen worden gezien wanneer de muis beweegt weg van "img_1.jpg".

<A href = "javascript: void (0)" onmouseover = "mouseover ()" onmouseout = "mouseout ()"

<Img width = "143" height = "39" border = "0" alt = "Druk op deze knop" name = "button_but" />

</a>

Deze code vertelt de browser om beelden wanneer de muis over de afbeelding te wijzigen.

7 Sla de pagina en open het in een browser om het te testen. JavaScript in te schakelen indien nodig en zorg ervoor dat de code werkt.

8 Upload het bestand en de afbeeldingen naar een map op uw webserver.

Hints

  • Beelden worden gemakkelijk geschakeld door nieuwe foto's toe te voegen aan de map en het veranderen van hun namen aan de huidige namen beeldbestand.
  • Gebruikers zonder Javascript ingeschakeld zal niet in staat zijn om deze functie te gebruiken.