Onmouseover+map+javascript? [Résolu]

Signaler
Messages postés
25
Date d'inscription
vendredi 28 mars 2008
Statut
Membre
Dernière intervention
20 avril 2009
-
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
-
Bonjour,

Voilà mon idée était de de changer une image au passage de la souris.

J'ai réalisé ceci a l'aide de la fonction onmouseover, mais j'ai
voulu rajouter sur l'image quelques liens que j'ai créé à l'aide de
MAP.

Mais j'ai un petit problème, c'est lorsque je passe la souris sur
ces liens, l'image revient à l'initial, alors qu'elle devrait rester
pareil.

En fait, cela réagit comme si la souris quitter l'image, et je ne comprends pas.

Je n'ai pas envi d'utiliser de rollover si cette solution que vous me proposez.

Voici mon code:



<map name="Map" id="Map">

[index.html

]



</map>

je crois qu'il est un peu il est un peu normal que cela réagisse comme tel, mais si quelqu'un
pouvait me guider car je pense qu'il faut utiliser du javascript pour
que lorsque la souris passe sur le lien, l'image reste pareil.

Merci pour tout éventuel réponse!

Cordialement.

28 réponses

Messages postés
25
Date d'inscription
vendredi 28 mars 2008
Statut
Membre
Dernière intervention
20 avril 2009
1
Re, j'ai trouvé ton "erreur" en essayant d'être le plus logique possible!
Comme quoi faut toujours essayer de comprendre!

En fait il fallait remplacer Onmouseout par le onMouseover:

[#
  ]

Merci pour ton code!
Désolé de pas avoir trouver le petit truc avant au lieu de poster et encore poster!

