Une loupe pour agrandir les vignettes
Faisons apparaître une loupe au passage du curseur sur une vignette pour suggérer au visiteur d’agrandir celle-ci.
Les différentes images sont disponibles dans l’espace de téléchargement réservé à cet ouvrage.
Le fichier HTML :
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>jQuery</title>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
$("#galerie a").append("<span></span>");
$("#galerie a").hover(function(){
$(this).children("span").fadeIn(600);
},function(){
$(this).children("span").fadeOut(200);
});
});
</script>
<style>
#galerie {
width: 100%;
overflow: hidden;
}
#galerie a {
position:relative;
...