J’avais dit il y a déjà un petit moment que je vous expliquerez comment réaliser un effet transparency sur un mouseover, passage de la souris. Vous allez voir à quel point c’est simple et qu’il ne suffit que de 2 lignes de codes afin de réaliser cet effet de changement d’état.

Il n’est pas nécessaire d’avoir deux images, genre une avec une opacité de 100 et l’autre avec une opacité de 80. Non pas la peine, on va travailler directement sur l’image d’origine, de cette façon :

<img src="monimage.jpg" style="opacity:0.4;filter:alpha(opacity=40)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />

Regardons le code de plus près afin de vous expliquer. On dit que l’on veut commencer avec une image qui sera à 40% d’opacité : opacity:0.4;filter:alpha(opacity=40), puis au passage de la souris on passe a une opacité de 100% : this.style.opacity=1;this.filters.alpha.opacity=100 puis quand la souris ressort de l’image on repasse en opacité 40% : this.style.opacity=0.4;this.filters.alpha.opacity=40.

Vous pouvez faire comme bon vous semble dans les réglages, vous pouvez partir d’une image avec une opacité de 100% pour passer sur un effet de 40% au passage de la souris. Bref à vous de voir.

L'auteur de l'article

John's Graphisme, Directeur Artistique, Webdesigner et Graphiste Freelance. Vous pouvez voir mes travaux sur mon portfolio, ou me suivre sur mon Twitter.

Autres articles à lire absolument (si tu veux)