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

**Rachel** · 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 ....

**Rachel** · 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>

**Rachel** · 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

Changement de curseur sur balise img sous Firefox

JavaScript

Vue hybride

Discussions similaires

Partager

Partager