1. Accueil
  2. Forum Codes-Sources
  3. Javascript / DHTML
Sujet Précédent Sujet Suivant

Bug javascript sous Safari (backgroundImage + onmouseout)

Résolu
Mr Z Messages postés 7 Date d'inscription mercredi 14 juillet 2004 Statut Membre Dernière intervention 15 octobre 2009 - 23 juin 2009 à 11:09
Mr Z Messages postés 7 Date d'inscription mercredi 14 juillet 2004 Statut Membre Dernière intervention 15 octobre 2009 - 23 juin 2009 à 18:53
Bonjour à tous,

Je liste en php une série de "titre+petit texte" comme ceci :

" class="blocListe" onmouseover="taquet('<?= 'bloc'.$i ?>')" onmouseout="taquet('<?= 'bloc'.$i ?>')">

[XX <?= $titreTab[$i] ?>]

<?= $descriptifTab[$i] ?>

Le CSS de blocListe : { blablabla... background-image:url(images/taquetBlanc.jpg); background-repeat:repeat-y; background-position:left; }

La fonction Javascript sur le onmouseover/onmouseout :
function taquet(idObj){
    if (!document.getElementById) return;
    var o = document.getElementById(idObj).style;
    var imgOn = "url(images/taquetRouge.jpg)";
    var imgOff = "url(images/taquetBlanc.jpg)";    o.backgroundImage (o.backgroundImage imgOn) ? imgOff : imgOn;
}

Lorsque je survol ma DIV (class="blocListe") une barre verticale rouge, de la hauteur de mon bloc, apparaît calée à gauche.

Mon soucis est que tout fonctionne sur Firefox et IE,
mais sous Safari, la barre passe en rouge lors du survol,
mais ne redevient pas blanche lors du onmouseout... !?!

Je ne vois pas, mais pas du tout,  pourquoi... ?

Merci d'avance,
Z

5 réponses

Réponse 1 / 5
kankrelune Messages postés 1293 Date d'inscription mardi 9 novembre 2004 Statut Membre Dernière intervention 21 mai 2015
23 juin 2009 à 12:11
<?= a éviter c'est grave déprécié, ne marche que si short_open_tags est actif sur le serveur et n'existera bientot plus...

<?php echo 'bloc'.$i; ?>

après faut voir... ton élément se déclenche... tu as mis un alert() dans ta fonction pour voir s'il te renvoyais quelque chose avec ton getElement... perso je pense que o doit valloir null à vérifier... essaye avec

" class="blocListe"
onmouseover="javascript:taquet(this,true);"
onmouseout="javascript:taquet(this);">

function taquet(obj,over){
    if (!obj) {
        return;
    }
    if(over) {
        obj.style.backgroundImage = "url(images/taquetRouge.jpg)";
    }
    else {
        obj.style.backgroundImage = "url(images/taquetBlanc.jpg)";
    }
}

@ tchaOo°

l'homme est un loup pour l'homme... .. .
3
Réponse 2 / 5
Bul3 Messages postés 4933 Date d'inscription samedi 1 juillet 2006 Statut Membre Dernière intervention 2 février 2015 14
23 juin 2009 à 13:54
Bonjour,
avant tout, regarde d'abord le contenu de o.backgroundImage !!!
fais un alert par exemple, tu comprendra bien mieux.
Cordialement
3
Réponse 3 / 5
Mr Z Messages postés 7 Date d'inscription mercredi 14 juillet 2004 Statut Membre Dernière intervention 15 octobre 2009
23 juin 2009 à 15:03
Oui, j'ai déjà vérifier avec alert();.
(sous Safari) Au départ, lors du premier survol,
l'image change normalement
("url(images/taquetBlanc.jpg)" -> "url(images/taquetRouge.jpg)").
Ensuite, backgroundImage reste bloqué et l'alert renvoie toujours "url(images/taquetRouge.jpg)".

J'ai viré les <?= et remplacé par <? echo
Mais le soucis ne venait pas de là (ceci dit bon à savoir, merci)

J'ai modifié ma fonction Javascript comme cela :
function taquet(obj,over){
    if (!document.getElementById) return;
    var o = document.getElementById(obj).style;

    if(over) {
        o.backgroundImage = "url(images/taquetRouge.jpg)";
    }
    else {
        o.backgroundImage = "url(images/taquetBlanc.jpg)";
    }
}

Et là ça fonctionne sous Safari, si je n'utilise pas le this dans : onmouseover="taquet(this, true)" !
Mais : onmouseover="taquet('<?php echo 'bloc'.$i ?>', true)"

Je vois pas bien la différence ?! Si ce n'est le "over"...
Que j'utilise this + obj.style.backgroundImage
OU <?php echo 'bloc'.$i ?> + document.getElementById(obj).style.backgroundImage
Cela est la même chose. non ?

Par contre, le soucis semble plus venir du système avec le modulo :obj.style.backgroundImage  (obj.style.backgroundImage imgOn) ? imgOff : imgOn;OU o.backgroundImage (o.backgroundImage imgOn) ? imgOff : imgOn;
Là dans les deux cas, ça ne fonctionne pas sous Safari.

Merci à vous,

Z
3
Réponse 4 / 5
kankrelune Messages postés 1293 Date d'inscription mardi 9 novembre 2004 Statut Membre Dernière intervention 21 mai 2015
23 juin 2009 à 18:21
pour le <?= c'était en apparté... pour le reste en fait le this correspond à l'objet courrant donc en l'occurence ta div...

function taquet(v) {
    v.maVar = "maVal";
}

revient à faire

function taquet(v) {

    document.getElementById(v).maVar = "maVal";

}

@ tchaOo°

l'homme est un loup pour l'homme... .. .
3

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 5
Mr Z Messages postés 7 Date d'inscription mercredi 14 juillet 2004 Statut Membre Dernière intervention 15 octobre 2009
23 juin 2009 à 18:53
Ok. et bien, merci !
[Résolu] ;)

Z
3