onmouseOver inactif

Version imprimable

onmouseOver inactif

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:

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 :ccool:

22/11/2013, 19h11
NoSmoking

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

il y à quoi dans ta fonction affiche, si elle existe.
22/11/2013, 20h16
youlikeit
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 !!!
22/11/2013, 21h08
Zilpix

De quelle classe action parles-tu ?

Code:

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:

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 !

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:

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:

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 !

8O

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

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 ! :lefou:
Code:

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>

en faisant une rapide recherche sur ce site tu serais tombé sur
:fleche: http://www.developpez.net/forums/d96...l-area-survol/

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

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:

1 2 3 function affiche( image){ document.getElementById('regions').src= image; }
pour finalement écrire
Code:

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.