Ce tutoriel a été publié par final-blond sur SOS-Forum. Afin que les tutoriels de SOS-Forum restent en libre accès, ainsi que par respect du travail accompli, tout tutoriel copié ou s'en inspirant publié ailleurs qu'ici, devra en citer le ou les auteurs ainsi que la provenance via un lien vers ce sujet sur le SOS-Forum.

Hello,

Après une auto-prise de tête, voilà comment faire pour que le over sur une image rendue floue devienne nette, et que ça fonctionne sur les 3 navigateurs (MF, IE et Opera), exemple ICI.
(Sorry les admins et modos, vous devrez diviser ce sujet. Un sorry spécial pour Milouze et Nirupan...)

Dans le CSS :

/* TOGGLE OPACITE */

.toggleopacity {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}

.toggleopacity:hover {
filter:alpha(opacity=100);
-moz-opacity:1;
-khtml-opacity: 1;
opacity: 1;
}

.toggleopacity img{ border: 1px solid #cccccc; }
.toggleborder:hover img{ border: 1px solid navy; }

Le code d'opacité est celui de ce tuto et vous y retrouverez toutes les explications des valeurs en rouge ici de ze_chaofan.
Pour les orange, c'est à votre goût...


Pour du texte :

Code:

<span class="toggleopacity">TEXTE ICI</span>

Pour le code de l'image :

Code:

<span class="toggleopacity"><img src="URL_DE_L'IMAGE" /></span>

De manière générale :

Code:

<span class="toggleopacity">CONTENU CHANGEANT D'OPACITE</span>

EDIT : Merci Nirupan, mais pour la l'opacité des images, c'est le dernier code css qui est valable si on veut que ça fonctionne au moins sur les 3 navigateurs de base^^

C'est le même effet que ce que Nirupan avait posté => ICI ?

Oui Mario, c'est le même effet...
Et c'est involontaire, j'avais oublié celui de Nirupan.

Juste une chose, c'est que ce dernier tuto fonctionne avec les 3 navigateurs.

Merci, je l'ajoute à la liste.

final-blond a écrit:Pour le code de l'image :

Code:

<a class="toggleopacity" href="#toggle"><img src="URL_DE_L'IMAGE" alt="Titre de l'image" /></a>

Pour le texte, je cherche encore, mais si quelqu'un a une idée...

Pour le texte, c'est en fait plus compliqué...
Pour l'image y a plus simple...
Pour l'image ou dans un div ou un span :

Code:

<span class="toggleopacity"><img src="url_image" alt="Titre de l'image" /></span>

Han ! C'était même encore plus simple ! re-


Merci Ze !