[DOM] dessiner un point

Version imprimable

07/06/2007, 18h32
maoboy

[DOM] dessiner un point

Bonjour,

je voulais savoir si vous connaissez une méthode pour dessiner un pointeur (un carré de 5 pixels de coté par exemple) à l endroit où je clique sur une image.

Merci, @+
07/06/2007, 19h03
LEK

Tu peux placer un div aux coordonées adéquates avec un zIndex supérieur à celui du calque contenant l'image de fond.
07/06/2007, 19h14
Auteur

par contre pour connaître la position de la souris dans une page c'est toute une histoire :aie:
http://www.developpez.net/forums/sho...d.php?t=316503

Merci pour vos réponses.

Pour l'instant j'arrive à récupérer la position de la souris, mais je n'arrive pas à faire apparaitre le DIV.

Mais je ne sais pas si comme ça je peux faire apparaitre plusieur div sur une meme image ?

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
 
<SCRIPT language="JavaScript">
 
     function detectMouse(e){
 
     var x =0;
     var y =0;
              if(parseInt(navigator.appVersion) >=4){
                 if(navigator.appName == 'Netscape'){
                     x = e.pageX ;
                     y = e.pageY;
                 }
                 else{
                     x = event.x ;
                     y = event.y;
                 }
 
             }
 
             document.getElementById('zone').value = x;
             document.getElementById('zone1').value = y;
             <div style="font-size:1px; width:3px; heigth:3px; background-color:#0000FF; position:absolute; top:'+(y-1)+'px; left:'+(x-1)+'px; ">&nbsp;</div>
 
 
    }
 
    </SCRIPT>

pour créer un élement, il faut passer par des fonctions du DOM :

remplace

Code:

1
2
 
<div style="font-size:1px; width:3px; heigth:3px; background-color:#0000FF; position:absolute; top:'+(y-1)+'px; left:'+(x-1)+'px; ">&nbsp;</div>

par :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
//creation du div
var monDiv = document.createElement("div");
 
//definition du style 
monDiv.style.fontSize = "1px";
monDiv.style.width = "3px";
monDiv.style.height = "3px";
monDiv.style.backgroundColor = "#0000FF";
monDiv.style.position = "absolute";
monDiv.style.top = parseInt(y-1)+"px";
monDiv.style.left = parseInt(x-1)+"px";
monDiv.style.zIndex = "100";
 
//contenu du div
monDiv.innerHTML = "&nbsp;";
 
//ajout du div dans le document
document.body.appendChild(monDiv);

07/06/2007, 23h12
maoboy

Grand merci, je ne trouvais pas le moyen de le faire.

Ça fonctionne nickel !!

Encore merci de m'avoir répondu à cette heure ci. :king: