onclick, onmouseover, etc.

**SkyCorp** · 21/10/2011, 21h43

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 ?

**SkyCorp** · 25/10/2011, 10h15

Je voudrai bien reprendre les bases du javascript, que je n'ai fait qu'apprendre petit bout par petit bout en fonction de mes besoins. Mais malheureusement il s'agit ici d'un point mineur à un projet professionnel (la construction d'un site intranet sous Sharepoint) auquel on ne m'a pas accordé beaucoup de temps (j'ai déjà du mal à me dépatouiller avec Sharepoint). J'accorderai plus de temps à ma formation Javascript un peu plus tard.

Tout ce que je connais, c'est la fonctionnalité map - area que j'avais déjà utilisée avec succès auparavant. Je sais également que les tag onclick, onmouseover et onmouseout sont certainement à utiliser. J'étais donc parti de là pour mes recherches : voir comment afficher une zone de texte au passage ou au clic de la souris sur un area, et j'étais tombé sur ce vieux code. Mais ça ne donne rien de très concluant.

Quelqu'un aurait-il une solution plus rapide que se plonger dans la FAQ ou un tutorial pour ce point particulier ? Si oui, je vous en serai infiniement reconnaissant

**NoSmoking** · 25/10/2011, 20h20

Envoyé par SkyCorp

Quelqu'un aurait-il une solution plus rapide que se plonger dans la FAQ ou un tutorial pour ce point particulier ? Si oui, je vous en serai infiniement reconnaissant

ce qui paraît le plus lent est souvent le plus rapide...

voila déjà ton script allégé, sans garantie de fonctionnement comme tu l'entends

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
<script type="text/javascript">
var bulleStyle=null;
var clic=0;
function bullepop( idd, coord_x, coord_y){
  var element=null;
  var bulleWidth=200;       // largeur par défaut
  var hauteur=50;           // hauteur par défaut
  bulleStyle=null;
  var element=document.getElementById(idd);
  if(element){
    bulleStyle = element.style;
    /* tests incongrus à cause d'Opera5 */
    if( bulleStyle.width)
      bulleWidth = parseInt( bulleStyle.width, 10);
    if( bulleStyle.height)
      hauteur = parseInt( bulleStyle.height, 10);
 
    bulleStyle.left = coord_x +'px';
    bulleStyle.top  = coord_y +'px';
 
    bulleStyle.visibility = "visible";
    bulleStyle.zIndex = "99";
  }
}
 
function couic(){ // j'adore les nom champetre de certaines fonction
  bulleStyle.visibility = "hidden";
}
 
function bulleclic( idd){
  if( clic==0) {
    bulleStyle.visibility = "hidden";
    clic=1;
  }
  else {
    bulleStyle.visibility = "visible";
    clic=0;
  }
}
</script>

une remarque toutefois, si tu cliques pour laisser l'image afficher, elle s'effacera sur le mouseover, donc à prendre en compte également.

**SkyCorp** · 26/10/2011, 11h53

Merci pour ton aide. J'ai vu que le code a été pas mal simplifié et que le paramètre event a été supprimé.

Je viens d'essayer. Pas de bug supplémentaire, mais malheureusement ça ne change absolument rien. J'ai toujours le même effet, qui ressemble presque à un effet de scintillement lorsque ma souris se déplace sur les area (apparition de l'image sur une toute petite zone de l'area, puis disparition sur la zone voisine, puis réapparition...)

J'ai peut-être un élément d'explication :
Je souhaite entre autre superposer une petite image B avec une <area> de ma grande image A, de telle sorte à afficher l'image B lorsque ma souris passe sur cette <area> ou lorsque je clique dessus. Cette <area> a donc la même géométrie que mon image B.
Se pourrait-il que cet effet se produise à cause de cette superposition ? Que lorsque ma souris est sur l'<area>, je pointe alors l'image B uniquement et non plus l'<area>, et donc mon image B disparait dès que je déplace ma souris ?

Edit :
Je confirme en tout cas que ce phénomène disparait si mes images ne se superposent pas avec les <area>. Dès qu'il y a un décallage entre une <area> et la petite image à faire apparaître au passage de la souris sur le <area>, cette image ne disparait pas tant que je reste sur l'<area>.
Il reste à trouver un moyen de conserver cette image affichée. Peut-être en utilisant une variable qui change si ma souris quitte ou entre dans une <area>

En revanche, comme tu l'as annoncé NoSmoking, la fonction bulleclic ne permet pas pour l'instant de conserver l'affichage si ma souris sort d'une <area>.

Je vais faire 2-3 tentatives pour voir si je peux résoudre ces 2 problèmes.

**SkyCorp** · 26/10/2011, 15h06

Peu de succès dans mes tentatives de résolution. Si quelqu'un a une piste pour résoudre ces problèmes, je suis preneur

**NoSmoking** · 26/10/2011, 19h36

J'ai toujours le même effet, qui ressemble presque à un effet de scintillement lorsque ma souris se déplace sur les area (apparition de l'image sur une toute petite zone de l'area, puis disparition sur la zone voisine, puis réapparition...)

ce comportement est normal...
lorsque tu passes dans la zone active de la map, l'événement mouseover se déclenche entrainant l'apparition de l'image, qui du coup masque la zone active de la map et déclenche le mouseout faisant disparaît l'image...et ainsi de suite.

Une solution est de supprimer le onmouseout de la map et de le mettre sur l'image qui apparaît, mais si il s'agit d'un découpage il te faudra utiliser également une map pour celle ci. Ceci étant valable si il y a chevauchement parfait des images.

Concernant le clic, comme l'image apparaissant est dessus l'image de dessous (

) cette dernière ne reçoit pas l'événement. Il te faut donc également transférer la gestion sur l'image qui apparaît.

onclick, onmouseover, etc.

JavaScript

Vue hybride

Discussions similaires

Partager

Partager