Hey everybody !

Aujourd’hui, je vais vous présenter un petit script qui va nous permettre de tester les fonctions mouseover et mouseout 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 !

Résultat du script et structure Html

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>

Code Css associée

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;
}

Script jQuery avec mouseover et mouseout

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 😉 !