JQuery : Mouseover, mouseleave & patterns

Partager cet article

Temps estimé pour la lecture de cet article : 9 min

Hey everybody !

Aujourd’hui, je vais vous présenter un petit script qui va nous permettre de tester les fonctions mouseover et mouseleave de jquery. On va appliquer cette fonction afin de réaliser une preview de pattern en direct. Par exemple, le site subtlepatterns propose ce genre de système. Voici ci-dessous un exemple de résultats possible !

black_linen blackmamba wood dark_mosaic pixel pool_table subtle_carbon

Commençons par le html, assez simple, on a une div content qui contient nos patterns, rien de plus, ce qui nous donne :

<div id="content">
<img src="img/pattern/black_linen.png" class="opacity" alt="black_linen" />
<img src="img/pattern/blackmamba.png" class="opacity" alt="blackmamba" />
<img src="img/pattern/wood.png" class="opacity" alt="wood" />
<img src="img/pattern/dark_mosaic.png" class="opacity" alt="dark_mosaic" />
<img src="img/pattern/pixel.png" class="opacity" alt="pixel" />
<img src="img/pattern/pool_table.png" class="opacity" alt="pool_table" />
<img src="img/pattern/subtle_carbon.png" class="opacity" alt="subtle_carbon" />
</div>

Ensuite, regardons le css, on centre la div principale dans la page, on applique une bordure sur les images (les fameux patterns), ici je leur applique une taille afin d’obtenir un affichage uniforme. Et on a la classe opacity qui permet d’obtenir un effet sur le hover d’un pattern.

#content {
text-align: center;
}
#content img {
border: 2px solid white;
box-shadow: 1px 1px 12px #555;
margin: 5px 0 0 2px;
width: 70px;
height: 70px;
}
.opacity {
opacity:0.4; filter: alpha(opacity = 40); 
-ms-filter: "prodig:DXImageTransform.Microsoft.Alpha(Opacity=40)";
-webkit-transition: opacity 0.4s ease-in-out; 
-moz-transition: opacity 0.4s ease-in-out; 
-o-transition: opacity 0.4s ease-in-out;
transition: opacity 0.4s ease-in-out;
}
.opacity:hover { 
opacity: 1; filter: alpha(opacity = 90); 
-ms-filter:"prodig:DXImageTransform.Microsoft.Alpha(Opacity=90)";
cursor: pointer;
}

Enfin, la dernière partie qui nous intéresse le plus : le Javascript. On récupérer la div content grâce au sélecteur $(« #content »), ici c’est le fameux argument element de la fonction background_hover(). On parcourt toutes les images de la div content. Sur ces images au hover on change le background de l’élément body du DOM et si on n’est plus au-dessus de l’image on remet le fond blanc.

$(document).ready(function() {
function background_hover(element) {
$(""+element).children("img").each(function() {
$(this).mouseover(function() {
var src = $(this).attr("src");  
document.body.style.background = "url("+src+")";                
});
$(this).mouseout(function() {
document.body.style.background = "white";
})
}); 
}  
background_hover("#content");
});

Super simple, n’est-ce pas 😉 !

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *