i en annan handledning tittade vi på hur man använder CSS background-image egenskapen och :hover väljaren för att skapa en interaktiv bild som ändras när en användare flyttade musen över bilden. I det exemplet började vi med en grå hemikon och förvandlade den till en orange ikon. 
i denna handledning tittar vi på ett annat sätt att uppnå samma sak med JavaScript.
när ska du använda CSS vs JavaScript
CSS är det språk som används för att definiera webbplatslayout och skapa enkla animationer. JavaScript används för att lägga till interaktivitet baserat på användarens återkoppling och aktivitet på webbplatsen. Det finns platser där möjligheterna till CSS och JavaScript överlappar varandra. Denna överlappning väcker frågan: Vilken ska du använda? Svaret på den frågan är inte enkelt, och många åsikter har uttryckts om ämnet. Vissa säger att du ska använda CSS i praktiskt taget alla fall och bara använda JavaScript när inget annat verktyg kan göra jobbet. Andra erbjuder ett helt motsatt argument att JavaScript ska ersätta CSS helt. I praktiken använder de flesta utvecklare helt enkelt det språk de är mest bekanta med, även om det inte är det bästa valet för uppgiften. Vi kommer inte att väga in debatten. Vi kommer att låta dig bestämma dig själv i frågan och istället fokusera på att visa dig hur du använder både CSS och JavaScript. En tidigare handledning visade redan hur man åstadkommer denna övergång med CSS. Du kan se det här. Resten av denna handledning kommer att lära dig hur du använder JavaScript för denna gemensamma uppgift.
koden bakom omvandlingen
här är JavaScript och HTML-kod som används för att skapa omvandlingen.
<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> Låt oss ta dessa bitar av kod en i taget så att vi kan förstå vad som händer.
Ankarelementet
den första raden av kod vi ser är ett ankarelement.
<a href="home_url" onmouseover="rollover('home')" onmouseout="rollout('home')" > eftersom vårt exempel innebär att länka en hemikon till webbplatsens hemsida, skulle attributet href peka på vår hemsida hemsida. Nästa kommer onmouseover JavaScript-händelsen. Detta är händelsen som kommer att inträffa när musen svävar över ankarelementet. I det här fallet kallas en funktion som heter rollover och påverkar objektet med namnet ’hem’. Slutligen har vi onmouseout – händelsen som kallar funktionen rollout, som återigen påverkar objektet med namnet ’hem’.
bildelementet
kapslat i ankarelementet är vårt bildelement.
<img src="../path/original_image.file" name="home" alt="Home Page"> vi använder bildelementet för att ladda bilden som kommer att visas när musen inte svävar över ankarelementet. När det gäller vårt exempel laddar vi den grå husikonen. Därefter kommer attributet name. Vi använder detta attribut för att ge bort JavaScript för att identifiera HTML-elementet som vi vill ändra med skriptet. Titta snabbt tillbaka på ankarelementet och Lägg märke till hur båda funktionerna använder parametern ('home'). Attributet name="home" är hur JavaScript-funktionerna identifierar bildelementet som objektet som ska hanteras.
skriptet
Slutligen har vi ett mycket kort skript.
<script type="text/javascript"> <!-- setrollover("../path/hover_image.file"); --> </script> detta skript anger ett värde för funktionen rollover som anropas av onmouseover som utlöses när en betraktares mus svävar över bilden.
att sätta ihop allt
om vi lägger ankaret, bilden och manuset tillsammans så är det vad vi får.
förenkla koden med jQuery
jQuery är ett JavaScript-bibliotek som låter dig skapa nästan vilken typ av JavaScript-animering eller transformation som helst med mindre kod. Om vi ville använda jQuery för att skapa samma transformation, så här skulle koden se ut.
<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> det fina med att använda jQuery är att vi inte längre behöver lägga till händelsehanterare till HTML själv (kom ihåg onmouseover och onmouseout händelser från den ursprungliga koden?). En av de bästa sakerna med jQuery är att det kan lägga till händelsehanterare dynamiskt. Detta möjliggör större separation mellan skriptet och HTML-innehållet och är ett bättre sätt att koda. Som du kan se är HTML mycket renare om vi använder jQuery-biblioteket och slutresultatet är detsamma.
jQuery.(’#hem’).hover (funktion () { $(detta).attr (’src’, ’ hem168-1.png’)}, funktion () { $(detta).attR (’src’, ’ orange_home.png’ ) } );att lägga till jQuery på en webbplats
en sak att tänka på om du bestämmer dig för att använda den här koden på din egen webbplats är att jQuery-biblioteket måste laddas av webbläsaren på varje sida där ett jQuery-skript används. JavaScript stöds av alla moderna webbläsare. JQuery-biblioteket måste dock läggas till i webbläsaren för att jQuery-skript ska kunna bearbetas. Det finns två sätt att lägga till jQuery på en webbplats.
- ladda ner jQuery från jQuery Foundation och ladda upp den till din webbserver.
- länk till ett offentligt värd jQuery-bibliotek.
det enklaste sättet att lägga till jQuery på en webbplats är att länka till ett jQuery-bibliotek som redan finns på webben. Du kan ladda jQuery-biblioteket som är värd för Google genom att klistra in följande kodrad i elementet head på din webbplats.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
