onClick avec 2 actions compatibilité IE FIREFOX

**sweetasnz** · 26/04/2012, 20h08

bonjour à tous,
voici mon problème:
je souhaite changer d’icône (gif animé) lorsque je clique sur un des icone sur ma page courante, ce "clic" doit me rediriger aussi vers une autre page (donc 2 actions sur le "onclick").
avec ce code plus bas, tout va bien sous IE8 et Chrome, le temps que ma page s'affiche j'ai bien mon icone qui apparait, mais pas moyen de voir le changement d'image sous Firefox12 ...

voici le bout de code en question :

Code :

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

1
2
3
4
5
6
7
8
<td>
<img
onClick="
this.src='{$STYLE}/imgs/icons/load_img.gif';
window.location.href ='ma_page.php?new_act={$CUR_ACT}';"
id="imag1" style="cursor: pointer;" src="{$STYLE}/imgs/icons/add.gif"
border="0" title="{$LBL_DOINSTALL}" />
</td>

nb : si je remplace le "onclick" par "onmouseover" par exemple, cela
ne fonctionne pas non plus
j'ai l'impression que firefox n'aime pas le fait qu'il y est 2 actions
sur le "onclick" ou sur n'importe quel "event" ??!!!

toujours sous firefox, si j'inverse les event du onclick, mon image
gif s'affiche mais ne s'anime plus, c'est déjà mieux ... mais c'est la loose (aucun pb sous ie et chrome par ailleurs)

Code :

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

1
2
3
4
5
6
7
<td>
<img
onClick="
window.location.href ='ma_page.php?new_act={$CUR_ACT}'; this.src='{$STYLE}/imgs/icons/load_img.gif';"
id="imag1" style="cursor: pointer;" src="{$STYLE}/imgs/icons/add.gif"
border="0" title="{$LBL_DOINSTALL}" />
</td>

recherche sur la toile en vain malgré les nombreux post ...

ps : j'ai tenté de mettre tout ça dans une fonction que j'appelle dans
le "onclick" .... mais c'est la même paillole, ça ne marche pas non plus
ps2 : os ouinedoseXP

avez-vous des idées ?
j'en appelle aux experts du javascript

**Willpower** · 26/04/2012, 20h23

et ça fait quoi si tu tentes :

Code html :

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

1
2
3
<a href='ma_page.php?new_act={$CUR_ACT}'>
    <img onclick="this.src='{$STYLE}/imgs/icons/load_img.gif';return true;" />
</a>

Sinon, essaye de nous présenter du code généré (sans php) comme le client le reçoit.

**sweetasnz** · 26/04/2012, 20h37

Envoyé par Willpower

et ça fait quoi si tu tentes :

Code html :

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

1
2
3
<a href='ma_page.php?new_act={$CUR_ACT}'>
    <img onclick="this.src='{$STYLE}/imgs/icons/load_img.gif';return true;" />
</a>

Sinon, essaye de nous présenter du code généré (sans php) comme le client le reçoit.

