Probléme map, firefox >> IE

Résolu/Fermé

Night Hawk - 14 mars 2007 à 15:18
cendre - 20 sept. 2008 à 01:22

Bonjour, alors voila mon probléme,

Donc jai un code html avec javascript pour faire un :hover et une #map sur 4 images, sa marche trés bien sous firefox(comme d'habitude généralement) et sous IE, tadaaa sa marche pas >_<.
Il ne prend même pas en compte mes #map.
Eclairez moi de vos lumiéres svp :p.

http://dreaminro.free.fr/Erandia/Untitled-1.html

A voir également:

Probléme map, firefox >> IE
Google map satellite gratuit - Guide
Video downloadhelper firefox - Télécharger - Outils pour navigateurs
Comment supprimer bing de firefox - Guide
Telecharger carte google map - Guide
Itinéraire google map entre deux adresses - Guide

9 réponses

Réponse 1 / 9

Jean-Philippe Chalvin
21 mars 2008 à 10:19

Firefox ne digère pas l'atribut ID dans la balise <map id="...">
Il faut écrire <map name="..."> et ça marche dans les 2 navigateurs

Réponse 2 / 9

cendre
20 sept. 2008 à 01:22

bonjour

j'ai un peu le même probleme
sauf que la balise id est dans la définition des div
et je ne sais pas par quoi le remplacer
si vous avez une solution je suis preneur

mon site est déjà en ligne : http://Tet-Zen /perso.orange.fr

le type de code a remplacer est :
<div id="ligneE2" style="background-image:Url(.\images\corbelin1.gif); width:35%; height:160px; position:absolute; left:350px; top:266px; z-index:3; visibility:hidden;">
<table cellpadding="0" cellspacing="0" width=280px>
<td align="center">Les "Têt Zen à ???????" XX juin 2009</td><tr>
<tr>
<td >répertoire :
<pre >
à definir ;
</pre>
...
<img src="./manifestations1.JPG"alt="calendrier de gauche" width="319" height="412" border="1" usemap="#ImageMap1"></img>
<!/p>
</td>
<!/table>

<!p> 
<!p> 

<map name="ImageMap1">
<area shape="poly" coords="2, 2, 317, 2, 317, 82, 2, 82" OnMouseOver="na_object_show('ligneA');na_object_hide('ligneB');na_object_hide('ligneC');na_object_hide('ligneD');na_object_hide('ligneE');na_object_hide('ligneF');na_object_hide('ligneF2');na_object_hide('ligneA2');na_object_hide('ligneC2');na_object_hide('ligneD2');na_object_hide('ligneE2');na_object_hide('ligneB2');">
<area shape="poly" coords="2, 84, 317, 84,317,164,2,164" OnMouseOver="na_object_show('ligneB');na_object_hide('ligneA');na_object_hide('ligneC');na_object_hide('ligneD');na_object_hide('ligneE');na_object_hide('ligneF');na_object_hide('ligneF2');na_object_hide('ligneA2');na_object_hide('ligneC2');na_object_hide('ligneD2');na_object_hide('ligneE2');na_object_hide('ligneB2');">
<area shape="poly" coords="2, 166, 317, 166, 317, 246, 2, 246" OnMouseOver="na_object_show('ligneC');na_object_hide('ligneA');na_object_hide('ligneB');na_object_hide('ligneD');na_object_hide('ligneE');na_object_hide('ligneF');na_object_hide('ligneF2');na_object_hide('ligneA2');na_object_hide('ligneC2');na_object_hide('ligneD2');na_object_hide('ligneE2');na_object_hide('ligneB2');">
<area shape="poly" coords="2, 248, 317, 248, 317, 328, 2, 328" OnMouseOver="na_object_show('ligneD');na_object_hide('ligneB');na_object_hide('ligneC');na_object_hide('ligneA');na_object_hide('ligneE');na_object_hide('ligneF');na_object_hide('ligneF2');na_object_hide('ligneA2');na_object_hide('ligneC2');na_object_hide('ligneD2');na_object_hide('ligneE2');na_object_hide('ligneB2');">

d'avance merci pour vos aides

amicalement Pierre

Réponse 3 / 9

kij_82 Messages postés 4088 Date d'inscription jeudi 7 avril 2005 Statut Contributeur Dernière intervention 30 septembre 2013 857
14 mars 2007 à 16:16

En effet marche pas ous IE :)

Mais tu sais, j'ai souvent dit la même chose que toi, comme quoi IE était moins bien que FF, mais c'est parce que tu as pris l'habitude de programmer ton JS par rapport à firefox et non IE. Chacun de ces deux navigateur utilise des fonctions qui leur sont spécifiques et n'en reconnaissent pas d'autre.
Le fait que ton script ne fonctionne pas vient de ca, tu fois certainement utiliser dans ton code des fonctions que IE ne reconnait pas.

