Continua la raccolta di effetti in jQuery con un nuovo script che "colora" zone dell´immagine al passaggio del mouse.
RISULTATO FINALE
Ketek - Effetto hover sulle immagini
HTML
<body>
<div id="immagine_black"></div><div id="immagine_colored"></div></body>
CSS
#immagine_black,#immagine_colored{
position:absolute;
width:800px;
height:640px;
top:50%;
left:50%;
margin-left:-400px;
margin-top:-320px;
-moz-box-shadow: 0 0 20px black;-moz-border-radius: 20px;
-webkit-box-shadow:0 0 20px black;-webkit-border-radius: 2px;
box-shadow: 0 0 20px black;}
.thumb_black
{
display:inline-block;
background-image:url(ad3a6ad013f422c2241fd27800364ead_black.jpg);}
.thumb_colored
{
display:inline-block;
background-image:url(ad3a6ad013f422c2241fd27800364ead.jpg);opacity:0;
}
JQUERY
La logica del codice è la seguente: divido le due immagini, una in bianco e nero e l´altra colorata, in due griglie 4x5 impostando i giusti parametri di altezza,larghezza e posizione del background in modo da far apparire l´immagine intere. Le due immagini sono posizionate l´una sopra l´altra e quella colorata è trasparente di default: al passaggio del mouse la singola sezione della griglia sarà animata con un´ effetto di 0.2 secondi che rende opaca l´immagine. L´operazione inversa avviene all´uscita del mouse dalla sezione.
window.onload = function(){
// divido l´immagine in una griglia 4x5
row = 3; // non 4 perchè parto da 0cols = 4; // non 5 perchè parto da 0height_imm = 640;
width_imm = 800;
height = 640/4; // altezza delle sezioniwidth = 800/5; // larghezza delle sezioniback_pos_top = 0; // background position - topback_pos_left = 0; // background position - leftcols_attuale = 0; // colonna attualerow_attuale = 0; // riga attualefor (x=0;x<20;x++) // creo la griglia{
$(´#immagine_black´).append(´+width+´px;height:´+height+´px;background-position:´+back_pos_top+´px ´+back_pos_left+´px;">