Merci pour ta réponse, j'ai déjà tenté avec le "return true" ... mais ça ne résoud malheureusement pas mon affaire...
pour le code client, je ferez passer plus tard (mais le html généré est identique pour les 3 navigateurs l'ayant visualiser), ils viennent de bloquer le site developpez.net au boulot quand tu veux générer une nouvelle discussion ....

tu peux aller sur fachedebouc mais pas poster ici : sont bons les mecs qui gèrent les accès au réseau dans ma boite!!!

... donc faut que je regarde si ça passe maintenant que je viens de créer la discussion

Au final, y a t'il pas un truc qui m'échappe, genre une option sous firefox que j'ai pas mise... sachant que ce qui ce dit sur la toile est que ie et chrome sont plus permissif coté norme ...

**Willpower** · 26/04/2012, 20h51

Envoyé par sweetasnz

(mais le html généré est identique pour les 3 navigateurs l'ayant visualiser)

En fait, je parlais de nous montrer le html généré pour nous le lire plus aisément et voir le code complet que le client tente d'interpréter et ainsi mieux pouvoir t'aider. (une règle générale de la section javascript)

Pour ton anecdote, si tu bosses en tant qu'informaticien ou mieux encore dans une boîte d'informatique, c'est vrai que c'est amusant.

Pour en revenir à ton code, note que dans ton exemple, ton code dit : "1) change de page 2) modifie la page actuelle"... il est normal je pense qu'une fois que le navigateur ait commencé à changé de page qu'il ne veuillent plus modifier la précédente... même si le changement n'est pas terminé. (avis personnel)

**NoSmoking** · 26/04/2012, 20h52

Bonjour,
les 2 actions sont contradictoires et les navigateurs, plutôt les moteurs de rendu, non pas les mêmes priorités.

Recharger la page fait que tu auras ou non l'affichage de ton image, pourquoi afficher quelque chose qui va disparaître.

Concernant l'animation de l'image gif, quand le navigateur bosse elle se fige.

En conclusion si tu veux recharger la page et faire apparaître ton image pour faire patienter l'internaute il te reste la technique Ajax en ne rechargeant que partiellement celle ci.

PS: Tu peux également, pour voir l'image, appeler le window.location... via un setTimeout.

Code html :

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

1
2
3
4
5
6
<img onclick="
  this.src = this.src='{$STYLE}/imgs/icons/load_img.gif';
  setTimeout( function(){
    window.location.href ='ma_page.php?new_act={$CUR_ACT}'
  }, 1000)"
src="{$STYLE}/imgs/icons/add.gif" border="0" title="{$LBL_DOINSTALL}" />

**sweetasnz** · 26/04/2012, 23h36

ma démarche était de dire au navigateur:
1. quand tu cliques sur le bouton/image "ajouter"
2. tu charges et tu remplaces l'image "ajouter" par l'image "load" animée
3. une fois chargée, tu remplaces l'image "load" par une image "validée"
je trouvais cela plutot sympa au niveau visuel au lieu d'avoir une popup ou une div ...

Merci les gars pour vos éclaircissements.

@Willpower : "oui, on se régale de voir des mecs aussi c**s" :

Pour ton anecdote, si tu bosses en tant qu'informaticien ou mieux encore dans une boîte d'informatique, c'est vrai que c'est amusant.

@NoSmoking : je vais tenter ta version, j'ai déjà essayé avec un "setTimeout" mais sans le function() ... donc à voir
tu peux me donner plus de détail et/ou où chercher :

la technique Ajax en ne rechargeant que partiellement celle ci.

Bref, Je ne comprend toujours pas pourquoi (sur le fond) cela fonctionne Nickel avec IE et chrome et pas avec firefox ....

**Willpower** · 27/04/2012, 02h12

Envoyé par sweetasnz

3. une fois chargée, tu remplaces l'image "load" par une image "validée"

si tu veux vraiment d'abord avoir l'image et seulement une fois que tu as l'image lancer le changement de page (bien que je trouve que ça n'a aucun ou peu d’intérêt) ->

Code :

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

<img onclick="this.onload=function(){location.href='monlien.php';};this.src='mon_gif_anime.hif';" src="image.jpg" />

Envoyé par sweetasnz

Bref, Je ne comprend toujours pas pourquoi (sur le fond) cela fonctionne Nickel avec IE et chrome et pas avec firefox ....

C'est normal, à partir du moment où tu CHANGES de page, le navigateur décide ou non de délaisser l'ancienne page, donc de ne plus y effectuer aucune action. (firefox est codé sur ce principe alors que les aures navigateurs non, il s'agit juste d'une implémentation / conception différente, mais je trouve le comportement de firefox tout à fait normal).

**sweetasnz** · 27/04/2012, 11h07

@nosmoking : le setTimeout n'apporte aucune différence sous firefox (si ce n'est un temps de réponse plus long d'1 seconde ...

@willpower : ton code réagit strictement de la même manière que ce que j'avais codé. le gif ne s'anime toujours pas sous firefox

je tiens à ajouter que la page que je charge, n'affiche rien, mais réalise un traitement en background c'est pour cela que je veux mettre mon icone "loading" ...

Merci quand m^me mais effectivement cela doit provenir d'un couche supérieure intrinsèque à FireFox

En résumé, retour à la case départ

et pour imager encore un peu ce que je souhaite faire:
1.

je clique sur icone

2.

l'icone s'anime pdt que la fenetre se charge (ici FireFox charge la page mais fige l'animation alors que IE et Chrome gère bien le truc)

3.

la page est chargée

**Willpower** · 27/04/2012, 13h26

Ajax ! Et si ça te faire peur alors Iframe !

Exemple iframe :

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
<html>
	<head>
		<style type="text/css">
                        *{margin:0;padding:0;}
                        #img_id,#iframe_id{position:absolute;z-index:2;}
                </style>
	</head>
	<body>
		<iframe id="iframe_id" src="about:blank" frameborder="0" height="100%" width="100%"></iframe>
		<img id="img_id" src="http://seitoworld.fr/wp-content/uploads/2011/01/ico.png" />
		<script type="text/javascript">
                        function $(id){
                                return document.getElementById(id);
                        }
                        $('img_id').onclick = function(){
                                this.style.zIndex = '1';
                                this.src = "http://www.lunerouge.org/objets/fire/LRflame0002.gif";
                                $('iframe_id').src = "http://www.developpez.net/forums/newreply.php?do=newreply&p=6647281";
                        };
                </script>
	</body>
</html>

nb: je viens de tester sous firefox et l'image s'anime bien.

**sweetasnz** · 27/04/2012, 13h34

ok, apparemment ça marche aussi chez moi
je vais tester

**sweetasnz** · 27/04/2012, 13h47

re:
j'avais un peu zappé ton post #2 (je pensait avoir déjà testé) mais j'aurais pas du car effectivement celafonctionne en reprenant ton bout de code...

je reste sceptique quant au fait du comportement aléatoire des navigateurs mais bon, on verra...
Merci encore
je vais creuser le "iframe" pour voir comment l'intégrer dans mon framework.
je clos donc ce post

**Willpower** · 27/04/2012, 14h05

ah oui, je n'avais même pas testé en fait, mon post#2 fonctionne bien sous firefox mais pas sous chrome cette fois. :p

Sinon les frames posent pas mal de problème, notamment celui de l'historique (l'url qui ne change pas) qui peut être corrigé avec une astuce en utilisant le hash de l'url (c'est ***** à implémenter surtout pour avoir une compatibilité entre navigateurs) ou sinon plus récemment le html5 permet d'arranger simplement ce problème avec :