Mais pour t'aider plus il faudrait que tu nous mette ton code, notemment le code de la fonction 'hiLite' et les fonctions utilisées par cette fonction.

Réponse 4 / 9

Night Hawk
14 mars 2007 à 18:16

ouai :p on peut voir grace a afficher la source mais je vais vous le mettre ^^ alors : html :

<script language="javascript">
<!-- hide script from old browsers

//detect browser:
browserName = navigator.appName;
browserVer = parseInt(navigator.appVersion);
if (browserName == "Netscape" && browserVer >= 3) browserVer = "1";
else if (browserName == "Microsoft Internet Explorer" && browserVer == 4) browserVer = "1";
else browserVer = "1";

//preload images:
if (browserVer = 1) {
a1 = new Image(295,223);
a1.src = "basdroit.jpg";
a2 = new Image(295,223);
a2.src = "basdroithover.jpg";
b1 = new Image(319,223);
b1.src = "basgauche.jpg";
b2 = new Image(319,223);
b2.src = "basgauchethover.jpg";
c1 = new Image(342,218);
c1.src = "hautdroit.jpg";
c2 = new Image(342,218);
c2.src = "hautdroithover.jpg";
d1 = new Image(272,218);
d1.src = "hautgauche.jpg";
d2 = new Image(272,218);
d2.src = "hautgauchehover.jpg";
}

//image swapping function:
function hiLite(imgDocID, imgObjName, comment) {
if (browserVer = 1) {
document.images[imgDocID].src = eval(imgObjName + ".src");
window.status = comment; return true;
}}
//end hiding -->
</script>
<body>
<div id="baniére">
  <img src="hautdroit.jpg" width="342" height="218" name="c" usemap="m_hautdroit" class="hautdroit"/>
  <map name="m_hautdroit">
    <area shape="circle" coords="157,106,61" href="http://erandia-online.fr-bb.com" target="_blank" alt="" onmouseover="hiLite('c','c2','Your Comment Here')" onmouseout="hiLite('c','c1','')" />
  </map>
    <img src="hautgauche.jpg" width="272" height="218" name="d" usemap="m_hautgauche" class="hautgauche"/>
  <map name="m_hautgauche">
      <area shape="circle" coords="122,112,61" href="accueil.html" target="_parent" alt="" onmouseover="hiLite('d','d2','Your Comment Here')" onmouseout="hiLite('d','d1','')" />
  </map>
    <img src="basgauche.jpg" width="319" height="223" name="b" usemap="m_basgauche" class="basgauche"/>
      <map name="m_basgauche">
        <area shape="circle" coords="171,139,61" href="download.html" target="_parent" alt="" onmouseover="hiLite('b','b2','Your Comment Here')" onmouseout="hiLite('b','b1','')" />
  </map>
    <img src="basdroit.jpg" width="295" height="223" usemap="m_basdroit" name="a" class="basdroit"/>
      <map name="m_basdroit">
        <area shape="circle" coords="190,116,61" href="staff.html" target="_parent" alt="" onmouseover="hiLite('a','a2','Your Comment Here')" onmouseout="hiLite('a','a1','')" />
      </map>
</div>
</body>

css :

div#baniére
{
width:614px;
height:441px;
display:block;
float:left;
}
.hautgauche
{
width: 272px;
height: 218px;
float:left;
background-image:url(hautgauche.jpg);
display:block;
border:0;
}
.hautdroit
{
width: 342px;
float:right;
height: 218px;
background-image:url(hautdroit.jpg);
display:block;
border:0;
}
.basdroit
{
width: 295px;
float:right;
height: 223px;
background-image:url(basdroit.jpg);
display:block;
border:0;
}
.basgauche
{
width: 319px;
float:left;
height: 223px;
background-image:url(basgauche.jpg);
display:block;
border:0;
}

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

Posez votre question

Réponse 5 / 9

Night Hawk
15 mars 2007 à 17:50

Mais en faite rien que le map ne marche pas, >_< je comprend pas, c'est compatible avec IE normalement.

Réponse 6 / 9

asdr
15 oct. 2007 à 12:12

Juste histoire de valider la solution de Jean-Philippe!

merci :)

Réponse 7 / 9

JPom
2 nov. 2007 à 11:41

Bonjour à tous,

Je reviens sur cette discussion, car cette solution est déjà celle que j'avais et ça ne marche pas.
Sous Mozilla, ma map ne marche pas.
Sous i.e. les active X sont bloqués, mais au moins la map fonctionne.
Voici le code ma map :

