mouseover inactif sous Chrome

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu mouseover inactif sous Chrome

Message par maximumuse le Dim 5 Jan 2014 - 22:16

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   Assomé 

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é  Baston 

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  Question

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


Dernière édition par maximumuse le Lun 6 Jan 2014 - 23:56, édité 1 fois

maximumuse
****

Masculin
Messages : 223
Inscrit(e) le : 25/09/2005

http://oric-concours.forumactif.org/
maximumuse a été remercié(e) par l'auteur de ce sujet.

Résolu Re: mouseover inactif sous Chrome

Message par maximumuse le Lun 6 Jan 2014 - 22:19

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  Evil or Very Mad

maximumuse
****

Masculin
Messages : 223
Inscrit(e) le : 25/09/2005

http://oric-concours.forumactif.org/
maximumuse a été remercié(e) par l'auteur de ce sujet.

Résolu Re: mouseover inactif sous Chrome

Message par [Nihil] le Lun 6 Jan 2014 - 22:37

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 ? ^^

[Nihil]
# Tropactif #

Messages : 1155
Inscrit(e) le : 10/12/2009

http://forum.forumactif.com
[Nihil] a été remercié(e) par l'auteur de ce sujet.

Résolu Re: mouseover inactif sous Chrome

Message par maximumuse le Lun 6 Jan 2014 - 23:20

hé hé mais tu es un génie  Very Happy  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

maximumuse
****

Masculin
Messages : 223
Inscrit(e) le : 25/09/2005

http://oric-concours.forumactif.org/
maximumuse a été remercié(e) par l'auteur de ce sujet.

Résolu Re: mouseover inactif sous Chrome

Message par [Nihil] le Lun 6 Jan 2014 - 23:29

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 Wink

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;}

[Nihil]
# Tropactif #

Messages : 1155
Inscrit(e) le : 10/12/2009

http://forum.forumactif.com
[Nihil] a été remercié(e) par l'auteur de ce sujet.

Résolu Re: mouseover inactif sous Chrome

Message par maximumuse le Lun 6 Jan 2014 - 23:36

Merci je vais conserver précieusement ce tutoriel  Wink 


maximumuse
****

Masculin
Messages : 223
Inscrit(e) le : 25/09/2005

http://oric-concours.forumactif.org/
maximumuse a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum