onmouseOver inactif

**youlikeit** · 22/11/2013, 18h51

C'est si simple pour certains, mais personnellement je n'arrive pas à savoir pourquoi ce code la ne fonctionne pas dans ma page (ie) !

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<div>
<img src="images/france/carte_france_base.png" width="492" height="533" usemap="#map"/>
<map name="map">
<area title="Alsace" onmouseover="affiche('images/france/carte_france_1.png')" onmouseout="affiche('images/france/carte_france_base.png')" width="492" height="533" href="#" shape="poly" coords="383,88,381,92,372,93,367,89,361,92,364,98,369,99,371,108,365,114,370,124,362,146,370,149,366,154,369,161,378,162,385,157,381,151,385,122,397,96,397,89,385,87" alt="Alsace"/>
</map>
</div>

Si vous avez une petite idée

**NoSmoking** · 22/11/2013, 19h11

Bonjour,
Pourquoi mettre un name map, cela peut prêter à confusion.

il y à quoi dans ta fonction affiche, si elle existe.

**youlikeit** · 22/11/2013, 20h16

C'est bien là que le bas blesse !

J'ai bien cherché sur moult sites et sur des bouquins, je n'ai pas trouvé les syntaxes de la classe "action" style :

affiche
affiche_image
src
etc...

rien de bien précis !!!

**Zilpix** · 22/11/2013, 21h08

De quelle classe action parles-tu ?

**youlikeit** · 23/11/2013, 00h23

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<img onmouseover="this.src='http://etc.jpg'" onmouseout="this.src='http://etc2.jpg'" alt="Retour à l'accueil" src="http://etc.jpg">

par exemple là c'est le "this.src..."

ou encore écrit comme cela:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
 <area onmouseover="ShowPic(this.href)" href="badkamer3.jpg" alt="Badkamer" shape="rect" coords="64, 15, 127, 70">
 <area onmouseover="ShowPic(this.href)" href="trap3.jpg" alt="Trap" shape="rect" coords="132, 14, 185, 39">
 <area onmouseover="ShowPic(this.href)" href="overloop3.jpg" alt="Overloop" shape="rect" coords="131, 44, 185, 72">

et ici showpic, j'avoue je comprends pas !

**youlikeit** · 23/11/2013, 09h26

En fait, mon problème réside dans la coexistence du "map/area" et du "onmouseover/onmouseout"

Dans la ligne suivante en tatonnant avec les codes html ou java > j'arrive à utiliser la fonction onmouse over/out :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<body>
        <img title="Alsace" src="images/france/carte_france_base.png" alt="Image" onmouseover="javascript:this.src='images/france/carte_france_1.png';" onmouseout="javascript:this.src='images/france/carte_france_base.png';" />
    </body>

Dès que je l'introduit avec le map/area comme ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
<div>
<img src="images/france/carte_france_base.png" width="492" height="533" usemap="#carte"/>
<map name="carte">
<area title="Alsace" href="#" shape="poly" coords="383,88,381,92,372,93,367,89,361,92,364,98,369,99,371,108,365,114,370,124,362,146,370,149,366,154,369,161,378,162,385,157,381,151,385,122,397,96,397,89,385,87" onmouseover="javascript:this.src='images/france/carte_france_1.png';" onmouseout="javascript:this.src='images/france/carte_france_base.png';"alt="Alsace"/>
 
<!--Ou encore-->
 
<area shape="poly" title="Alsace" coords="383,88,381,92,372,93,367,89,361,92,364,98,369,99,371,108,365,114,370,124,362,146,370,149,366,154,369,161,378,162,385,157,381,151,385,122,397,96,397,89,385,87" href="#" onmouseover="change_image('images/france/carte_france_1.png')" onmouseout="hide_image('images/france/carte_france_base.png')" alt="Alsace"/>
 
</map>
</div>

j'affiche la carte de base
le poly fonctionne correctement
le title lui aussi
le onmouse over/out > pas du tout

Il y a bien un bugg, mais lequel et où ?
Merci d'avance pour vos avis éclairés !

**youlikeit** · 23/11/2013, 12h18

Bon ne vous embrouillez pas les Neurones !! j'ai trouvé

pour les novices comme moi cela peut intéresser il s'agissait de donner une id et d'utiliser getElementById, 8 heures de surf pour trouver finalement cela dans une page perdue d'un bouquin sur le xhtml datant de 2006 recommandé par le site sur lequel nous sommes, et acheté par erreur récemment (2013) à un prix d'or ! Comme quoi !

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
<div>
<img id="regions" src="images/france/carte_france_base.png" width="492" height="533" usemap="#carte"/>
<map name="carte">
<area title="Alsace" shape="poly"  coords="383,88,381,92,372,93,367,89,361,92,364,98,369,99,371,108,365,114,370,124,362,146,370,149,366,154,369,161,378,162,385,157,381,151,385,122,397,96,397,89,385,87" href="#" onmouseover="getElementById('regions').src='images/france/carte_france_1.png'" onmouseout="getElementById('regions').src='images/france/carte_france_base.png'" alt="Alsace"/>
 
</map>
</div>

**NoSmoking** · 23/11/2013, 14h07

en faisant une rapide recherche sur ce site tu serais tombé sur

http://www.developpez.net/forums/d96...l-area-survol/

Petite remarque, bien que cela soit implicite il vaut mieux écrire

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<area title="Alsace"
  shape="poly"
  coords="383,88,381,92,372,93,367,89,361,92,364,98,369,99,371,108,365,114,370,124,362,146,370,149,366,154,369,161,378,162,385,157,381,151,385,122,397,96,397,89,385,87"
  href="#"
  onmouseover="document.getElementById('regions').src='images/france/carte_france_1.png'"
  onmouseout ="document.getElementById('regions').src='images/france/carte_france_base.png'"
  alt="Alsace"
/>

l'indentation n'est là que pour la lisibilité, je parlais d'ajouter document devant getElementById.

On voit que ta fonction affiche pourrait ressembler à cela

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
function affiche( image){
  document.getElementById('regions').src= image;
}

pour finalement écrire

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<area title="Alsace"
  shape="poly"
  coords="383,88,381,92,372,93,367,89,361,92,364,98,369,99,371,108,365,114,370,124,362,146,370,149,366,154,369,161,378,162,385,157,381,151,385,122,397,96,397,89,385,87"
  href="#"
  onmouseover="affiche('images/france/carte_france_1.png')"
  onmouseout ="affiche('images/france/carte_france_base.png')"
  alt="Alsace"
/>

c'est encore simplifiable...

Lit le lien fourni il devrait t'aider à mieux comprendre.

onmouseOver inactif

HTML

Discussions similaires

Partager

Partager