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 ?

RomainVALERI · 24/10/2011, 10h29

Code :

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

1
2
3
/* 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 :-)  */

As-tu, dans un premier temps, demandé aux "z'experts" qui ont, il y a très longtemps, produit ce code ?

SkyCorp · 24/10/2011, 13h05

C'est pas très évident. Leur site est mort, aucun moyen de les contacter. Voici leur lien : http://coin.des.experts.pagesperso-orange.fr/index.html

NoSmoking · 24/10/2011, 19h00

Bonjour,
il serait peu être judicieux, à partir de la méthodologie, de repartir sur un script très épuré...

- document.layers
- document.all
- fonction avec des paramètres non utilisé
...

s

SkyCorp · 24/10/2011, 22h13

Bonsoir NoSmoking,

Citation:

Envoyé par NoSmoking

Bonjour,
il serait peu être judicieux, à partir de la méthodologie, de repartir sur un script très épuré...

- document.layers
- document.all
- fonction avec des paramètres non utilisé
...

s

J'ai pas mal remagné le code de départ pour l'adapter à mon besoin. Le code initial déplaçait les "bulles" avec la souris tandis que mes "bulles" restent fixes.
Mais je ne vois pas ce qui est superflu.
Tu cites document.layers et document.all, mais si je comprends bien, cela permet de faire fonctionner ce code sous différentes versions d'IE. Est-ce inutile à présent d'inclure ces versions dans mon code ?
Tu mentionnes également des paramètres non utilisés. Tu peux être plus précis ? Je suis encore loin d'être un expert du javascript, loin de là, donc je ne vois pas tout non plus, mais il me semble que tout est utilisé.

Il y a peut-être moyen de faire plus simple aussi, mais je ne sais pas trop comment.

RomainVALERI · 25/10/2011, 02h59

Ce qui est un peu décourageant, (je parle en mon nom mais j'imagine que d'autres s'y retrouvent à peu près ^^) c'est que l'ensemble est très daté, à la fois dans la syntaxe et dans la manière d'organiser le code, de désigner les éléments, etc.

Du coup, soit on t'aide à mettre des "rustines" sur les problèmes ponctuels, au prix de devoir se replonger dans les spécificités exotiques liées aux vieux navigateurs (un seul exemple : les commentaires html dans la balise script pour éviter un bug avec Netscape Navigator 1.0 si je ne m'abuse

)... soit on t'oriente vers des méthodes et des ressources plus saines (voir sources, tutoriels, etc. de developpez ou autres).

Mais je t'avoue que la seconde proposition est de plus en plus souvent mal prise par les membres, et j'insiste sur le côté constructif de la démarche que je propose : ce n'est pas une manière de dire "Va voir sur la FAQ et c'est réglé", je sais bien que ça ne résoud pas ton problème immédiat

Seulement, si tu t'en sens les épaules (ce n'est peut-être pas si méchant, selon ton contexte), apprends quelques bases et tu voleras de tes propres ailes : c'est là que notre aide sera la plus précieuse.

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

Citation:

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

Citation:

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.

SkyCorp · 27/10/2011, 16h22

Bonjour,

Je me suis basé sur tes conseils, NoSmoking.
J'ai donc modifié le code, que voici (je n'ai pas tout mis pour faciliter la lecture) :

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
<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
    var element=document.getElementById(idd);
    bulleStyle=null;
 
    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(idd){
    if(clic==0) {
        bulleStyle.visibility = "hidden";
    }
    else {
        bulleStyle.visibility = "visible";
    }
}
 
function bulleclic(idd){
    if(clic==0) {
        bulleStyle.visibility = "visible";
        clic=1;
    }
    else {
        bulleStyle.visibility = "hidden";
        clic=0;
    }
}
 
//-->
</SCRIPT>
</head>
 
 
<body>
  <div class="sbulle" id="catamaran_strategie" style="width:150px; height:60px;">
    <map name="map_catamaran_strategie">
        <area alt="strategie" shape="poly" coords="80,0,194,0,179,80,114,159,0,159,62,80" nohref="nohref" onclick="bulleclic('catamaran_strategie')" onmouseout="couic('catamaran_strategie')">
    </map>
    <img src="img/catamaran_strategie_ON.png" alt="image" align="LEFT" hspace="4" border="0" usemap="#map_catamaran_strategie">
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <p style="font-style:italic; background:#f00;">
        Cette bulle doit s'ouvrir sur la droite
    </p>
  </div>
 
  <div id="zoneimage">
    <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" onmouseover="bullepop('catamaran_strategie',191,132)">
        </map>
        <img src="img/catamaran.png" usemap="#map_catamaran">
    </p>
  </div>
</body>

Il me reste cependant un problème que je n'arrive pas encore à résoudre :
Le clic n'est pas encore optimal. Je comprends pourquoi (ma variable clic est identique pour chaque bulle), mais je n'ai pas encore trouvé le moyen de l'appliquer de manière à ce qu'un premier clic fige la bulle concernée, et un second clic sur cette même bulle la fasse disparaître, tandis qu'un second clic sur une autre bulle fait disparaitre la première bulle et fige la seconde. Peut-être qu'une nouvelle fonction doit être utilisée, mais je n'en suis pas sur et je ne vois pas trop quoi coder.

Comment pourrait-on corriger ce code pour qu'il me donne l'effet désiré ?

NoSmoking · 27/10/2011, 18h49

