IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Changement de curseur sur balise img sous Firefox


Sujet :

JavaScript

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Profil pro
    Inscrit en
    Septembre 2010
    Messages
    14
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Septembre 2010
    Messages : 14
    Par défaut 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

  2. #2
    Inactif  

    Homme Profil pro
    développeur Vala
    Inscrit en
    Février 2011
    Messages
    478
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 38
    Localisation : France, Cher (Centre)

    Informations professionnelles :
    Activité : développeur Vala
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Février 2011
    Messages : 478
    Par défaut
    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 ?

  3. #3
    Membre averti
    Profil pro
    Inscrit en
    Septembre 2010
    Messages
    14
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Septembre 2010
    Messages : 14
    Par défaut
    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 ....

  4. #4
    Inactif  

    Homme Profil pro
    développeur Vala
    Inscrit en
    Février 2011
    Messages
    478
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 38
    Localisation : France, Cher (Centre)

    Informations professionnelles :
    Activité : développeur Vala
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Février 2011
    Messages : 478
    Par défaut
    bien .
    mais si tu pouvais poster le code en entier que je puisse analyser le problème ?

  5. #5
    Membre averti
    Profil pro
    Inscrit en
    Septembre 2010
    Messages
    14
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Septembre 2010
    Messages : 14
    Par défaut
    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>

  6. #6
    Inactif  

    Homme Profil pro
    développeur Vala
    Inscrit en
    Février 2011
    Messages
    478
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 38
    Localisation : France, Cher (Centre)

    Informations professionnelles :
    Activité : développeur Vala
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Février 2011
    Messages : 478
    Par défaut
    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

Discussions similaires

  1. Le contenu dépasse des balises DIV sous Firefox
    Par Francks11 dans le forum Mise en page CSS
    Réponses: 1
    Dernier message: 13/11/2009, 13h06
  2. la balise noscript sous firefox
    Par legide dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 18/05/2009, 09h44
  3. [MooTools] Tips et IE sur balise img
    Par grunk dans le forum Bibliothèques & Frameworks
    Réponses: 0
    Dernier message: 22/01/2009, 15h10
  4. ALT sur balise IMG dans firefox
    Par Hisander dans le forum Général JavaScript
    Réponses: 4
    Dernier message: 26/09/2007, 12h34
  5. Réponses: 8
    Dernier message: 09/08/2007, 13h34

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo