11548 sujets

JavaScript, DOM et API Web HTML5

[FIREFOX] Pb image reactive .gif

Bonjour,
Je viens de créer une image réactive avec des .gif sur mon site.
J'ai donc mis un script javascript et coder mon image avec des mapages. Ca marche bien sur IE et chrome mais sur firefox le gif ne se lance pas !
Comment faire ?
Merci par avance.
Modifié par dwarf17 (28 Jun 2011 - 15:11)
Bonjour,
ré-actualise ta page dans ton navigateur ? Pour moi ça marche sous FF (3.6) !
Modifié par Macpom (17 Jun 2011 - 10:27)
Bonjour,

Chez moi, sous FF 4.0.1, ça ne fonctionne pas, même en réactualisant.
Dans ton code, remplace la partie concernée par ceci :


function cacher(){
        document.getElementById('map-niv').src = "./images/stories/contenu/promo/niveaux/niveaubase.jpg";
    }



	<img id="map-niv" usemap="#mapniv" style="width: 633px; height: 193px; margin: 5px; border: 0px;" src="./images/stories/contenu/promo/niveaux/niveaubase.jpg" alt="niveaubase" /> 
	<map name="mapniv" id="mapniv">
		<area href="#" alt="LEV 350" coords="184,73,4,136,7,178,22,185,201,115,202,79" shape="poly" onmouseover="montrer('./images/stories/contenu/promo/niveaux/anim1.gif'); return false;" onmouseout="montrer ('./images/stories/contenu/promo/niveaux/niveaubase.jpg'); return false;" />
		<area href="#" alt="LEV 800 + sacoche" coords="136,147,139,178,146,184,400,74,400,55,390,52" shape="poly" onmouseover="montrer('./images/stories/contenu/promo/niveaux/anim2.gif'); return false;" onmouseout="montrer  ('./images/stories/contenu/promo/niveaux/niveaubase.jpg'); return false;" />
		<area href="#" alt="LEV 800 Digital + sacoche" coords="245,147,246,179,253,185,508,76,508,55,496,52" shape="poly" onmouseover="montrer('./images/stories/contenu/promo/niveaux/anim3.gif'); return false;" onmouseout="montrer('./images/stories/contenu/promo/niveaux/niveaubase.jpg'); return false;" />
		<area href="#" alt="LEV   1400 + sacoche" coords="338,157,339,178,343,182,628,56,626,42,619,40" shape="poly" onmouseover="montrer('./images/stories/contenu/promo/niveaux/anim4.gif'); return false;" onmouseout="montrer('./images/stories/contenu/promo/niveaux/niveaubase.jpg'); return false;" /> 
	</map>


ATTENTION: j'ai enlevé les liens sur les area (pour alléger le code). A toi de les remettre.
J'ai testé en local et ça fonctionne!
Je te rappelle ce que je t'avais déjà dit dans un autre post : tes images sont beaucoup trop lourdes et mettent beaucoup de temps à se charger! (5,35Mo pour 5 images!)
Modifié par lddsoft (17 Jun 2011 - 11:09)
Salut,
J'ai FF 4.0.1 aussi.
IDDSOFT, je viens d'essayer ton code mais ça ne marche toujours pas chez moi quand je fait dans firebug.

Pour les images, je sais, et là c'est vrai que c'est du lourd et que la première fois qu'on va sur la page c'est très long. Mais c'est du .gif c'est pour ça, puis je fait charger toutes les images en même temps... Tu as des conseils pour réduire la taille de mes images ? J'utilise Corel Draw pour le traitement d'image et pour la création de .gif ça va super bien.
Modifié par dwarf17 (17 Jun 2011 - 12:00)
J'ai tout mis en place sur le site, mais ça ne marche pas encore...
Comment tu as fait ???
Si j'ai bien lu ton code, tu a juste rajouté des ./ avant les images ?
Merci pour ton aide
Je ne dis pas que ce sera la solution, mais tu as oublié le point ici devant /images/... :
<img id="map-niv" usemap="#mapniv" style="width: 633px; height: 193px; margin: 5px; border: 0px;" src="./images/stories/contenu/promo/niveaux/niveaubase.jpg" alt="niveaubase" />