- tu peux passer par une variable qui stocke la bulle en cours.
- tu peux également gérer un variable d'état propre à chaque bulle

SkyCorp · 28/10/2011, 23h22

Malheureusement, mon projet vient de toucher à sa fin sans que je n'ai pu essayer.

Je laisse cette discussion ouverte au cas où quelqu'un peut me donner une solution ou si j'obtiens une petite prolongation du projet.

En tout cas, merci pour l'aide que vous m'avez donnée.

NoSmoking · 29/10/2011, 10h59

Citation:

Envoyé par SkyCorp

Malheureusement, mon projet vient de toucher à sa fin sans que je n'ai pu essayer.

Je laisse cette discussion ouverte au cas où quelqu'un peut me donner une solution ou si j'obtiens une petite prolongation du projet.

je pense que ce n'est pas une raison pour que tu cesses d'essayer, la solution n'est pas loin, tu as la solution au bout du clavier...

24/10/2011, 19h00	#4
NoSmoking Modérateur Inscription : janvier 2011 Messages : 2 944 Détails du profil Informations personnelles : Sexe : Localisation : France, Isère (Rhône Alpes) Informations forums : Inscription : janvier 2011 Messages : 2 944 Points : 4 776 Points : 4 776	Bonjour, il serait peu être judicieux, à partir de la méthodologie, de repartir sur un script très épuré... - document.layers - document.all - fonction avec des paramètres non utilisé ... s
	00

25/10/2011, 02h59	#6
RomainVALERI Expert Confirmé Sénior Romain VALERI POOête Inscription : avril 2008 Messages : 2 574 Détails du profil Informations personnelles : Nom : Romain VALERI Âge : 35 Localisation : France, Meurthe et Moselle (Lorraine) Informations professionnelles : Activité : POOête Informations forums : Inscription : avril 2008 Messages : 2 574 Points : 4 077 Points : 4 077	Ce qui est un peu décourageant, (je parle en mon nom mais j'imagine que d'autres s'y retrouvent à peu près ^^) c'est que l'ensemble est très daté, à la fois dans la syntaxe et dans la manière d'organiser le code, de désigner les éléments, etc. Du coup, soit on t'aide à mettre des "rustines" sur les problèmes ponctuels, au prix de devoir se replonger dans les spécificités exotiques liées aux vieux navigateurs (un seul exemple : les commentaires html dans la balise script pour éviter un bug avec Netscape Navigator 1.0 si je ne m'abuse )... soit on t'oriente vers des méthodes et des ressources plus saines (voir sources, tutoriels, etc. de developpez ou autres). Mais je t'avoue que la seconde proposition est de plus en plus souvent mal prise par les membres, et j'insiste sur le côté constructif de la démarche que je propose : ce n'est pas une manière de dire "Va voir sur la FAQ et c'est réglé", je sais bien que ça ne résoud pas ton problème immédiat Seulement, si tu t'en sens les épaules (ce n'est peut-être pas si méchant, selon ton contexte), apprends quelques bases et tu voleras de tes propres ailes : c'est là que notre aide sera la plus précieuse. __________________ ...pour les linguistes et les curieux >>> générateur de phrases aléatoires __________________
	00

24/10/2011, 13h05	#3
SkyCorp Membre à l'essai Inscription : août 2011 Messages : 43 Détails du profil Informations personnelles : Sexe : Localisation : France Informations forums : Inscription : août 2011 Messages : 43 Points : 22 Points : 22	C'est pas très évident. Leur site est mort, aucun moyen de les contacter. Voici leur lien : http://coin.des.experts.pagesperso-orange.fr/index.html
	00

25/10/2011, 10h15	#7
SkyCorp Membre à l'essai Inscription : août 2011 Messages : 43 Détails du profil Informations personnelles : Sexe : Localisation : France Informations forums : Inscription : août 2011 Messages : 43 Points : 22 Points : 22	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
	00

26/10/2011, 11h53	#9
SkyCorp Membre à l'essai Inscription : août 2011 Messages : 43 Détails du profil Informations personnelles : Sexe : Localisation : France Informations forums : Inscription : août 2011 Messages : 43 Points : 22 Points : 22	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.
	00

26/10/2011, 15h06	#10
SkyCorp Membre à l'essai Inscription : août 2011 Messages : 43 Détails du profil Informations personnelles : Sexe : Localisation : France Informations forums : Inscription : août 2011 Messages : 43 Points : 22 Points : 22	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
	00

27/10/2011, 18h49	#13
NoSmoking Modérateur Inscription : janvier 2011 Messages : 2 944 Détails du profil Informations personnelles : Sexe : Localisation : France, Isère (Rhône Alpes) Informations forums : Inscription : janvier 2011 Messages : 2 944 Points : 4 776 Points : 4 776	- tu peux passer par une variable qui stocke la bulle en cours. - tu peux également gérer un variable d'état propre à chaque bulle
	00

28/10/2011, 23h22	#14
SkyCorp Membre à l'essai Inscription : août 2011 Messages : 43 Détails du profil Informations personnelles : Sexe : Localisation : France Informations forums : Inscription : août 2011 Messages : 43 Points : 22 Points : 22	Malheureusement, mon projet vient de toucher à sa fin sans que je n'ai pu essayer. Je laisse cette discussion ouverte au cas où quelqu'un peut me donner une solution ou si j'obtiens une petite prolongation du projet. En tout cas, merci pour l'aide que vous m'avez donnée.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email