Bug javascript sous Safari (backgroundImage + onmouseout)

[Résolu]
Signaler
Messages postés
7
Date d'inscription
mercredi 14 juillet 2004
Statut
Membre
Dernière intervention
15 octobre 2009
-
Messages postés
7
Date d'inscription
mercredi 14 juillet 2004
Statut
Membre
Dernière intervention
15 octobre 2009
-
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

Messages postés
1293
Date d'inscription
mardi 9 novembre 2004
Statut
Membre
Dernière intervention
21 mai 2015

<?= 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... .. .
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
12
Bonjour,
avant tout, regarde d'abord le contenu de o.backgroundImage !!!
fais un alert par exemple, tu comprendra bien mieux.
Cordialement
Messages postés
7
Date d'inscription
mercredi 14 juillet 2004
Statut
Membre
Dernière intervention
15 octobre 2009

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
Messages postés
1293
Date d'inscription
mardi 9 novembre 2004
Statut
Membre
Dernière intervention
21 mai 2015

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... .. .
Messages postés
7
Date d'inscription
mercredi 14 juillet 2004
Statut
Membre
Dernière intervention
15 octobre 2009

Ok. et bien, merci !
[Résolu] ;)

Z