Bonne journée et je suis sûre à bientôt!Envi de m'y mettre un peu en javascript!
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
32
Bonjour,

    ajouter         onmouseout="event.cancelBubble = true;"   sur les balises area
    ( exclusif IE, si tu veux adapetr pour les autres navigateurs :   c'est expliqué ici )
   

<hr />                Cordialement            Bul         [mon Site]     [M'écrire]
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
32
euh... ça ne convient pas ce que j'ai donné
    ou tu n'arrives pas à généraliser pour tous les navigateurs ?
<hr />                Cordialement            Bul         [mon Site]     [M'écrire]

[http://bul.olympe-network.com/MAS.php [vous aussi, donnez une adresse où vous joindre, sans craindre les spams]]
Messages postés
25
Date d'inscription
vendredi 28 mars 2008
Statut
Membre
Dernière intervention
20 avril 2009
1
Désolé de ne pas t'avoir encore répondu, j'ai travaillé sur une autre page en attendant, merci pour ta réponse, je vais essayer ce que tu m'as donnée!
Merci encore à toi, je te tiens au courant!
Messages postés
25
Date d'inscription
vendredi 28 mars 2008
Statut
Membre
Dernière intervention
20 avril 2009
1
En fait, cela marchait déjà sur Internet explorer, même sans ce que tu m'as donné! par contre je ne trouves pas pour firefox avec le fichier que tu m'as passé!
Merci de ton aide en tout cas!
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
32
euh... copié/collé de l'exemple :

<script type="text/javascript">
   function noprog(col,evt)
   {  if (window.event)
             evt.cancelBubble = true;
      else evt.stopPropagation();
      alert("click sur td:"+col.innerHTML);
   }
</script>
   ----

      le onclick sur le
TR va être déclenché,
      ici par contre, le onclick
du tr est invalidé

    tu sauras adapter....

<hr />                Cordialement            Bul         [mon Site]     [M'écrire]

[vous aussi, donnez une adresse où vous joindre, sans craindre les spams]
Messages postés
25
Date d'inscription
vendredi 28 mars 2008
Statut
Membre
Dernière intervention
20 avril 2009
1
Ben dis-donc, je croyais que ça allait être plus évident que ça!
Ca n'a aucun effet, je sais pas pourquoi voilà le code (en gras ce qui est rajouté):

<script type="text/javascript">
   function noprog(col,evt)
   {  if (window.event)
             evt.cancelBubble = true;
      else evt.stopPropagation();
   }
</script>

<map name="Map" id="Map">
                [accueil.html
                <gras>]
                <gras>
                </map>

J'ai aussi essayé avec <gras>onmouseout="event.cancelBubble = true;",
mais je crois que ça sert à rien vu qu'il a le script juste au dessus.
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
32
avec IE ça baigne...
avec FF aussi, si on met un alert !

    y'a bien un pro de FF qui va passer ici et nous dire pourquoi !
    ( au pied levé, comme ça, je ne vois pas ... )

<script type="text/javascript">
   function noprog(evt)
   {  if (window.event)
                {    evt.cancelBubble=true;    }
      else     {    evt.stopPropagation();   
                    alert('attendre');
                }
   }
</script>

<map name="Map" id="Map">
    [index.html
    ]
    [#
</map>

mis des alt et "mes" images pour contrôler !

<hr />                Cordialement            Bul         []mon Site]     [M'écrire]
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
13
Bonjour,
cette solution n'est pas très élégante
mais devrait marcher...

<-- pas d'evenement sur l'image mettre sur la MAP -->

</map>

a tester quand même avec les différents navigateurs...
;O)
Messages postés
25
Date d'inscription
vendredi 28 mars 2008
Statut
Membre
Dernière intervention
20 avril 2009
1
Bon ben merci quand même pour votre coup de mains!
Mais les deux solutions que vous m'avez proposé ne marchent pas!

Peut-être qu'il ait impossible de procéder de cette manière!je ne sais pas!
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
32
setTimeOut et ça baigne

<script type="text/javascript">
   function noprog(evt)
   {  if (window.event)
                {    evt.cancelBubble=true;    }
      else     {    evt.stopPropagation();    }
   }
</script>
        onmouseout="    setTimeout('this.src=this.ex;',10);">
<map name="Map" id="Map">
    [index.html
    ]
    [#
</map>

    j'aimerais comprendre pourquoi malgré tout....
<hr />                Cordialement            Bul         []mon Site]     [M'écrire]
Messages postés
25
Date d'inscription
vendredi 28 mars 2008
Statut
Membre
Dernière intervention
20 avril 2009
1
Franchement, rien à dire, merci pour la patience que tu m'as accordé pour résoudre mon problème, je t'en suis très reconnaissant, je sais pas combien j'ai fait de forum pour avoir simplement un peu d'aide, et personne n'avait réussi!!!

Merci beaucoup pour ton aide!!

Salut l'ami!

PS: Très bon site, je le recommanderai a mon entourage!BYE
Messages postés
25
Date d'inscription
vendredi 28 mars 2008
Statut
Membre
Dernière intervention
20 avril 2009
1
C'est pas vrai sérieux, il existe toujours un problème, lorsque la souris quitte l'image, elle revient pas à l'initial!
logique en même temps avec setTimeout('this.src=this.ex;',10), il n'y a pas une fonction qui permet de dire que lorsque la souris passe sur un lien il garde une telle image, c'est à dire sur laquelle elle est finalement.

Pfiiiouuu on dirait qu'il n'y a pas de solution à ce problème!Une résolution entraîne une erreur de l'autre côté, tout le temps comme ça!!
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
32
merci du retour.
j'espère qu'on nous expliquera pourquoi, tel que c'est fait ici, ( je dois
probablement commettre une bourde ! ) un setTimeout semble nécessaire avec FF
<hr />                Cordialement            Bul         [mon Site]     [M'écrire]
http://bul.olympe-network.com/MAS.php
«
Mail
Anti-Spams
»
Laissez une adresse où vous écrire, en évitant les spams
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
32
s'il n'y a pas de solution, c'est qu'il n'y avait pas de problème ( dixit les shaddocks )


ouais, ouais.... j'avais oublié ce point !

t'as essayé ce que propose petoleTeam ( que je viens de voir, entre temps, pas testé,
    mais en général ce qu'il propose est nickel ! ) ?

sinon, faut se faire ça à la main.....
    out de l'area ==> noter "non"
    out de l'image ==>  non ? noter "oui" sinon réinitialiser le src
          probablement avec des ch'tiots timeout par ci par là
          j'ai déjà fait cela, faudrait que je refasse ou que je retrouve...

    ou annuler cancelBubble et stopPropagation();   quand il faut

<hr />                Cordialement            Bul         [mon Site]     [M'écrire]
Messages postés
25
Date d'inscription
vendredi 28 mars 2008
Statut
Membre
Dernière intervention
20 avril 2009
1
pffioouu!
me voilà rentrer dans la programmation!

Ben je vais tester ca cet aprem mais je pense pas que j'arriverai à grand chose je m'y connais pas du tout en javascript!

ca aurait été un autre langage encore, j'aurai pu me débrouiller!

Merci en tout cas!
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
32
>> je m'y connais pas du tout en javascript!
    c'est le moment de s'y mettre... c'est marrant le javascript !
>>ca aurait été un autre langage encore, j'aurai pu me débrouiller!
    ben alors ? le javascript n'étant JAMAIS obligatoire...
<hr />                Cordialement            Bul         [mon Site]     [M'écrire]
Messages postés
25
Date d'inscription
vendredi 28 mars 2008
Statut
Membre
Dernière intervention
20 avril 2009
1
D'accord je vais suivre tes précieux conseils!
Messages postés
25
Date d'inscription
vendredi 28 mars 2008
Statut
Membre
Dernière intervention
20 avril 2009
1
j'avou, j'y arrive vraiment pas, si une aide extérieure pouvait m'aider!ce serait vraiment sympas!
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
32
regarde comment/quand... sont déclenchés les évênements....

<textarea id="aff" style="width:100%;height:30%"></textarea>

<script>
    var ou=document.getElementById("aff");
</script>

<MAP NAME='cMap'>
mon Site]     [M'écrire]