Tutorial jQuery – Effetto fade da Bianco e Nero a colori con rollover
Vediamo in questo tutorial come usufruire della libreria jquery per realizzare un rollover che faccia sì che passando il mouse su un’immagine essa cambi da bianco e nero a colori.
LA STRUTTURA HTML
Per prima cosa abbiamo bisogno della struttura all’interno della quale andremo a posizionare l’immagine con il nostro effetto.
<div id=”container”>
<div class=”foto”>
<div class=”bnthumb”><img src=”IMG_1053bw.jpg” width=”620″ height=”300″ alt=”Immagine in bianco e nero” title=”Da bianco e nero a colori – jQuery” /></div>
<div class=”colore”><img src=”IMG_1053.jpg” width=”620″ height=”300″ alt=”Immagine a colori” /></div>
</div>
<div class=”descrizione”></div>
Container sarà il contenitore di tutto il nostro effetto, all’interno di esso avremo il div foto che conterrà l’immagine, il div bnthumb dove carichiamo l’immagine in bianco e nero e il div colore dove inseriamo l’immagine a colori. Nel div descrizione invece andremo a inserire un testo descrittivo dell’immagine.
IL CODICE CSS
body {
background:#000;
margin:0;
padding:0;
color:#fff;
font-size:14px;
font-family:Arial, Helvetica, sans-serif;
text-align:center;
}
#container {
position:absolute;
width:628px;
height:400px;
margin-top:-200px;
top:50%;
margin-left:-315px;
left:50%;
}
.descrizione {
position:relative;
padding:5px 15px 5px 30px;
display:none;
background:#fff;
color:#000;
top:308px;
}
img {
display:block;
border:4px solid #fff;
}
.foto {
position:relative;
width:620px;
}
.bnthumb, .colore {
position:absolute;
top:0;
left:0;
width:620px;
height:300px;
}
.bnthumb {
z-index:2;
}
.colore {
z-index:1;
}
</style>
Del codice css voglio sottolineare l’importanza della funzione z-index che ci permette di ragionare per livelli. Quindi nonostante i div bnthumb e colore siano nella stessa posizione, uno si sovrapporrà all’altro. Comparirà il div colori solo quando si passerà sopra con il mouse grazie al jquery.
Per far funzionare la funzione z-index dovete ricordarvi di dare all’immagine una posizione absolute, relative o fixed (non statica!).
I numeri accanto la funziona z-index definiscono l’ordine, z-index 2, sarà l’immagine posta più in alto, in questo caso è assegnata al div colori.
IL CODICE JQUERY
<script>
$(document).ready(function () {
var titolo;
$(‘.bnthumb img’).hover(
function() {
$(‘.bnthumb’).stop().animate({opacity:’0′},1000);
titolo = $(this).attr(‘title’);
$(this).removeAttr(‘title’);
$(‘.descrizione’).append(“<span>”+titolo+”</span>”);
$(‘.descrizione’).fadeIn(700);
},
function() {
$(‘.bnthumb’).stop().animate({opacity:’1′},1000);
$(‘.descrizione’).fadeOut(700, function(){
$(‘.descrizione span’).remove();
});
$(this).attr(‘title’, titolo);
}
);
});
</script>
Promozioni
Potrebbe interessarti
Commenti