Je signale quand même que ta page contient 74 erreurs. Peut-être ceci explique-t-il cela...
Si tu veux tester mon code par toi-même, met ceci en ligne au même niveau que ta page et vois si ça marche :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr-fr" lang="fr-fr" >
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>dwarf17</title>
<script type="text/javascript">
// <![CDATA[
function montrer(pic){document.getElementById('map-niv').src = pic;}
function cacher(){document.getElementById('map-niv').src = "./images/stories/contenu/promo/niveaux/niveaubase.jpg";}
// ]]>
</script></head><body>
<div id="map">
<img id="map-niv" usemap="#mapniv" style="width: 633px; height: 193px; margin: 5px; border: 0px;" src="./images/stories/contenu/promo/niveaux/niveaubase.jpg" alt="niveaubase" /> 
<map name="mapniv" id="mapniv">
<area href="#" alt="LEV 350" coords="184,73,4,136,7,178,22,185,201,115,202,79" shape="poly" onmouseover="montrer('./images/stories/contenu/promo/niveaux/anim1.gif'); return false;" onmouseout="montrer('./images/stories/contenu/promo/niveaux/niveaubase.jpg'); return false;" />
<area href="#" alt="LEV 800 + sacoche" coords="136,147,139,178,146,184,400,74,400,55,390,52" shape="poly" onmouseover="montrer('./images/stories/contenu/promo/niveaux/anim2.gif'); return false;" onmouseout="montrer('./images/stories/contenu/promo/niveaux/niveaubase.jpg'); return false;" />
<area href="#" alt="LEV 800 Digital + sacoche" coords="245,147,246,179,253,185,508,76,508,55,496,52" shape="poly" onmouseover="montrer('./images/stories/contenu/promo/niveaux/anim3.gif'); return false;" onmouseout="montrer('./images/stories/contenu/promo/niveaux/niveaubase.jpg'); return false;" />
<area href="#" alt="LEV 1400 + sacoche" coords="338,157,339,178,343,182,628,56,626,42,619,40" shape="poly" onmouseover="montrer('./images/stories/contenu/promo/niveaux/anim4.gif'); return false;" onmouseout="montrer('./images/stories/contenu/promo/niveaux/niveaubase.jpg'); return false;" /> 
</map>
</div>
</body></html>
Re,
J'ai essayé de mettre le code que tu ma donné mais ça ne lance toujours pas l'animation...

Des erreurs ? 74 ? euh... Smiley confused
Ca fait beaucoup ? Tu les voit comment ?
dwarf17 a écrit :
Des erreurs ? 74 ? euh... Ca fait beaucoup ? Tu les voit comment ?

Je les vois grâce à l'addon SGML pour Firefox (très pratique!).
Tu peux le trouver à l'adresse suivante.
Autre chose, as-tu testé le dernier code que je t'avais transmis? Si tu l'as mis sur ton site au bon endroit, cela devrait fonctionner sans problème.
Bonjour,
J'ai copié ton code tel quel sur mon site juste après la balise body, ça n'a pas fonctionné.
Je l'ai aussi copié sur une page vide du navigateur en mettant les liens des images vers mon site, idem, ne marche pas...
C'est bizarre, l'animation s'est lancée une fois ce matin sans rien avoir changé, une seule fois par contre, après impossible de refaire marcher.
Salut !
Ce matin, mise à jour de Firefox en version 5, et là mon animation fonctionne !
Mais bon pour tous ceux qui sont encore au 4 ça ne marche pas...
Pourtant (je répète ce que j'ai écris le 17 juin), le code que je t'ai proposé fonctionne sous Firefox 4. Le problème doit se situer autre part dans ta page, mais je ne vois pas où. Désolé. Smiley decu
Ok, faudra que je recherche les erreurs sur la page.
Pourtant, (pas pour te copié Smiley cligne , mais je répète aussi) j'ai posé ton code sur une page vierge du navigateur avec les liens vers mon site et ça n'a pas marché non plus ! Ca aurait dû marcher comme ça non ?

Puis Firefox en fait le mieux était le 3, j'ai des extensions qui sont supprimées à chaque mises à jour et qui ne sont plus compatibles, d'abord "mycodehelper" qui était hyper bien, puis maintenant c'est "html validator"... Donc je vais galérer pour voir mes erreurs...

Mais bon, merci pour ton aide IDDSOFT.
@+
Sujet clos
Aller à