Desactiver la selection d'un texte (sans utiliser onselectstart)

Résolu

gzu51 Messages postés 2 Date d'inscription mardi 28 mars 2006 Statut Membre Dernière intervention 17 août 2006 - 9 août 2006 à 18:05
gzu51 Messages postés 2 Date d'inscription mardi 28 mars 2006 Statut Membre Dernière intervention 17 août 2006 - 17 août 2006 à 14:18

Bonjour à tous.

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

La methode utilisant onselectctart me permet d'empecher la selection mais pas la transformation du curseur, mon div ne reagit donc toujours pas aux evenements souris.

Voici un exemple de code illustrant mon probleme :

<html>
 <head>
  <title>createLinearGradient() basic test</title>
  
 </head>
 
  <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>
 
</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.

2 réponses

Réponse 1 / 2

PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 17
17 août 2006 à 12:37

B

onjour...
pour que le DIV du dessus masque le DIV du dessous il faut qu'il couvre réellement le DIV du dessous, ce qui n'est pas le cas car il n'y a rien dans ce DIV...

Essaies ceci...

<html>
<head>
<title>createLinearGradient() basic test</title>
</head>

<script>
   var mondiv1 = document.createElement("div");
   mondiv1.getAttribute("style").setAttribute("position", "absolute");
   mondiv1.getAttribute("style").setAttribute("backgroundColor", "#0000ff");
   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.innerHTML= "Mon Texte";
   document.body.appendChild(mondiv1);

   var mondiv2 = document.createElement("div");
   mondiv2.getAttribute("style").setAttribute("position", "absolute");
   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");
   mondiv2.innerHTML= " 
";
   document.body.appendChild(mondiv2);
</script>

</html>

Je te laisses découvrir les modifs....

d'autre part si le script est directement dans le BODY pourquoi ne pas créer les DIVs directement

Mon Texte

;0)

Réponse 2 / 2

gzu51 Messages postés 2 Date d'inscription mardi 28 mars 2006 Statut Membre Dernière intervention 17 août 2006
17 août 2006 à 14:18

Merci de ta reponse, elle fonctionne tres bien.

J'ai trouvé une autre solution qui marche aussi (avec un gif transparent) :

<html>
<head>
<title>test</title>
</head>

<script>
   var str="Mon texte";
   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 "+str);}
   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>

</html>

Votre réponse