mouseover inactif sous Chrome

[maximumuse]

Bonjour,

On connait tous les images qui changent lorsque l'on passe dessus, c'est le code mouseover
mais sous chrome cela refuse de fonctionner, ou plutôt si je met name="poisson" cela fonctionne, mais l'éditeur le transforme en id="poisson" qui lui ne marche pas    

exemple de code qui ne marche pas

Code:

<a href="http://oric-concours.forumactif.org/forum"><img id="oric30" src="http://i73.servimg.com/u/f73/12/80/15/68/msa10.jpg" onmouseover="oric30.src='http://i73.servimg.com/u/f73/12/80/15/68/msa210.jpg'" onmouseout="oric30.src='http://i73.servimg.com/u/f73/12/80/15/68/msa10.jpg'" onmousedown="oric30.src='http://i73.servimg.com/u/f73/12/80/15/68/msa210.jpg'" /></a>

mettez name="image" à la place de id et ça fonctionne, sauf que votre éditeur me le change d'autorité   

Merci

Je précise que ce code marchait parfaitement avant cette mise à jour de l'éditeur, jetez un oeil sur le forum; certaines images fonctionnent encore, c'est l'ancien code non modifié, et celles qui refusent de fonctionner  

Autre info, sous Firefox, tout marche nickel, allez comprendre, ...

[maximumuse]

J'ai lu qqs fora et si j'ai bien compris ces fonctions tombent en désuétude pour être remplacéez par des réglages dans le CSS

Qqu'un pourrait il m'expliquer comment faire ?

J'ai 2 images de même taille, une normale et une que j'ai éclaircie, quand je survole l'image, on affiche la 2e et inversement

Pas évident de suivre ces incessantes évolutions  

[[Nihil]]

Peux tu juste essayer ce code là ?

Code:

<a href="http://oric-concours.forumactif.org/forum"><img id="oric30" src="http://i73.servimg.com/u/f73/12/80/15/68/msa10.jpg" onmouseover="this.src='http://i73.servimg.com/u/f73/12/80/15/68/msa210.jpg'" onmouseout="this.src='http://i73.servimg.com/u/f73/12/80/15/68/msa10.jpg'" onmousedown="this.src='http://i73.servimg.com/u/f73/12/80/15/68/msa210.jpg'" /></a>

---

Oui c'est faisable en CSS, mais juste une question, c'est pour mettre où ? Dans un post de sujet ? Dans un panneau d'administration ? Sur un forum où tu n'as pas accès au CSS ? ^^

[maximumuse]

hé hé mais tu es un génie    merci beaucoup, voila le code final avec 4 boutons:

Code:

<div><br />
   <table cellspacing="4" border="0"  summary="" style="margin:auto; width:800px;">
      
      <tbody>
         
         <tr>
            
            <td align="center">
                <a href="http://oric30ans.defence-force.org/"><img style="width: 300px; height: 150px;" id="oric30" onmouseout="this.src='http://www.oricgames.com/upload/edito164/Image/ORIC30.png'" onmouseover="this.src='http://www.oricgames.com/upload/edito164/Image/ORIC30-2.png'" alt="" src="http://www.oricgames.com/upload/edito164/Image/ORIC30.png" border="0" /> </a>
            </td>
            
            <td>
                <a href="http://oric-concours.forumactif.org/forum"><img style="width: 300px; height:150px;" id="Forum du Concours" onmouseout="this.src='http://www.oricgames.com/upload/edito164/Image/MSA.jpg'" onmouseover="this.src='http://www.oricgames.com/upload/edito164/Image/MSA2.jpg'" alt="" src="http://www.oricgames.com/upload/edito164/Image/MSA.jpg" border="0" /></a>
            </td>
            
            <td align="center">
                <a href="https://www.facebook.com/OricBirthday"><img style="width: 300px; height: 150px;" id="FB30" title="Page Facebook 30 ans" target="_blank" onmouseover="this.src='http://www.oricgames.com/upload/edito164/Image/FB-30-logo2.png'" onmouseout="this.src='http://www.oricgames.com/upload/edito164/Image/FB-30-logo.png'" src="http://www.oricgames.com/upload/edito164/Image/FB-30-logo.png" alt="" border="0" /></a>
            </td>
            
            <td>
                <a href="http://oric-concours.forumactif.org/t1-reglement-du-concours"><img style="width: 300px; height: 150px;" id="prize" title="Règlement du Concours" onmouseover="this.src='http://www.oricgames.com/upload/edito164/Image/Award2.jpg'" onmouseout="this.src='http://www.oricgames.com/upload/edito164/Image/Award1.jpg'" src="http://www.oricgames.com/upload/edito164/Image/Award1.jpg" alt="" border="0" /></a>
            </td>
            
         </tr>
         
      </tbody>
      
   </table>
</div>

et le forum où vous pouvez voir le résultat

Qu'est ce qui clochait dans mon code ? ce this semble miraculeux

[[Nihil]]

Alors vous pouvez faire comme j'ai fait avec à chaque fois en mettant "this". Vous pouvez alors supprimez les id, vous n'en avez plus besoin

En CSS, voici la démarche qu'il faudrait avoir :
HTML :

Code:

<a href="http://oric-concours.forumactif.org/forum" class="survol">
<img src="http://i73.servimg.com/u/f73/12/80/15/68/msa10.jpg"/>
<img src="http://i73.servimg.com/u/f73/12/80/15/68/msa210.jpg" class="hidden"/>
</a>

CSS

Code:

.survol { position: relative;}
.hidden { position: absolute; left: 0; opacity: 0;}
.survol:hover .hidden { opacity : 1;}


Il est même possible de faire un fondu, en mettant à la place du CSS ceci :

Code:

.survol { position: relative; }
.hidden { position: absolute; left: 0; opacity: 0; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease;}
.survol:hover .hidden { opacity : 1;}

[maximumuse]

Merci je vais conserver précieusement ce tutoriel