in een andere tutorial hebben we gekeken naar het gebruik van de CSS background-image eigenschap en :hover selector om een interactieve afbeelding te maken die veranderde toen een gebruiker zijn muis over de afbeelding verplaatste. In dat voorbeeld begonnen we met een grijs Thuis Icoon en transformeerden het in een oranje icoon. 
in deze tutorial zullen we kijken naar een andere manier om hetzelfde te bereiken met behulp van JavaScript.
Wanneer moet u CSS vs JavaScript
CSS is de taal die wordt gebruikt om website lay-out te definiëren en eenvoudige animaties te maken. JavaScript wordt gebruikt om interactiviteit toe te voegen op basis van feedback en activiteit van gebruikers van de website. Er zijn plaatsen waar de mogelijkheden van CSS en JavaScript overlappen. Deze overlapping roept de vraag op: welke moet je gebruiken? Het antwoord op die vraag is niet eenvoudig, en veel meningen zijn geuit over het onderwerp. Sommigen zeggen dat je CSS in vrijwel elk geval moet gebruiken en alleen JavaScript gebruiken als geen ander hulpmiddel het werk kan doen. Anderen bieden een volledig tegenovergestelde argument dat JavaScript CSS volledig moet vervangen. In de praktijk, de meeste ontwikkelaars gewoon gebruik maken van de taal die ze zijn het meest vertrouwd met, zelfs als het niet de beste keuze voor de taak bij de hand. We gaan ons niet mengen in het debat. We gaan laten u uw eigen mening over de zaak en in plaats daarvan richten op het tonen van u hoe u zowel CSS en JavaScript gebruiken. Een vorige tutorial al aangetoond hoe deze overgang te bereiken met behulp van CSS. Je kunt het hier zien. De rest van deze tutorial zal u leren hoe u JavaScript gebruiken voor deze gemeenschappelijke taak.
de code achter de transformatie
hier is de JavaScript-en HTML-code gebruikt om de transformatie te maken.
<a href="home_url" onmouseover="rollover('home')" onmouseout="rollout('home')"> <img src="../path/original_image.file" name="home" alt="Home Page"> </a> <script type="text/javascript"> <!-- setrollover("../path/hover_image.file"); --> </script> laten we deze stukjes code één voor één nemen zodat we kunnen begrijpen wat er aan de hand is.
het Ankerelement
de eerste regel code die we zien is een ankerelement.
<a href="home_url" onmouseover="rollover('home')" onmouseout="rollout('home')" > omdat in ons voorbeeld een home-pictogram wordt gekoppeld aan de homepage van de website, zou het href – attribuut naar onze homepage van de website verwijzen. Vervolgens komt het onmouseover JavaScript-evenement. Dit is de gebeurtenis die zal plaatsvinden wanneer de muis boven het ankerelement zweeft. In dit geval wordt een functie genaamd rollover aangeroepen, die het item met de naam ‘home’effect. Tot slot hebben we de gebeurtenis onmouseout die de functie rollout aanroept, die opnieuw het item met de naam ‘home’beïnvloedt.
het afbeeldingselement
genest in het ankerelement is ons afbeeldingselement.
<img src="../path/original_image.file" name="home" alt="Home Page"> we zullen het afbeeldingselement gebruiken om de afbeelding te laden die verschijnt als de muis niet boven het ankerelement zweeft. In het geval van ons voorbeeld laden we het grijze huispictogram. Vervolgens komt het name attribuut. We gebruiken dit attribuut om het JavaScript weg te geven om het HTML-element te identificeren dat we met het script willen wijzigen. Kijk snel terug op het ankerelement en merk op hoe beide functies de parameter ('home')gebruiken. Het attribuut name="home" is hoe de JavaScript-functies het afbeeldingselement identificeren als het item waarop moet worden gereageerd.
het Script
tenslotte hebben we een heel kort script.
<script type="text/javascript"> <!-- setrollover("../path/hover_image.file"); --> </script> dit script stelt een waarde in voor de functie rollover die wordt aangeroepen door de functie onmouseover die wordt geactiveerd wanneer de muisaanwijzer over de afbeelding zweeft.
alles bij elkaar zetten
als we het anker, image en script bij elkaar zetten, dan krijgen we dit.
Vereenvoudig de Code met jQuery
jQuery is een JavaScript-bibliotheek waarmee u zo ongeveer elke vorm van JavaScript-animatie of-transformatie met minder code kunt maken. Als we jQuery willen gebruiken om dezelfde transformatie te maken, dan ziet de code er zo uit.
<a href="home_url"> <img src="../path/original_image.file" alt="Home Page"> </a> <script> jQuery.('#home').hover( function(){ $(this).attr( 'src' , 'hover-image.file' ) }, function(){ $(this).attr( 'src' , 'original-image.file' ) } ); </script> het leuke aan het gebruik van jQuery is dat we niet langer event handlers aan de HTML zelf hoeven toe te voegen (herinner je je de gebeurtenissen onmouseover en onmouseout uit de originele code?). Een van de beste dingen over jQuery is dat het de event handlers dynamisch kan toevoegen. Dit zorgt voor een grotere scheiding tussen het script en de HTML-inhoud en is een betere manier van coderen. Zoals je kunt zien, de HTML is een stuk schoner als we gebruik maken van de jQuery bibliotheek en het eindresultaat is hetzelfde.
jQuery.(‘#thuis’).hover (function () { $(this).attr (“src”, ” home168-1.png’)}, function () {$(this).attr (‘src’, ‘ orange_home.png’ ) } );jQuery toevoegen aan een Website
een ding om in gedachten te houden als je besluit om deze code te gebruiken op uw eigen website is dat de jQuery bibliotheek moet worden geladen door de browser op elke pagina waar een jQuery script wordt gebruikt. JavaScript wordt ondersteund door elke moderne browser. Echter, de jQuery bibliotheek moet worden toegevoegd aan de browser om jQuery scripts te verwerken. Er zijn twee manieren om jQuery toe te voegen aan een website.
- Download jQuery van de jquery Foundation en upload het naar uw webserver.
- Link naar een openbaar gehoste jQuery-bibliotheek.
de eenvoudigste manier om jQuery aan een website toe te voegen is door te linken naar een jQuery-bibliotheek die al op het web gehost is. U kunt de jQuery-bibliotheek die door Google wordt gehost, laden door de volgende regel code in het head – element van uw website te plakken.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
