Changement de curseur sur balise img sous Firefox

max007 · 11/12/2011, 09h57

J'ai une balise <IMG avec ID >pour laquelle je change les images suite à une action initiée par l'internaute. Tout cela fonctionne très bien en JS, via un d=document.getElementById(id de l'image) et un changement de src ( d.src="nom du fichier image").

Voila, maintenant je souhaite changer l'apparence du curseur quand il survole l'image en fonction du nom de (d.src) de celle-ci.
Je fais alors un d['style'].cursor="curseur désiré" dans la fonction qui change la source de l'image .... logique non !

Résultat, quand je survole l'image, cea fonctionne nickel sur IE, mais sur FireFox, le cursor alterne continuellement entre le curseur par défaut et le curseur désirée. J'ai essayé de transposer la logique de gestion du curseur dans un onmouseover, même problème sur FireFox.

Quelqu'un a une idée du pourquoi, et s'il existe une solution ?

Merci

rotrevrep · 11/12/2011, 10h49

bonjour

.
C'est curieux car :

Code :

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

1
2
3
document.getElementById(id).style.cursor="url('pointer.cur')";
// ou
document.getElementById(id).style.cursor="hand";

fonctionne bien sous firefox.
N'y a-t-il pas une sorte de boucle qui fait alterner ces deux curseurs dans ta fonction ?

max007 · 11/12/2011, 11h03

Merci Yanick,

non pas de boucle, s'il y en est une c'est intreseque à FF. Mieux, si je laisse mon curseur assez longtemps, le "title" apparait ce qui est normal, et après le curseur a moins tendance à alterner.

Je continue mon investigation, mais je crois plus que la solution se trouve au niveau des z-index et de div, étant deux objects/insctructions dont le traitement entre les deux navigateurs varie fortement .... vive les guerres de clocher, entre temps c'est nous les dvp qui souffront ... un peu comme le peuple, la finance, l'état et l'euro ....

rotrevrep · 11/12/2011, 11h46

bien

.
mais si tu pouvais poster le code en entier que je puisse analyser le problème

?

max007 · 11/12/2011, 12h40

Yannick, et autres code test qui illustre mon point (si il y a des éléments dont vous questionnez la pertinence, c'est que j'ai extrait le tout de la page que je suis à ecrire)

Sur IE tourne sans pb, sur FF, si vous bouger tranquilement la souris sur la première image, ca va finir pas alterner. Sur la deuxième image, preuve que FF ne connait pas "hand", le troisième utilise le curseur par défaut, donc sera stable...

Si quelqu'un veut ajouter un mouseover, sur la première image possible

J'attends vos commentaires

M

Code html :

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
**********************************
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style>
 
div#zone_icone1 {position:absolute; top:10px; left:20px; visibility:visible;z-index:50;}
</style>
 
 
<script language="JavaScript" type="text/JavaScript">
 
function do_init()
{
   d = document.getElementById("img1");
   d.style.cursor = "pointer";
 
   d = document.getElementById("img2");
   d.style.cursor = "hand";
 
   d = document.getElementById("img3");
   d.style.cursor = "default";
return;
}
 
 
/**********************************/
function zmouseover(le_this)
{
return;
 
}
 
</script>
 
</HEAD>
 
<BODY onload="do_init();">
 
 
<div id="zone_icone1">
  <IMG BORDER="1" height="38px" title="stable avec le pointeur" ID="img1" src="../../../images/icn_recherche_idle.gif" onclick="do_button_act(0,0);" onmouseover="zmouseover(this);" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  <IMG BORDER="1" height="38px" title="instable avec hand" ID="img2" src="../../../images/icone_resp_idle.gif" onclick="do_button_act(2,0);" />&nbsp;&nbsp;&nbsp;
  <IMG BORDER="1" height="38px" title="stable car curseur par defaut" ID="img3" src="../../../images/icn_postal_idle.gif" onclick="do_button_act(2,0);" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</div>
</body>
</html>

rotrevrep · 11/12/2011, 13h00

plutôt que de créer une fonction d'initialisation js, tu devrais plutot faire ceci en css :

Code :

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

1
2
#img1:hover{cursor:pointer;}
#img2:hover{cursor:hand;}

ps : utilise la balise "code" pour avoir une meilleur lecture

max007 · 11/12/2011, 13h13

Yanick,

ceci est un programme test pour illustrer le pb, car dans la réalité le changement pour les curseurs se doit d'être dynmique en fonction de où l'internaute ....comme je n'ai pas mis ce bout de logique, j'ai mis cela dans une fonction init ..... l'objectif n'est pas d'identifier une meilleur syntaxe, mais d'analyser le pb

pour la balise code ...

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style>
 
div#zone_icone1 {position:absolute; top:10px; left:20px; visibility:visible;z-index:50;}
</style>
 
 
<script language="JavaScript" type="text/JavaScript">
 
function do_init()
{
d = document.getElementById("img1");
d.style.cursor = "pointer";
 
d = document.getElementById("img2");
d.style.cursor = "hand";
 
d = document.getElementById("img3");
d.style.cursor = "default";
return;
}
 
 
/**********************************/
function zmouseover(le_this)
{
return;
 
}
 
</script>
 
</HEAD>
 
<BODY onload="do_init();">
 
 
<div id="zone_icone1">
<IMG BORDER="1" height="38px" title="stable avec le pointeur" ID="img1" src="../../../images/icn_recherche_idle.gif" onclick="do_button_act(0,0);" onmouseover="zmouseover(this);" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<IMG BORDER="1" height="38px" title="instable avec hand" ID="img2" src="../../../images/icone_resp_idle.gif" onclick="do_button_act(2,0);" />&nbsp;&nbsp;&nbsp;
<IMG BORDER="1" height="38px" title="stable car curseur par defaut" ID="img3" src="../../../images/icn_postal_idle.gif" onclick="do_button_act(2,0);" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</div>
</body>
</html>

rotrevrep · 11/12/2011, 14h03

le css que je te montre fonctionne aussi bien : tu as le pointeur sur tout le document, et un curseur différent au passage de la souris sur chaque image

max007 · 12/12/2011, 00h49

Exact Yanick,
mais comme je te l'ai dit, ceci est un exemple pour illustrer un pb ... ce que tu suggères ne s'applique pas pour ce qu'ultimement je cherche à faire; dans les faits, j'ai trois sources pour une même <IMG et en fonction de la source associé à un temps T à une <IMG, je veux que le curseur apparait de tel ou tel autre façon quand il survole le <IMG. Ainsi avec une approche hover en CSS, cela ne peut pas fonctionner , car selon la src, je veux que le comportement du hover (apparence du curseur) change.

M

11/12/2011, 09h57	#1
max007 Invité de passage Inscription : septembre 2010 Messages : 11 Détails du profil Informations forums : Inscription : septembre 2010 Messages : 11 Points : 2 Points : 2	Changement de curseur sur balise img sous Firefox J'ai une balise <IMG avec ID >pour laquelle je change les images suite à une action initiée par l'internaute. Tout cela fonctionne très bien en JS, via un d=document.getElementById(id de l'image) et un changement de src ( d.src="nom du fichier image"). Voila, maintenant je souhaite changer l'apparence du curseur quand il survole l'image en fonction du nom de (d.src) de celle-ci. Je fais alors un d['style'].cursor="curseur désiré" dans la fonction qui change la source de l'image .... logique non ! Résultat, quand je survole l'image, cea fonctionne nickel sur IE, mais sur FireFox, le cursor alterne continuellement entre le curseur par défaut et le curseur désirée. J'ai essayé de transposer la logique de gestion du curseur dans un onmouseover, même problème sur FireFox. Quelqu'un a une idée du pourquoi, et s'il existe une solution ? Merci
	00

11/12/2011, 11h46	#4
rotrevrep Membre Expert yannick inizan Secrétaire d'état à la procrastination Inscription : février 2011 Messages : 304 Détails du profil Informations personnelles : Nom : yannick inizan Âge : 25 Localisation : France, Cher (Centre) Informations professionnelles : Activité : Secrétaire d'état à la procrastination Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : février 2011 Messages : 304 Points : 1 118 Points : 1 118	bien . mais si tu pouvais poster le code en entier que je puisse analyser le problème ? __________________ (marquer un post résolu si vous êtes satisfait de la réponse ) le chat caramail de retour ? :/ http://www.tchats.net/beta.php les projets web en cours sont sur : https://github.com/rotrevrep
	00

11/12/2011, 14h03	#8
rotrevrep Membre Expert yannick inizan Secrétaire d'état à la procrastination Inscription : février 2011 Messages : 304 Détails du profil Informations personnelles : Nom : yannick inizan Âge : 25 Localisation : France, Cher (Centre) Informations professionnelles : Activité : Secrétaire d'état à la procrastination Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : février 2011 Messages : 304 Points : 1 118 Points : 1 118	le css que je te montre fonctionne aussi bien : tu as le pointeur sur tout le document, et un curseur différent au passage de la souris sur chaque image __________________ (marquer un post résolu si vous êtes satisfait de la réponse ) le chat caramail de retour ? :/ http://www.tchats.net/beta.php les projets web en cours sont sur : https://github.com/rotrevrep
	00

11/12/2011, 11h03	#3
max007 Invité de passage Inscription : septembre 2010 Messages : 11 Détails du profil Informations forums : Inscription : septembre 2010 Messages : 11 Points : 2 Points : 2	Merci Yanick, non pas de boucle, s'il y en est une c'est intreseque à FF. Mieux, si je laisse mon curseur assez longtemps, le "title" apparait ce qui est normal, et après le curseur a moins tendance à alterner. Je continue mon investigation, mais je crois plus que la solution se trouve au niveau des z-index et de div, étant deux objects/insctructions dont le traitement entre les deux navigateurs varie fortement .... vive les guerres de clocher, entre temps c'est nous les dvp qui souffront ... un peu comme le peuple, la finance, l'état et l'euro ....
	10

12/12/2011, 00h49	#9
max007 Invité de passage Inscription : septembre 2010 Messages : 11 Détails du profil Informations forums : Inscription : septembre 2010 Messages : 11 Points : 2 Points : 2	Exact Yanick, mais comme je te l'ai dit, ceci est un exemple pour illustrer un pb ... ce que tu suggères ne s'applique pas pour ce qu'ultimement je cherche à faire; dans les faits, j'ai trois sources pour une même <IMG et en fonction de la source associé à un temps T à une <IMG, je veux que le curseur apparait de tel ou tel autre façon quand il survole le <IMG. Ainsi avec une approche hover en CSS, cela ne peut pas fonctionner , car selon la src, je veux que le comportement du hover (apparence du curseur) change. M
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email