Activer le onmouseover d'un lien à partir d'un onclick déposé dans un autre lien

Version imprimable

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:

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

25/05/2012, 10h15
Bovino

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

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

Code:

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>

25/05/2012, 10h31
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 !
25/05/2012, 10h38
guim06

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

Code:

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

<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
25/05/2012, 10h40
SpaceFrog

tu vas devoir modifier l'overlib pour lui passer des coordonnées ...
28/05/2012, 11h45
guim06

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

Code:

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 !