Comment éclairer une image quand on passe la souris dessus

Un des éléments d’ergonomie dans la navigation des sites webs est celui du changement de la forme du pointeur quand une action est faisable avec celui-ci. Exemple : quand vous passez la souris sur un lien, celui-ci change la souris (la flèche) en main blanche avec l’index tendu vers le haut. Pour les images cliquables, il peut être intéressant de faire le même genre de processus, mais cette fois-ci en jouant sur l’éclairage de l’image. Par exemple, on peut considérer que toutes les images sont un peu ombragées, puis quand l’utilisateur passe sa souris dessus, enlever complètement leur opacité. Pour l’utilisateur, celui-ci à l’impression d’éclairer les images en passant la souris dessus ; la navigation lui est rendue un peu plus ludique et simple.

Je vous propose dans ce billet de réaliser par vous même ce processus. Pour cela, c’est tout simple. Repérez dans vos pages un endroit où vous affichez des images cliquables (par exemple dans un carrousel de lien, comme je l’avais expliqué précédemment).

Si vous avez une image comme ceci :

<li class= »sidebarPost »>

<img src= »images/youpi.png » alt= »" title= »">

</li>

Vous devrez rajouter le code suivant dans votre CSS :

li.sidebarPost img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
}

li.sidebarPost:hover img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
}

Attention, il faut bien noter trois choses :

• Ces propriétés ne sont pas pour l’instant standardisées (et donc non supportées par le W3C).
• La propriété filter correspond aux version d’Internet Explorer à partir de la 5.5 (et l’opacité se règle de 0 à 100)
• La propriété -moz-opacity correspond à tous les autres navigateurs (Firefox, Chrome, Safari, Opera), et son opacité se règle de 0 à 1.

[Source]