Categories: GraficaProgrammazione

Effetto Rollover in Javascript e CSS

In molti siti web viene utilizzato il rollover delle immagini per avere effetti di movimento al passaggio del mouse, anche nei miei siti ne faccio uso ( vedere ad esempio il menu a sinistra del nostro sito web aziendale ), ma per questo utilizzo i CSS.
Utilizzando Javascript, per ottenere l’animazione, si cattura l’evento onMouseOver al passaggio del puntatore sopra l’area desiderata, quest’ultima viene determinata tramite l’opzione usemap del tag <img>. Vediamo un semplice esempio:

<!DOCTYPE HTML PUBLIC "-//W3C/DTD HTML 3.2 Final//EN">

<html>
<head>
<title>Bottoni animati con Javascript</title>

<script language="javascript">
   function tasto_on()
   {
      document.images[0].src = "giampy1.jpg"
   }

   function tasto_off()
   {
      document.images[0].src = "giampy2.jpg"
   }
</script>

<map name="bottone">
   <area shape="rect" coords="1,1,50,38"
      href="http://www.rgpsoft.it" alt="Fai clic per entrare"
      onMouseOver="tasto_on()" onMouseOut="tasto_off()">
</map>

</head>
</body>

<img src="giampy2.jpg" height="38" width="50"
    border="0" usemap="#bottone">

</body>
</html>

In questo esempio facciamo uso di due immagini 50×38 che saranno una per lo stato off e l’altra per lo stato on del pulsante. All’interno dell’<head> abbiamo inserito due funzioni: tasto_on() e tasto_off() che hanno il compito di modificare la proprietà src dell’oggetto document.images[0], ossia la prima immagine nel documento ( in questo caso non possiamo sbagliare ). L’attivazione delle funzioni avviene tramite la definizione dell’area attiva utilizzando una mappa sensibile che ricopre l’intera grandezza dell’immagine. Quando il puntatore passa sull’immagine, la mappa sensibile cattura l’evento onMouseOver e richiama la funzione tasto_on(), viceversa l’evento onMouseOut richiama la funzione tasto_off().
In questo esempio abbiamo utilizzato una sola immagine ed anche piccola, ma se volessimo creare dei pulsanti o altro, molto più grande e con immagini ad alte risoluzioni, avremmo certamente, anche con linee ultraveloci, un effetto di caricamento delle immagini che certamente non sarebbe bello a vedersi. Per ovviare a questo problema possiamo pre-caricare le immagini nella cache del browser utilizzando la proprietà complete dell’oggetto Image. Qust’ultima assume il valore True se il browser ha caricato correttamente l’immagine, altrimenti assume il valore False. Al nostro esempio precedente dovremmo quindi inserire questo codice prima della definizione delle due funzioni:

...
var check = 0;
var bottoni = new Array(2);

while (check < 1)
{
   bottoni[0] = new Image()
   bottoni[0].onload = check++
   bottoni[0].src = "giampy2.jpg"
   bottoni[1] = new Image()
   bottoni[1].onload = check++
   bottoni[1].src = "giampy1.jpg"
}
...

Nelle prime due righe vengono dichiarate una variabile check attribuendole il valore 0 ( zero ) iniziale ed un array di bottoni che conterrà le immagini. Attraverso un ciclo while viene controllato il caricamento delle immagini, ogni volta che la condizione di caricamento di un’immagine ( bottoni.onload ) viene verificata, il valore della variabile check viene aumentato di una unità.
Come dicevamo, personalmente per i miei menu dinamici utilizzo i CSS ed in questo caso occorre creare una sola immagine che divisa in due, dia a sinistra l’immagine di default ed a destra quella attivata, ecco il codice:

#bottone {
     display: block;
     width: 100px;
     height:38px;
     margin-left: 0;
     padding-left: 0;
     background: url("giampy2.jpg") no-repeat left top;
     color: #ffffff
}

#bottone:hover {
     display: block;
     width: 100px;
     height:38px;
     margin-left: 0;
     padding-left: 0;
     background: url("giampy1.jpg") no-repeat right top;
     color: #ffffff
}

Per avere un pulsante animato occorre solo inserire dove vogliamo un elemento della classe bottone: <div class=”bottone”>…</div> ed il gioco è fatto.