Discussion :

[r0d]

bonjour à tous,

J'ai un site avec une image de fond. Je veux dessiner des droites dessus. Et je voudrais que ces droites:
1/ changent de couleur quand le curseur de la souris passe dessus
2/ soient "cliquables", c'est à dire qu'une fonction javascript soit appelée quand l'utilisateur clique dessus.

Je ne peux utiliser que du html, du javascript et du php. Comment faire?

Par avance, merci.

[doof]

Salut,

J'ai un site avec une image de fond. Je veux dessiner des droites dessus.

Alors déjà, il faut faire une zone "sensible" (l'aire de dessin) aux clicks de souris, donc y attacher des evenements onmousedown et onmouseup et reperer constament les coordonnées de la souris bien sur. A partir de là, au moindre signal onmousedown, tu crée un div de 1*1 a l'emplacement de la souris, puis au deplacement, tu le redimentionne constament.

Et je voudrais que ces droites:
1/ changent de couleur quand le curseur de la souris passe dessus
2/ soient "cliquables", c'est à dire qu'une fonction javascript soit appelée quand l'utilisateur clique dessus.

des qu'un signal onmouseup est recu, tu ajoute des guetteurs d'evenement sur les objets créés : 1 onmouseover en attachant une fonction qui le change de couleur et 1 onmousedown qui appelle une fonction que tu veux...

Le principe est là, il faut bien veiller a nommer differement chaque div créé, et aussi savoir que 1px pour un div sous IE c'est impossible mais ca se patche avec la propriété css clip.

voilà voilà, je te dis tout ca puisque j'ai déjà fait un truc similaire (avec déplacement, magnetisme, redimentionnement, boites...)

[r0d]

ouch, ya du boulot!! Je pensais que ce serais plus simple, mais soit! Au boulot , et avant tout

Alors déjà, il faut faire une zone "sensible" (l'aire de dessin) aux clicks de souris, donc y attacher des evenements onmousedown et onmouseup et reperer constament les coordonnées de la souris bien sur. A partir de là, au moindre signal onmousedown, tu crée un div de 1*1 a l'emplacement de la souris, puis au deplacement, tu le redimentionne constament.

en fait, mes droites doivent être générées par une fonction (javascript ou php) en fonction d'une base de donnée. Ce n'est pas l'utilisateur qui doit créer ces droites.

des qu'un signal onmouseup est recu, tu ajoute des guetteurs d'evenement sur les objets créés : 1 onmouseover en attachant une fonction qui le change de couleur et 1 onmousedown qui appelle une fonction que tu veux...

tu veux dire qu'on peut créer un div sensible à la souris? Un truc comme:

Code :

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

<div onMouseOver="javascript&#58;mafonctionMouseOver" onClick="javascript&#58;mafonctionOnClick">

c'est possible?

1px pour un div sous IE c'est impossible mais ca se patche avec la propriété css clip.

euh, je comprends rien là Qu'entends-tu par "ça se patche", et qu'est-ce que la propriété css clip? (je l'avais dit, je suis nul en dev web )

[doof]

Si tu n'a pas a dessiner a la main, ca sera tout de suite bien plus simple.

Oui, on peut creer un div (ou tout element html) et y attacher des evenements, il y a plusieurs facons de le faire, perso j'utilise le modele dom :

Code :

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

element.addEventListener("mouseover", tafonction, false);

bien sur, IE ne le comprends pas, il faut faire :

Code :

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

element.attachEvent("onmouseover", tafonction);

Et donc reconaitre avant tout IE.
Bien sur, on peut meme attacher plusieurs evenements sur un objet.

Pour l'histoire de 1px, j'ai jammais reussit a faire un div d'1px de hauteur sous IE, le minimum étant 2. La propriété clip permet de cacher une partie d'un objet, je crée donc un "cache" qui masque le pixel en trop.


Par contre, comptes-tu creer des lignes diagonales ? dans ce cas galere galere, ca revient a creer chaque point avec un div équivalent et donc calculer leur position, sans compter la gestion d'evenement presque impossible... Il existe une librairie pour creer des lignes horizontales (entre autres) : http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm

[r0d]

erf, oui j'ai besoin de faire des diagonales...

est-ce qu'on peut superposer des div? Si c'est possible, je crée un div pour chaque ligne, la ligne étant la diagonale du div. Quand on clique sur un div, je récupère les coordonnées du curseur. Je peux donc avoir plusieurs div qui sont cliqués en même temps. Il me reste à calculer lequel est le bon.

Tu vois ce que je veux dire?

P.S: il faut je qu'y aille, je continuearis ça demain. Encore

[doof]

Oui, il est possible de faire un div transparent recouvrant une diagonale, le probleme, c'est qu'il risque de recouvrir d'autres lignes en dessous et de piquer leur evenement. Peut etre est-ce corrigeable en utilisant l'"event bubbling", je m'ettalerais pas trop dessus, je n'ai jammais réellement experimenté, je te renvoie ici : http://gilles.chagnon.free.fr/cours/dhtml/evenements.html

Il faudrat penser aussi, pour le survol, si tu veux changer de couleur, actualiser tous les divs de la diagonale...

Bref, bon courage

ps: je pense tout a coup a l'attribut clip qui en plus de cacher des parties, anule les evenements sur les parties cachées -a verifier-... ca pourait etre une piste.

[r0d]

comment récupère-t-on la position du curseur au moment du clic?
par ex. j'ai un div:

Code :

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

<div style="..." onclick=javascript&#58;mafonction&#40;&#41;;>

que dois-je mettre dans mafonction() pour récupérer cette position?

[doof]

Pour netscape/mozilla :

Code :

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

1
2
X = event.clientX + window.scrollX;
Y = event.clientY + window.scrollY;

Pour le reste :

Code :

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

1
2
X = window.event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft;
Y = window.event.clientY + document.documentElement.scrollTop + document.body.scrollTop;

event doit etre passé implicitement en argument de fonction mais il faut le declarer dans la déclaration de ta fonction :

Code :

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

1
2
3
4
mafonction(event) {
..
..
}

[r0d]

event doit etre passé implicitement en argument de fonction mais il faut le declarer dans la déclaration de ta fonction :

Code :

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

1
2
3
4
mafonction(event) {
..
..
}

en fait, c'est ça que je ne comprends pas: que dois-je passer en paramètre pour l'appel de mafonction? Que représente ce event? Que veux-tu dire par "être passé implicitement"?

[doof]

En effet, il me semblait ne pas etre tres clair !

A l'appel de la fonction, tu ne met rien justement, l'objet event est passé implicitement, par contre, je ne sais plus pour quelle raison obscure, pour mozilla/netscape tu doit le déclarer comme je te l'ai montré sinon, il te dira qu'il n'est pas définit (alors que tu n'a pas a le passer a l'appel !).

De plus, ca marche bien de cette facon, avec la maniere de lier les evenements que je t'ai montré plus haut, mais mis directement dans la balise, je ne peut te garantir que le comportement soit le même.

[r0d]

ça ne marche pas (je suis sous netscape)
voici ma fonction:

Code :

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

1
2
3
4
5
6
function fnToto(event)
{
	X = event.clientX + window.scrollX; 
	Y = event.clientY + window.scrollY;
	alert(X);
}

qui est appelée par:

Code :

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

1
2
<div id="div2" style="position&#58;absolute; left&#58;100px; top&#58;100px; rigth&#58;200px; bottom&#58;100px; z_index&#58;10" onclick="javascript&#58;fnToto&#40;&#41;;">
<!--avec une image et tout ce qu'il faut après-->

L'erreur est: event has no properties.

J'ai également essayé avec window.event, et idem: window.event has no properties
(j'obtiens ces messages d'erreurs dans la console javascript de netscape)

[doof]

Comme je t'ai dit, la gestion d'evenement depuis la balise risque d'etre differente, met plutot :

Code :

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

1
2
e = document.getElementById('div2');
e.addEventListener("mousedown", fnToto, false);

et rien dans la balise.

[r0d]

erf, ça ne marche pô non plus:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
<html>
<title>Test click</title>
<head>
<script language="javascript">

e = document.getElementById&#40;'div2'&#41;; 
e.addEventListener&#40;"mousedown", fnToto, false&#41;;

function fnToto&#40;event&#41;
&#123;
...

avec

Code :

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

<div id="div2" style="position&#58;absolute; left&#58;100px; top&#58;100px; rigth&#58;200px; bottom&#58;100px; z_index&#58;10">

-> erreur: e has non properties

[doof]

C'est normal, dans ton test, au moment du script, le div n'existe pas encore (il est plus bas dans la page), il faut mettre cette partie :

Code :

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

1
2
e = document.getElementById('div2'); 
e.addEventListener("mousedown", fnToto, false);

a la fin

[r0d]

ok nikel ça marche.