<img src="photos/BrissPalette.gif" alt="" width="800" height="500" vspace="100" align="center" usemap="#Palette" style="border-style:none" />
<map id="Palette" name="Palette">
<area shape="default" coords="0,0,0,0" alt="" nohref="nohref" />
<area shape="rect" coords="282,19,362,95" href="Lanriot_Defile.htm" target="_top" alt="..." title="Défilé" />
<area shape="rect" coords="94,133,208,228" href="Lanriot_Defile.htm" target="_top" alt="..." title="Défilé" />
<area shape="rect" coords="373,224,456,315" href="Lanriot_Defile.htm" target="_top" alt="..." title="Défilé" />
<area shape="rect" coords="519,81,600,148" href="Lanriot_Defile.htm" target="_top" alt="..." title="Défilé" />
</map>

Sous Mozilla, ça ne marche pas du tout du tout.

Help !
Je compte mettre le site en ligne bientôt.

JPom

Réponse 8 / 9

dragon
15 févr. 2008 à 09:18

J'ai le meme problème pour plusieurs:
Je veux afficher des photos en mode diaporama mais avec HTML et Javascript.
merci d'avance.
SVP.

iddjy
25 juil. 2008 à 16:14

Bonjour, désolé de déterrer un vieux topic, mais j'ai moi aussi cherché a faire ca, et j'ai trouvé comment, donc je post ma solution des fois que ca serve a d'autres :

pour faire cela tu peux mettre une image (qui correspondra a la premiere image de ton diaporama) dans ta page html, puis avec du javascript, tu changes l'attribut "src" de l'image periodiquement, grace a la fonction setTimeout() qui permet d'attendre un certain temps (en millisecondes) avant d'executer une fonction.

Bien sur, il faut preloader les images utilisees dans le diaporama pour eviter un temps de chargement a chaque diapo.

Un peu de code vaut mieux qu'un long discours (Le script n'est pas de moi, mais les commentaires si):

<script type="text/javascript">

//La partie ci-dessous sert a declarer des objets Image pour chaque diapo.
//Notez la facon incrementale de les nommer (image1, image2, image3).

var image1=new Image();
image1.src="./slide1.gif";
var image2=new Image();
image2.src="./slide2.jpg";
var image3=new Image();
image3.src="./slide3.bmp";

//variable qui represente le numero de l'image affichée

var step=1;

//Fonction de preloadage des images, a appeler dans le onload de la balise
//body avec en arguments les images a charger

function preloadImages() { //v3.0
  var d=document; 
  if(d.images){
   if(!d.p) d.p=new Array();
   
   var i,j=d.p.length,a=preloadImages.arguments;
   for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){
     d.p[j]=new Image;
     d.p[j++].src=a[i];
     }
    }
}


//Fonction chargée de modifier l'image du diaporama

            function slideit(){

            //si le navigateur ne prend pas en charge l'objet image, sortir

            if (!document.images){
                return;
            }

            //On met comme valeur de l'attribut 'src' 
            //le chemin specifié pour l'image numero 'step'

//ATTENTION! L'image dont on change la source doit s'appeler 'slide'
//(dans cet exemple).

            document.images.slide.src=eval("image"+step+".src");
            
           //Si on est arrive au bout du diaporama, on retourne a la premiere image
             
            if (step<3)
                step++;
            else

                step=1;

            //appel recursif apres 2.5 secondes
            setTimeout("slideit()",2500);
            }

//On lance la fonction une premiere (et unique) fois. La récursivité fera le reste.
slideit();

</script>

Après il ne reste plus qu'a adapter selon le nombre d'images du diaporama, le nom de tes images, le temps d'affichage de chaque diapo etc... et bien sur a mettre une image (ici nommée 'slide') dans le code html de ta page.

Réponse 9 / 9

Jean-Philippe Côté
6 juin 2007 à 05:17

J'ai le même problème que je viens de régler
ll suffit de placer un # dans l'appel à la map de l'image:

<IMG SRC="accueil/accueil20072.jpg" WIDTH=749 HEIGHT=600 ALT="" usemap="#map" border="0">

et tu n'en mets pas dans la définition :

<map name="map">
<area shape="rect" coords="272,542,359,580" href="https://get.adobe.com/flashplayer/?loc=fr" target="_blank" alt="Télécharger Flash Player">
</map>

Jean-Philippe

Discussions similaires

Prélèvement Google Ireland Limited

Facture de google 380€ !

Arnaque frauduleuse Ireland ltd

Prélèvement "CB Google" inconnu. Arnaque ?

Discussions similaires

Newsletters