In un altro tutorial abbiamo esaminato come utilizzare la proprietà CSS background-image e il selettore :hover per creare un’immagine interattiva che cambiava quando un utente spostava il mouse sull’immagine. In questo esempio, abbiamo iniziato con un’icona home grigia e l’abbiamo trasformata in un’icona arancione. 
In questo tutorial, vedremo un altro modo per realizzare la stessa cosa usando JavaScript.
Quando dovresti usare CSS vs JavaScript
CSS è il linguaggio utilizzato per definire il layout del sito web e creare semplici animazioni. JavaScript viene utilizzato per aggiungere interattività in base al feedback e all’attività degli utenti del sito web. Ci sono luoghi in cui le capacità di CSS e JavaScript si sovrappongono. Questa sovrapposizione solleva la domanda: quale dovresti usare? La risposta a questa domanda non è semplice, e molte opinioni sono state espresse sull’argomento. Alcuni dicono che dovresti usare i CSS praticamente in ogni caso e usare JavaScript solo quando nessun altro strumento può fare il lavoro. Altri offrono un argomento completamente opposto che JavaScript dovrebbe sostituire completamente i CSS. In pratica, la maggior parte degli sviluppatori usa semplicemente il linguaggio con cui hanno più familiarità, anche se non è la scelta migliore per l’attività in questione. Non abbiamo intenzione di pesare sul dibattito. Stiamo andando a farvi fare la vostra mente sulla questione e invece concentrarsi su che vi mostra come utilizzare sia CSS e JavaScript. Un precedente tutorial ha già dimostrato come realizzare questa transizione utilizzando i CSS. Si può vedere qui. Il resto di questo tutorial vi insegnerà come utilizzare JavaScript per questo compito comune.
Il codice alla base della trasformazione
Ecco il codice JavaScript e HTML utilizzati per creare la trasformazione.
<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> Prendiamo quei pezzi di codice uno alla volta in modo da poter capire cosa sta succedendo.
L’elemento di ancoraggio
La prima riga di codice che vediamo è un elemento di ancoraggio.
<a href="home_url" onmouseover="rollover('home')" onmouseout="rollout('home')" > Poiché il nostro esempio prevede il collegamento di un’icona home alla homepage del sito web, l’attributo href punterebbe alla homepage del nostro sito web. Segue l’evento JavaScript onmouseover. Questo è l’evento che si verificherà quando il mouse si libra sull’elemento di ancoraggio. In questo caso viene chiamata una funzione denominata rollover ed effettua l’elemento con il nome ‘home’. Infine, abbiamo l’evento onmouseout che chiama la funzione rollout, che colpisce ancora una volta l’elemento con il nome ‘home’.
L’elemento immagine
Annidato all’interno dell’elemento di ancoraggio è il nostro elemento immagine.
<img src="../path/original_image.file" name="home" alt="Home Page"> Useremo l’elemento immagine per caricare l’immagine che apparirà quando il mouse non passa il mouse sopra l’elemento di ancoraggio. Nel caso del nostro esempio, caricheremo l’icona della casa grigia. Segue l’attributo name. Usiamo questo attributo per dare il JavaScript via per identificare l’elemento HTML che vogliamo modificare con lo script. Dai una rapida occhiata all’elemento di ancoraggio e nota come entrambe le funzioni utilizzano il parametro ('home'). L’attributo name="home" è il modo in cui le funzioni JavaScript identificano l’elemento immagine come elemento su cui agire.
Lo Script
Infine, abbiamo uno script molto breve.
<script type="text/javascript"> <!-- setrollover("../path/hover_image.file"); --> </script> Questo script imposta un valore per la funzione rollover che viene chiamata da onmouseover attivata quando il mouse di un visualizzatore passa sopra l’immagine.
Mettere tutto insieme
Se mettiamo l’ancora, l’immagine e lo script tutti insieme ecco cosa otteniamo.
Semplifica il codice con jQuery
jQuery è una libreria JavaScript che consente di creare qualsiasi tipo di animazione JavaScript o trasformazione con meno codice. Se volessimo usare jQuery per creare la stessa trasformazione, ecco come sarebbe il codice.
<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> La cosa bella dell’uso di jQuery è che non dobbiamo più aggiungere gestori di eventi all’HTML stesso (ricorda gli eventi onmouseover e onmouseout dal codice originale?). Una delle cose migliori di jQuery è che può aggiungere dinamicamente i gestori di eventi. Ciò consente una maggiore separazione tra lo script e il contenuto HTML ed è un modo migliore di codificare. Come puoi vedere, l’HTML è molto più pulito se usiamo la libreria jQuery e il risultato finale è lo stesso.
jQuery.(‘#home’).hover (funzione () {this (questo).attr (‘src’, ‘ home168-1.png’)}, function () {this (questo).attr (‘src’, ‘ orange_home.png’ ) } );Aggiunta di jQuery a un sito Web
Una cosa da tenere a mente se si decide di utilizzare questo codice sul proprio sito Web è che la libreria jQuery deve essere caricata dal browser su ogni pagina in cui viene utilizzato uno script jQuery. JavaScript è supportato da tutti i browser moderni. Tuttavia, la libreria jQuery deve essere aggiunto al browser in modo che gli script jQuery per elaborare. Ci sono due modi per aggiungere jQuery a un sito web.
- Scarica jQuery dalla jQuery Foundation e caricalo sul tuo server web.
- Collegamento a una libreria jQuery ospitata pubblicamente.
Il modo più semplice per aggiungere jQuery a un sito web è quello di collegarsi a una libreria jQuery già ospitata sul web. Puoi caricare la libreria jQuery ospitata da Google incollando la seguente riga di codice nell’elemento head del tuo sito web.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
