JQuery : Exemple d’utilisation de mouseover et mouseout

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

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>

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

Laisser un commentaire

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

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.