Code :

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

history.pushState(id,title,"/url.htm");

**sweetasnz** · 27/04/2012, 15h14

Envoyé par Willpower

ah oui, je n'avais même pas testé en fait, mon post#2 fonctionne bien sous firefox mais pas sous chrome cette fois. :p

je dois avoir du cul, car chez moi ça passe ....

**sweetasnz** · 10/05/2012, 13h47

petit up pour mettre la solution :
fallait charger l'image avant...

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
 
<!-- pré-chargement de l'image pour la compatibilité des navigateurs (moz, chrome, ie)  -->
<*script language="JavaScript" type="text/javascript">
imPreloaded = new Image();
imPreloaded.src = 'load_img.gif';
<*/script>
<!-- au clic, l'image "load" s'affiche pendant que la page se charge et disparait lorsque le chargement est terminé -->
<*td>
<*a href='ma_page.php?new_act={$CUR_ACT}'>
<*img	
on*click="this.src='load_img.gif';"
style="cursor: pointer;" src="add.gif" border="0"
*/>
<*/a>
<*/td>

mon poste ne passe pas si je n'ajoute pas les * dans la balise et sur le on*click !!!

je sais pas pourquoi.... il faut donc virer tous les *... à moins que qq un puisse faire le nettoyage et mettre à jour chez developpez.net ... merci d'avance

onClick avec 2 actions compatibilité IE FIREFOX

JavaScript

Discussions similaires

Partager

Partager