[Résolu] Transparence variable d'une balise html lors de son survol

Bonjour,


Afin de changer au survol de souris la transparence d'une <table> j'ai placé dans la balise le code ci dessous en veillant aux spécificités d'IE et de FIREFOX

style="opacity=0.3; filter:alpha(opacity=30); -moz-opacity:0.3" onmouseover="this.style.filter='alpha(opacity=100)'"
onmouseout="this.style.filter='alpha(opacity=30)'"

Ce code donne entière satisfaction avec IE, avec FIREFOX la transparence initiale de 0.3 est correctement rendue mais rien ne se passe au survol.

J'ai donc modifié le code de la façon suivante mais sans succès, il ne passe plus rien au survol avec IE et FIREFOX

style="opacity=0.3; filter:alpha(opacity=30); -moz-opacity:0.3"
onmouseover="this.style.opacity='1.0'; this.style.filter='alpha(opacity=100)'; this.style.-moz-opacity='1.0'"
onmouseout="this.style.opacity='0.3'; this.style.filter='alpha(opacity=30)'; this.style.-moz-opacity='0.3'"

Merci par avance pour votre aide.
Modifié par mara (04 Dec 2007 - 18:24)

Bonjour,

Heu... en fait ton Javascript est un peu tout cassé je crois.

Dans le premier cas, tu ne modifies que la propriété filter lors du survol.
Dans le deuxième cas, tu modifies la valeur de filter, opacity, mais pas -moz-opacity car element.style.-moz-opacity n'existe pas. Il me semble que Firefox devrait comprendre element.style.MozOpaciy, par contre.

Mais franchement, ça fait un code un peu lourd tout ça, et ça mélange allègrement contenu et comportement.

Le plus simple serait d'avoir un script qui attribue une classe différente à l'élément lors du survol.

Tant qu'à faire, je déplace ce sujet dans le salon Javascript, vu que la partie qui pose problème c'est surtout le Javascript ici.
Modifié par Florent V. (04 Dec 2007 - 18:05)

J'ai finalement trouvé la solution (pour IE - FIREFOX - OPERA) pour faire varier au survol la transparence d'une balise html :

style="opacity=0.3; filter:alpha(opacity=30);-moz-opacity:0.3"

onmouseover="this.style.opacity=1; this.style.filter='alpha(opacity=100)'; this.style.MozOpacity=1" 

onmouseout="this.style.opacity=0.3; this.style.filter='alpha(opacity=30)'; this.style.MozOpacity=0.3"