Discussion :

[guim06]

Bonjour à Tous,
je dispose d'un tableau et d'une carte,
la carte est une image que j'ai mappée, et chaque zone contient un onmouseover et un onmouseout qui affiche par le biais d'un popup, des données en lien avec l'emplacement.
Voici une portion de la carte :

Code :

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

1
2
3
4
5
6
<div id="panel--1">
                   <img src="images/niveau_-1.jpg" border="0" alt="Carte niveau 0 " width="505" height="589" name="niveau_-1" title="Niveau -1" usemap="#mniveau_-1" lowsrc="Niveau -1" style="position:relative" /> 
                    <map id="Map1" name="mniveau_-1">
                    <area alt="" onmouseover="return overlib('<?php  echo $tab01 ?>');" onmouseout="return nd();" shape="poly" coords="193,28,213,100,204,103,214,135,205,137,215,173,223,172,227,184,236,181,260,263,268,279,262,285,272,302,267,315,269,329,273,344,322,348,330,335,332,323,320,304,322,278,348,267,381,321,369,332,376,341,358,355,358,363,316,412,345,444,339,458,339,467,316,497,289,480,276,522,260,528,270,535,266,555,179,519,229,432,236,433,254,412,239,397,231,401,219,382,180,395,174,402,160,385,169,378,167,372,162,374,142,349,147,343,145,340,154,331,128,312,124,308,115,316,112,314,104,321,84,309,66,331,44,311,58,299,25,266,122,162,102,124,105,120,128,117,121,94,113,96,100,71,194,29" href="#" target="_top" /> 
                    </map>
            </div>

Je souhaiterai, à partir des liens compris dans mon tableau, lancer les évènements de la carte.
En gros, quand on clique sur le nom de la zone dans le tableau, le popup s'affiche sur la zone correspondante sur la carte.

Pourriez-vous m'aiguiller ?

merci

[Bovino]

Ben... lance ta fonction overlib() sur le click.

[SpaceFrog]

Un exemple
en modifiant quelque peu ton code pour les fins de la démo

Code :

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

1
2
3
4
5
6
7
<div id="panel--1">
                   <img src="images/niveau_-1.jpg" border="0" alt="Carte niveau 0 " width="505" height="589" name="niveau_-1" title="Niveau -1" usemap="#mniveau_-1" lowsrc="Niveau -1" style="position:relative" /> 
                    <map id="Map1" name="mniveau_-1">
                    <area alt="" onmouseover="alert('coucou')" onmouseout="" shape="poly" coords="193,28,213,100,204,103,214,135,205,137,215,173,223,172,227,184,236,181,260,263,268,279,262,285,272,302,267,315,269,329,273,344,322,348,330,335,332,323,320,304,322,278,348,267,381,321,369,332,376,341,358,355,358,363,316,412,345,444,339,458,339,467,316,497,289,480,276,522,260,528,270,535,266,555,179,519,229,432,236,433,254,412,239,397,231,401,219,382,180,395,174,402,160,385,169,378,167,372,162,374,142,349,147,343,145,340,154,331,128,312,124,308,115,316,112,314,104,321,84,309,66,331,44,311,58,299,25,266,122,162,102,124,105,120,128,117,121,94,113,96,100,71,194,29" href="#" target="_top" /> 
                    </map>
            </div>
<a href="#" onclick="getElementById('Map1').getElementsByTagName('area')[0].onmouseover(); return false"> ici</a>

[guim06]

@Bovino,
j'ai déjà éssayé, mais en faisant cela, le popup s'ouvre au dessus du onclick situé dans le tableau, alors que je souhaite qu'il s'ouvre au dessus du onmouseover situé sur la carte.

@SpaceFrog,
oui, c'est bien ça, maintenant, je vais essayé de l'ajuster à mon besoin car j'ai plusieurs cartes. je reviens faire un topo une fois mes tests réalisés.

Merci !

[guim06]

J'ai ajouté un id à mon area de cette manière :

Code :

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

                    <area id="area1" alt="" onmouseover="return overlib('<?php  echo $tab01 ?>');" onmouseout="return nd();" shape="poly" coords="193,28,213,100,204,103,214,135,205,137,215,173,223,172,227,184,236,181,260,263,268,279,262,285,272,302,267,315,269,329,273,344,322,348,330,335,332,323,320,304,322,278,348,267,381,321,369,332,376,341,358,355,358,363,316,412,345,444,339,458,339,467,316,497,289,480,276,522,260,528,270,535,266,555,179,519,229,432,236,433,254,412,239,397,231,401,219,382,180,395,174,402,160,385,169,378,167,372,162,374,142,349,147,343,145,340,154,331,128,312,124,308,115,316,112,314,104,321,84,309,66,331,44,311,58,299,25,266,122,162,102,124,105,120,128,117,121,94,113,96,100,71,194,29" href="#" target="_top" />

et j'ai déposé la ligne ci-dessous :

Code :

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

<a href="#" onclick="getElementById('area1').onmouseover(); return false"> ici</a>

mais l'évènement s'ouvre au dessus de "ici" au lieu de la zone area1...

je poursuis mes tentatives

[SpaceFrog]

tu vas devoir modifier l'overlib pour lui passer des coordonnées ...

[guim06]

Merci pour tout,
j'ai finalement remanier mon code.
en gros, j'ai ajouté des :

Code :

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

onmouseover="document.images['niveau_0'].src='images/niveau_0_picto1.jpg';" onmouseout="document.images['niveau_0'].src='images/niveau_0.jpg';return nd();"

pour attirer l'attention sur le repère.
Après, l'utilisateur clique sur le repère, et le contenu du onclick s'affiche.

Merci encore, ça me retire une jolie épine du pied !