Dessin Javascript lié à un évènement [Résolu]

Signaler
Messages postés
15
Date d'inscription
lundi 25 juin 2007
Statut
Membre
Dernière intervention
2 septembre 2007
-
Messages postés
469
Date d'inscription
mercredi 9 janvier 2002
Statut
Membre
Dernière intervention
20 février 2017
-
Bonjour,
je suis entrain de réaliser une application dans laquelle se trouve du javascript. Je vous explique : j'ai une image de fond sur laquelle je désire afficher des rectangles  à des endroits précis sur la carte à l'aide des coordonnées x et y. J'ai trouvé une fonction javascript qui me permet de dessiner des rectangles en cliquant sur la carte. Le seul problème c'est qu'un rectangle est dessiné à chaque fois que je clique sur la carte, par exemple : si je clique 3 fois sur la carte, il y aura au final 3 rectangles dessinés mais ce que je voudrais, c'est qu'il n'y en ait qu'un seul. Ce que je veux, c'est afficher un rectangle lors d'un clic et ensuite, lorsque que je vais cliquer ailleurs, le rectangle ira s'afficher à l'autre endroit indiqué.
Merci pour votre aide.( Cela doit fonctionner sur IE version 6)

Voici le code javascript pour dessiner un rectangle (il est appelé sur un onclick de l'image de fond):

function drawRectangle(left, top, width, height) {
 if (document.createElement) {
   newdiv=document.createElement("div");
   newdiv.style.position="absolute";
   newdiv.style.left = left+"px";
   newdiv.style.top  = top+"px";
   newdiv.style.width = width+"px";
   newdiv.style.height = height+"px";
   newdiv.style.backgroundColor = 'red';
   newdiv.style.visibility = 'visible';
   newdiv.id = 'newdiv';
   newdiv.innerHTML = "real";
   document.body.appendChild(newdiv);
  newdiv.style
   }
 }

3 réponses

Messages postés
469
Date d'inscription
mercredi 9 janvier 2002
Statut
Membre
Dernière intervention
20 février 2017
5
Bonjour, pour tester l'éxistence de ta div :

function drawRectangle(left, top, width, height) {
        var newdiv=document.getElementById("newdiv");
        // si newDiv est null alors création de la div.
        if ( !newdiv ){
        /* je me demande bien pourquoi ce test si tu te limites à IE, document.createElement fonctionne sur IE, FF, Opéra ...*/
         if (document.createElement) {
           newdiv=document.createElement("div");
           newdiv.style.position="absolute";
           newdiv.style.backgroundColor = 'red';
           newdiv.style.visibility = 'visible';
           newdiv.id = 'newdiv';
           newdiv.innerHTML = "real";
           document.body.appendChild(newdiv);
        }
        }
        // positionne la div.
       newdiv.style.left = left+"px";
       newdiv.style.top  = top+"px";
       newdiv.style.width = width+"px";
       newdiv.style.height = height+"px";
}
Et voilà une seule div
[o-_-o]
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
14
B
onjour...

Suite du topic http://www.javascriptfr.com/infomsg_DESSIN-JAVASCRIPT_991536.aspx je suppose ?

Dans ta fonction il suffit de tester
SI le DIV existe
  tu le déplaces juste
SINON
  tu le crées et tu le places

;0)
Messages postés
15
Date d'inscription
lundi 25 juin 2007
Statut
Membre
Dernière intervention
2 septembre 2007

Comment tu fais pour tester l'existence du div, je veud dire tu met quoi comme condition dans le if?