desactiver la selection d'un texte (mais pas par onselectstart)

Version imprimable

Bon alors voila j'ai un problème sur lequel je me casse les dents :

Tout d'abord resumons la situation : j'ai 2 div, le premier contient du texte et est transparent (il ne sert qu'a afficher le texte), le deuxieme est vide et transparent (il me sert a créer une zone sensible et/ou a afficher des tooltips).

Ces deux div sont superposé en respectant bien le zIndex (le texte dessous et la zones sensible dessus) et tout se passe bien sauf que quand je passe ma souris sur le texte le curseur se transforme alors en curseur de selection et le div du dessus ne reagit plus aux clics...

Voici un exemple de code illustrant mon probleme :
Code:

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 <html> <head> <title>createLinearGradient() basic test</title> </head> <body> <script> var txt = document.createTextNode("Mon texte"); var mondiv1 = document.createElement("div"); mondiv1.getAttribute("style").setAttribute("position", "absolute"); mondiv1.getAttribute("style").setAttribute("background", "transparent"); mondiv1.getAttribute("style").setAttribute("left", "0px"); mondiv1.getAttribute("style").setAttribute("top", "0px"); mondiv1.getAttribute("style").setAttribute("width", "80px"); mondiv1.getAttribute("style").setAttribute("height", "15px"); mondiv1.getAttribute("style").setAttribute("zIndex",1); mondiv1.appendChild(txt); document.body.appendChild(mondiv1); var mondiv2 = document.createElement("div"); mondiv2.getAttribute("style").setAttribute("left", "0px"); mondiv2.getAttribute("style").setAttribute("top", "0px"); mondiv2.getAttribute("style").setAttribute("width", "150px"); mondiv2.getAttribute("style").setAttribute("height", "40px"); mondiv2.getAttribute("style").setAttribute("zIndex",2); mondiv2.getAttribute("style").setAttribute("cursor","pointer"); mondiv2.setAttribute("title","Mon tooltip"); document.body.appendChild(mondiv2); </script> </body> </html>
Je me permet de repondre par anticipation a ceux qui dirons qu'il suffit de mettre mon tooltips et ma zone sensible sur le meme div que le texte : j'ai besoin de pouvoir les positionner independament l'un de l'autre et mes zones sensibles ne sont pas toujours sur du texte.

Donc voila, existe-t-il un moyen de virer ce curseur de selection ? ou de rendre mon div du dessous (ou mon texte) insensibles aux evenements souris ?

Merci d'avance pour votre aide.

09/08/2006, 20h09
FremyCompany
Qqchose dans ce gout la :
Code:

1 2 3 4 5 6 7 div.style.cursor="default"; div.onselectstart=function() { return false; } div.onmousedown=function() { return false; }
Ou aussi :
ajouter un image transparente (gif) qui fasse la taille de la div du dessus et la recouvre entièrement, son zIndex doit etre prioritaire, c'est elle qui gère le onclick...

Tout d'abord, merci de t'etre penché sur mon probleme.

J'avais deja essayer la première méthode que tu me donnes, je l'ai quand meme retestée par acquis de conscience :

Code:

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
<html>
 <head>
  <title>test</title> 
 </head>
 <body>
  <script>
 
   var txt = document.createTextNode("Mon texte");
   var mondiv1 = document.createElement("div");
   mondiv1.getAttribute("style").setAttribute("position", "absolute");
   mondiv1.getAttribute("style").setAttribute("background", "blue");
   mondiv1.getAttribute("style").setAttribute("left", "0px");
   mondiv1.getAttribute("style").setAttribute("top", "0px");
   mondiv1.getAttribute("style").setAttribute("width", "80px");
   mondiv1.getAttribute("style").setAttribute("height", "15px");
   mondiv1.getAttribute("style").setAttribute("zIndex",1);
   mondiv1.style.cursor="default";
   mondiv1.onselectstart=function() {
    return false;
   }
   mondiv1.onmousedown=function() {
    return false;
   }
   mondiv1.appendChild(txt);
   document.body.appendChild(mondiv1);
 
   var mondiv2 = document.createElement("div");
   mondiv2.onclick=function(){alert("ca marche");}
   mondiv2.getAttribute("style").setAttribute("position", "absolute");
   mondiv2.getAttribute("style").setAttribute("background", "transparent");
   mondiv2.getAttribute("style").setAttribute("left", "0px");
   mondiv2.getAttribute("style").setAttribute("top", "0px");
   mondiv2.getAttribute("style").setAttribute("width", "200px");
   mondiv2.getAttribute("style").setAttribute("height", "100px");
   mondiv2.getAttribute("style").setAttribute("zIndex",2);
   mondiv2.setAttribute("title","Mon tooltip");
   document.body.appendChild(mondiv2);
  </script>
 </body>
</html>

Cela permet bien de désactiver la selection et de transformer le curseur mais un click sur le texte ne declanche toujours pas l'evenement onclick du deuxieme div...

Par contre je n'avais pas pensé au coup de l'image transparente par dessus et ca marche nickel !!!!!

Ci-après le code avec l'image transparente par dessus... qui marche !!

Code:

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
<html>
 <head>
  <title>test</title> 
 </head>
 <body>
  <script>
 
   var txt = document.createTextNode("Mon texte");
   var mondiv1 = document.createElement("div");
   mondiv1.getAttribute("style").setAttribute("position", "absolute");
   mondiv1.getAttribute("style").setAttribute("background", "transparent");
   mondiv1.getAttribute("style").setAttribute("left", "0px");
   mondiv1.getAttribute("style").setAttribute("top", "0px");
   mondiv1.getAttribute("style").setAttribute("width", "80px");
   mondiv1.getAttribute("style").setAttribute("height", "15px");
   mondiv1.getAttribute("style").setAttribute("zIndex",1);
   mondiv1.appendChild(txt);
   document.body.appendChild(mondiv1);
 
   var mondiv2 = document.createElement("img");
   mondiv2.src="tr.gif";
   mondiv2.onclick=function(){alert("ca marche");}
   mondiv2.getAttribute("style").setAttribute("position", "absolute");
   mondiv2.getAttribute("style").setAttribute("left", "0px");
   mondiv2.getAttribute("style").setAttribute("top", "0px");
   mondiv2.getAttribute("style").setAttribute("width", "200px");
   mondiv2.getAttribute("style").setAttribute("height", "100px");
   mondiv2.getAttribute("style").setAttribute("zIndex",2);
   mondiv2.setAttribute("title","Mon tooltip");
   document.body.appendChild(mondiv2);
  </script>
 </body>
</html>

Un grand merci à toi Fremy !!

10/08/2006, 12h01
FremyCompany

De rien,

bonne continuation