într-un alt tutorial am analizat modul de utilizare a proprietății CSS background-image și a selectorului :hover pentru a crea o imagine interactivă care s-a schimbat atunci când un utilizator și-a mutat mouse-ul peste imagine. În acest exemplu, am început cu o pictogramă gri de acasă și am transformat-o într-o pictogramă portocalie. 
în acest tutorial, vom analiza un alt mod de a realiza același lucru folosind JavaScript.
când trebuie să utilizați CSS vs JavaScript
CSS este limba utilizată pentru a defini aspectul site-ului web și pentru a crea animații simple. JavaScript este folosit pentru a adăuga interactivitate pe baza feedback-ului și activității utilizatorilor site-ului web. Există locuri în care capacitățile CSS și JavaScript se suprapun. Această suprapunere ridică întrebarea: Ce ar trebui să utilizați? Răspunsul la această întrebare nu este unul simplu, și multe opinii au fost exprimate pe această temă. Unii spun că ar trebui să utilizați CSS în aproape fiecare caz și să utilizați JavaScript numai atunci când niciun alt instrument nu poate face treaba. Alții oferă un argument complet opus că JavaScript ar trebui să înlocuiască CSS în întregime. În practică, majoritatea dezvoltatorilor folosesc pur și simplu limbajul cu care sunt cel mai familiarizați, chiar dacă nu este cea mai bună alegere pentru sarcina la îndemână. Nu vom cântări în dezbatere. Vă vom permite să vă hotărâți în această privință și, în schimb, să vă concentrați pe a vă arăta cum să utilizați atât CSS, cât și JavaScript. Un tutorial anterior a demonstrat deja cum să realizați această tranziție folosind CSS. O puteți vedea aici. Restul acestui tutorial vă va învăța cum să utilizați JavaScript pentru această sarcină comună.
codul din spatele transformării
aici este codul JavaScript și HTML folosit pentru a crea transformarea.
<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> să luăm acele bucăți de cod pe rând, astfel încât să putem înțelege ce se întâmplă.
elementul de ancorare
prima linie de cod pe care o vedem este un element de ancorare.
<a href="home_url" onmouseover="rollover('home')" onmouseout="rollout('home')" > deoarece exemplul nostru implică conectarea unei pictograme de pornire la pagina de pornire a site-ului web, atributul href ar indica pagina noastră de pornire a site-ului web. Urmează evenimentul JavaScript onmouseover. Acesta este evenimentul care va avea loc atunci când mouse-ul trece peste elementul de ancorare. În acest caz, se numește o funcție numită rollover și afectează elementul cu numele ‘acasă’. În cele din urmă, avem evenimentul onmouseout care apelează funcția rollout, care afectează încă o dată elementul cu numele ‘acasă’.
elementul de imagine
imbricat în elementul de ancorare este elementul nostru de imagine.
<img src="../path/original_image.file" name="home" alt="Home Page"> vom folosi elementul imagine pentru a încărca imaginea care va apărea atunci când mouse-ul nu se deplasează peste elementul de ancorare. În cazul exemplului nostru, vom încărca pictograma casei gri. Apoi vine atributul name. Folosim acest atribut pentru a oferi JavaScript pentru a identifica elementul HTML pe care dorim să îl modificăm cu scriptul. Aruncați o privire rapidă înapoi la elementul de ancorare și observați cum ambele funcții utilizează parametrul ('home'). Atributul name="home" este modul în care funcțiile JavaScript identifică elementul imagine ca element care trebuie acționat.
scriptul
în cele din urmă, avem un script foarte scurt.
<script type="text/javascript"> <!-- setrollover("../path/hover_image.file"); --> </script> acest script setează o valoare pentru funcția rollover care este apelată de onmouseover declanșată atunci când mouse-ul unui vizualizator planează peste imagine.
punând totul împreună
dacă punem ancora, imaginea și scriptul împreună, iată ce obținem.
Simplificați Codul cu jQuery
jQuery este o bibliotecă JavaScript care vă permite să creați aproape orice fel de animație JavaScript sau transformare cu mai puțin cod. Dacă am vrut să folosim jQuery pentru a crea aceeași transformare, iată cum ar arăta codul.
<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> lucru frumos despre utilizarea jQuery este că nu mai trebuie să adăugați Stivuitoare eveniment la HTML în sine (amintiți-vă onmouseover și onmouseout evenimente din codul original?). Unul dintre cele mai bune lucruri despre jQuery este că se poate adăuga Stivuitoare eveniment dinamic. Acest lucru permite o separare mai mare între script și conținutul HTML și este o modalitate mai bună de codificare. După cum puteți vedea, HTML este mult mai curat dacă folosim biblioteca jQuery și rezultatul final este același.
jQuery.(‘#acasă’).hover (funcție () {$(acest).attr (‘src’, ‘ acasă168-1.png’)}, funcție () {$(acest).attr (‘src’, ‘ orange_home.png’ ) } );adăugarea jQuery la un site web
un lucru de reținut dacă decideți să utilizați acest cod pe propriul site web este că biblioteca jQuery trebuie încărcată de browser pe fiecare pagină în care este utilizat un script jQuery. JavaScript este acceptat de fiecare browser modern. Cu toate acestea, biblioteca jQuery trebuie să fie adăugate la browser-ul pentru script-uri jQuery pentru a procesa. Există două moduri de a adăuga jQuery la un site web.
- descărcați jQuery de la Fundația jQuery și încărcați-l pe serverul dvs. web.
- Link către o bibliotecă jQuery găzduită public.
cel mai simplu mod de a adăuga jQuery la un site web este să vă conectați la o bibliotecă jQuery deja găzduită pe web. Puteți încărca biblioteca jQuery găzduită de Google lipind următoarea linie de cod în elementul head al site-ului dvs. web.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
