Discussion :

[Programir]

Salut, j'ai une instruction qui fonctionne bien pour l'evennement onclick, donnée par un membre du forum, mais pour le over j'essaie de faire pareil, ça ne marche pas, j'ai oublié une chose ? Bon faut dire que la première est faite sur un div "place" existant, tandis que la seconde est faite sur un div "newDiv" qui a été ajouté en child sur le div "place"

Fonctionne :

Code :

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

1
2
3
4
5
 
				place.appendChild(newDiv);
				place.addEventListener('click', (e) => {
					testRect(e.offsetX, e.offsetY);
				});

Fonctionne pas :

Code :

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

1
2
3
4
5
 
				place.appendChild(newDiv);
				newDiv.addEventListener('mouseover', (e) => {
					testRect(e.offsetX, e.offsetY);
				});

En fait, mon but est de pouvoir changer le curseur du div "newDiv" que j'ai ajouté au div "place".
Le css n'a pas fonctionné.

[-Nikopol-]

du peu que j'en vois je pense que c'est parce que ta div n'a pas de dimension mais je peux me tromper. Si il s'agit de modifier le curseur au passage sur une div, une simple instruction css suffit, il faudrait voir un peu plus de ton code pour savoir ce qui ne va pas

[Programir]

Pardon oui c'est bien un div, mais le cursor pointer je voudrais le mettre sur le div mais aussi sur le code cidessous, qui part du même principe mais avec une image au lieu du div.


C'est juste que le div ou l'image est ajoutée à la volée par le javascript, donc le css déjà préparé dans un fichier ne marchera peut-etre pas, je cherche à l'ajouter par javascript juste aprés la création du div, j'ai essayé quelques manips en javascript mais cela ne marche pas.


Voilà le code, mais je pense pas que ça va aider beaucoup plus...

Code :

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

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
// Affiche l'icone du camp sur la carte selon sa position ligne,colonne. 
function getCase(lig,col){
	let num=carte[lig][col];
	// Si le numéro est -1, ne fait rien, sinon vérifie à quoi correspond le numéro.
	if(num>-1){
		if(num<=999){
			let camp=TabCamp[num]; // camp.dx et camp.dy sont la coordonnée en cases (pas en pixels).
//			console.log(camp.nom+" N°"+camp.num+":"+camp.dy+":"+camp.dx);
			 // Converti numéro de case en position.Puis ajoute un décalage pour centrer l'icone dans la case.
			ctx2.drawImage(camp.img,(camp.dx*rect.w)+30,(camp.dy*rect.h)+5);
			ctx4.fillText(camp.nom,(camp.dx*rect.w)+30,(camp.dy*rect.h)+32+5+12); // Affiche le nom du camp.
			// Ajoute l'icone du camp au DOM de l'écran.
			let place=document.getElementById('ecran');
			place.appendChild(camp.img);
			camp.img.style.position="absolute";
			camp.img.style.left=(camp.dx*rect.w)+30+"px";
			camp.img.style.top=(camp.dy*rect.h)+5+"px";
			// Ajoute un evennement click à l'écran et lance le test position du click sur es icones.
			place.addEventListener('click', (e) => {
				testRect(e.offsetX, e.offsetY);
			});
 
		}else{
			num=num-1000;
			let mine=TabMine[num];
 
		}
 
	}
 
}

C'est sur camp.img que je voudrais ajouter le cursor "pointer".

[NoSmoking]

Bonjour,
même si je n'ai pas vraiment tout compris ...

mais avec une image au lieu du div.

ici sur est sur le conteneur :

Code :

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

1
2
3
place.addEventListener('click', (e) => {
  testRect(e.offsetX, e.offsetY);
});

ici sur est sur l'image :

Code :

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

1
2
3
camp.img.addEventListener('click', (e) => {
  testRect(e.offsetX, e.offsetY);
});

[Programir]

Ah oui, tu as raison, j'enlève celui du camp, sur l'image camp.img je souhaite y mettre non pas un click mais un cursor pointer quand on la survole.

[NoSmoking]

!?! pourquoi ne pas passer par la pseudo-classe :hover en CSS.

!?! pourquoi ne pas affecter directement la propriété cursor:, également en CSS le curseur n'apparaissant qu'au survol de l'élément, c'est le comportement normal des navigateurs.

[Programir]

Parce que cette image est dans un objet nommé camp.
c'est camp.img.

Alors je me disais que le css ne fonctionnerait pas sur une image dans un objet qui est créé dynamiquement.

[NoSmoking]

Quelque soit la provenance des données, si un élément est ajouté au DOM alors le CSS, lui étant associé, lui sera affecté et pris en compte par le moteur de rendu.

[Programir]

Ah super, merci beaucoup !