i en annen tutorial vi så på hvordan du bruker CSS background-image eiendom og :hover velgeren for å lage et interaktivt bilde som endres når en bruker flyttet musen over bildet. I det eksemplet startet vi med et grått hjemmeikon og forvandlet det til et oransje ikon. 
i denne opplæringen ser vi på en annen måte å oppnå det samme ved Hjelp Av JavaScript.
NÅR Bør DU Bruke CSS vs JavaScript
CSS er språket som brukes til å definere nettstedet layout og lage enkle animasjoner. JavaScript brukes til å legge til interaktivitet basert på tilbakemeldinger og aktivitet fra brukerne av nettstedet. Det er steder hvor MULIGHETENE TIL CSS og JavaScript overlapper. Denne overlappingen reiser spørsmålet: hvilken skal du bruke? Svaret på det spørsmålet er ikke enkelt, og mange meninger har blitt uttrykt om emnet. NOEN sier AT DU bør bruke CSS i nesten alle tilfeller og bare bruke JavaScript når ingen andre verktøy kan gjøre jobben. Andre tilbyr et helt motsatt argument at JavaScript skal erstatte CSS helt. I praksis bruker de fleste utviklere bare språket de er mest kjent med, selv om det ikke er det beste valget for oppgaven ved hånden. Vi kommer ikke til å veie inn på debatten. Vi skal la deg gjøre opp din egen mening om saken og i stedet fokusere på å vise deg hvordan du bruker BÅDE CSS og JavaScript. En tidligere tutorial allerede vist hvordan å oppnå denne overgangen VED HJELP AV CSS. Du kan se det her. Resten av denne opplæringen vil lære deg Hvordan Du bruker JavaScript for denne vanlige oppgaven.
Koden Bak Transformasjonen
Her er JavaScript og HTML-koden som brukes til å opprette transformasjonen.
<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> La oss ta disse kodebitene en om gangen, slik at vi kan forstå hva som skjer.
Ankerelementet
den første linjen med kode vi ser er et ankerelement.
<a href="home_url" onmouseover="rollover('home')" onmouseout="rollout('home')" > siden vårt eksempel innebærer å koble et hjemmeikon til nettstedets hjemmeside, vil href – attributtet peke på vår hjemmeside. Neste kommer onmouseover JavaScript-hendelsen. Dette er hendelsen som vil oppstå når musen svinger over ankerelementet. I dette tilfellet kalles en funksjon som heter rollover, og påvirker elementet med navnet ‘hjem’. Til slutt har vi hendelsen onmouseout som kaller funksjonen rollout, som igjen påvirker elementet med navnet ‘hjem’.
Bildeelementet
Nestet i ankerelementet er vårt bildeelement.
<img src="../path/original_image.file" name="home" alt="Home Page"> vi bruker bildeelementet til å laste inn bildet som vises når musen ikke svinger over ankerelementet. I tilfelle av vårt eksempel, laster vi det grå husikonet. Neste kommer name attributtet . Vi bruker dette attributtet til å gi JavaScript bort for å identifisere HTML-elementet som vi vil endre med skriptet. Ta en rask titt tilbake på ankerelementet og legg merke til hvordan begge funksjonene bruker parameteren ('home'). Attributtet name="home" er Hvordan JavaScript-funksjonene identifiserer bildeelementet som elementet som skal behandles.
Skriptet
Til Slutt har Vi et veldig kort skript.
<script type="text/javascript"> <!-- setrollover("../path/hover_image.file"); --> </script> dette skriptet angir en verdi for rollover – funksjonen som kalles av onmouseover utløses når en seers mus svinger over bildet.
Setter alt Sammen
hvis vi legger ankeret, bildet og skriptet sammen, er det vi får.
Forenkle Koden med jQuery
jQuery er Et JavaScript-bibliotek som lar deg lage omtrent alle slags JavaScript-animasjon eller transformasjon med mindre kode. Hvis vi ønsket å bruke jQuery til å skape den samme transformasjonen, er det slik koden ville 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 fine med å bruke jQuery er at vi ikke lenger trenger å legge hendelsesbehandlere TIL HTML selv (husk onmouseover og onmouseout hendelser fra den opprinnelige koden?). En av de beste tingene om jQuery er at den kan legge til hendelsesbehandlere dynamisk. Dette gir større separasjon mellom skriptet og HTML-innholdet og er en bedre måte å kode på. SOM du kan se, ER HTML mye renere hvis vi bruker jquery biblioteket og sluttresultatet er det samme.
jQuery.(‘#hjem’).hover (funksjon () {$(dette).attr (‘src’, ‘ home168-1.png’)}, funksjon () {$(dette).attr (‘src’, ‘ orange_home.png’ ) } );Legge til jQuery Til Et Nettsted
En ting å huske på hvis du bestemmer deg for å bruke denne koden på ditt eget nettsted, er at jquery-biblioteket må lastes av nettleseren på hver side der et jquery-skript brukes. JavaScript støttes av alle moderne nettlesere. Imidlertid må jquery biblioteket legges til nettleseren for at jQuery skript for å behandle. Det er to måter å legge til jQuery på et nettsted.
- Last ned jQuery Fra Jquery Foundation og last den opp til webserveren din.
- Lenke til et offentlig vert jquery-bibliotek.
den enkleste måten å legge til jQuery på et nettsted er å koble til et jquery-bibliotek som allerede er vert på nettet. Du kan laste jQuery-biblioteket som er vert For Google ved å lime inn følgende kodelinje i head – elementet på nettstedet ditt.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
