Bonjour tout le monde,

J'ai une image découpée en plusieurs zones. Pour chacune des zones, je cherche à superposer d'autres images plus petites et un peu plus bas une zone de texte pouvant contenir des liens et des listes.
Cette superposition doit se produire lorsque la souris passe sur ces zones, rester afficher lorsque l'utilisateur clique sur une zone pour permettre de cliquer sur les liens, et disparaître lorsque l'utilisateur reclique sur cette zone.

J'ai réussi à programmer de manière à afficher les petites images lorsque la souris passe au-dessus des zones.
Malheureusement, je rencontre 2 problèmes :
1/ Tout d'abord, cette affichage n'est pas constant : à certains endroits de la zone, je n'ai plus de superposition
2/ Je n'ai pas réussi à mettre en place le code pour afficher et faire disparaître la superposition en cliquant une zone (pour l'instant, j'ai concentré mes recherches sur une zone, mais à terme toutes les zones seront concernées).

Voici le code :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
  <head>
    <meta content="text/html; charset=UTF-8" http-equiv="content-type">
    <title>Test</title>
<style type="text/css">
<!--
td,th  {font-size:12px; background:#ffe;
    border:1px solid black; margin:0px; padding2px;}
 
td.mid {background:#faf5d7; border:0px;}
 
/* style pour les bulles. Il faudra rajouter width et height */
.sbulle {position:absolute; visibility:hidden; text-align:left;}
 
-->
</style>
 
 
<!-- ================== script de bulle d aide ================== -->
 
<SCRIPT TYPE="text/java_script" >
<!--
/* Script basé sur le script "z'experts" : http://perso.wanadoo.fr/coin.des.experts/
   délivré sans aucune garanti.
   Diffusion libre, mais merci de conserver cette signature :-)  */
 
/* Attention au doctype : si vous en mettez un (c'est quand meme mieux) et
   si voulez que ca fonctionne avec IE6 il faut un HTLM 4 transitional **SANS URL**
   (cf ci-dessus), c.a.d. IE6 doit rester dans son mode "microsoft".
   Toujours à cause des bugs de IE6, n'essayez pas de permuter les
   tests sur document.all et sur document.getElementById */
 
/* Les bulles doivent avoir été préparées dans autant de calques séparés
   en position:absolute (sans qu'il soit nécessaire de préciser de top ou
   left) que l'on rendra invisible (visibility:hidden). Il est important
   d'avoir fixe la largeur et la hauteur de ces calques-bulles EN PIXELS. */
 
 /* La fonction bullepop() qui ouvre la bulle d'aide doit être appelée
    avec 4 arguments :
   - le premier est l'identificateur (ID) du calque à faire apparaitre.
   - les 2 suivants sont les coordonnées du coin haut-gauche du calque.
   - LE DERNIER EST OBLIGATOIREMENT "event" (sans les guillemets)
   c.à.d. un mot clé dujava_script.
  */
 
var bulleStyle=null;
var clic=0;
 
if (!document.layers && !document.all && !document.getElementById)
    event="chut";  //pour apaiser NN3 et autres antiquites
 
function bullepop(idd,coord_x,coord_y,evt){
 var element=null;
 var bulleWidth=200;       // largeur par défaut
 var hauteur=50;           // hauteur par défaut
 bulleStyle=null;
 
  if (document.layers) {                            // Pour les versions de Netscape >4 et <6
    bulleStyle=document.layers[idd];
  } else if (document.all) {                        // Pour les versions d'IE >4 et <5
    element=document.all[idd];
  } else if (document.getElementById) {             // Pour les versions d'IE >5 et les versions de Netscape =>6
    element=document.getElementById(idd);
  }
 
  if(element)  bulleStyle=element.style;
 
  if(bulleStyle) {
    /* tests incongrus à cause d'Opera5 */
    if(bulleStyle.width) bulleWidth = parseFloat(bulleStyle.width);
    if(bulleStyle.height) hauteur = parseFloat(bulleStyle.height);
 
    if(typeof(bulleStyle.left)=='string') {
        bulleStyle.left=coord_x+'px'; bulleStyle.top=coord_y+'px';
    } else {
        bulleStyle.left=coord_x; bulleStyle.top=coord_y; }
 
    bulleStyle.visibility="visible";
    bulleStyle.zIndex="99";
    }
}
 
function couic(){
  if(bulleStyle)  bulleStyle.visibility="hidden";
}
 
function bulleclic(idd,coord_x,coord_y,evt){
  if(clic==0) {
  bulleStyle.visibility="hidden";
  clic=1;
  } else {
  bulleStyle.visibility="visible";
  clic=0;
  }
}
 
//-->
</SCRIPT>
<!-- ================== fin du script de bulle d'aide ============== -->
  </head>
 
  <body>
  <div class="sbulle" id="catamaran_strategie" style="width:150px; height:60px;">
    <IMG SRC="img/catamaran_strategie_ON.png" ALT="image" ALIGN="LEFT" HSPACE="4">
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <p style="font-style:italic; background:#f00;">
        Cette bulle doit s'ouvrir ici
    </p>
  </div>
  <div class="sbulle" id="catamaran_portefeuille" style="width:150px; height:60px;">
    <IMG SRC="img/catamaran_portefeuille_ON.png" ALT="image" ALIGN="LEFT" HSPACE="4">
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <p style="font-style:italic; background:#f00;">
        Cette bulle doit s'ouvrir ici
    </p>
  </div>
  <div class="sbulle" id="catamaran_accompagnement" style="width:150px; height:60px;">
    <IMG SRC="img/catamaran_accompagnement_ON.png" ALT="image" ALIGN="LEFT" HSPACE="4">
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <p style="font-style:italic; background:#f00;">
        Cette bulle doit s'ouvrir ici
    </p>
  </div>
  <div class="sbulle" id="catamaran_developpement" style="width:150px; height:60px;">
    <IMG SRC="img/catamaran_developpement_ON.png" ALT="image" ALIGN="LEFT" HSPACE="4">
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <p style="font-style:italic; background:#f00;">
        Cette bulle doit s'ouvrir ici
    </p>
  </div>
 
  <div>
    <p>
        <map name="map_catamaran">
            <area alt="strategie" shape="poly" coords="267,116,381,116,366,196,301,275,187,275,249,196" nohref="nohref" onclick="bulleclic('catamaran_strategie',193,134,event)" onmouseover="bullepop('catamaran_strategie',193,134,event)" onmouseout="couic()">
            <area alt="portefeuille" shape="poly" coords="398,116,513,116,498,196,433,275,319,275,380,196" nohref="nohref" onclick="return false" onmouseover="bullepop('catamaran_portefeuille',325,134,event)" onmouseout="couic()">
            <area alt="accompagnement" shape="poly" coords="530,116,644,116,628,196,565,275,451,275,512,196" nohref="nohref" onclick="return false" onmouseover="bullepop('catamaran_accompagnement',457,134,event)" onmouseout="couic()">
            <area alt="developpement" shape="poly" coords="685,116,800,116,785,196,721,275,606,275,667,196" nohref="nohref" onclick="return false" onmouseover="bullepop('catamaran_developpement',612,134,event)" onmouseout="couic()">
        </map>
        <img src="img/catamaran.png" usemap="#map_catamaran">
    </p>
  </div>
  </body>
</html>
Quelqu'un pourrait-il m'aider à résoudre ce qui semble simple à priori très simple, mais qui pour moi est un joli casse-tête ?