Bonjour,
Mes excuses si je ne suis pas dans la bonne rubrique mais je ne sais pas dans quelle direction chercher. Peut être aurais-je du aller dans CSS etc. ou bien DOM etc ?
C'est assez compliqué à expliquer. En résumé, IE6 n'aime pas les poupées russes.
IE6 seulement car ça marche nickel sous Firefox, IE7, et Opera.
Le problème: l'image finale contenue dans un div appelé à l'aide d'un tableau javascript ne s'affiche pas.
Voici les détails.
J'ai une image à zones réactives (map) :
Le clic sur une zone appelle un javascript "showdiv" qui affiche un div en transmettant une variable qui est un numéro (0 à 3) :
Cette variable identifie l'indice d'un tableau javascript qui contient le contenu à afficher dans le div final :
La div "fermer" est là simplement pour afficher la petite croix blanche sur fond rouge (même que c'est moi qui l'ai faite à la main et aux crayons de couleurs;) et qu'en cliquant dessus ça ferme la div.
Et enfin le div final qui affiche le contenu voulu :
Le CSS qui va avec :
Et bien c'est l'image finale, par exemple "tours.jpg" qui ne s'affiche pas. Le div "troncon" apparait, l'emplacement de l'image aussi, mais rien à l'intérieur. Ou plutôt de façon très aléatoire, ça marche environ 1 foi sur 10. En plus des fois c'est la petite croix de la div "fermer" qui refuse de s'afficher.
Il y a forcément quelque chose que je ne sais pas au sujet de IE6 et de la compatibilité (en fait je ne sais pas grand chose, je suis loin d'être un kador). J'aimerai juste savoir si je peux espérer une solution ou si je dois complètement modifier le graphisme et la structure.
Si quelqu'un à une idée ..... je serai infiniment reconnaissante à toute personne voulant bien s'intéresser à mon soucis.
Mes excuses si je ne suis pas dans la bonne rubrique mais je ne sais pas dans quelle direction chercher. Peut être aurais-je du aller dans CSS etc. ou bien DOM etc ?
C'est assez compliqué à expliquer. En résumé, IE6 n'aime pas les poupées russes.
IE6 seulement car ça marche nickel sous Firefox, IE7, et Opera.
Le problème: l'image finale contenue dans un div appelé à l'aide d'un tableau javascript ne s'affiche pas.
Voici les détails.
J'ai une image à zones réactives (map) :
<img src="photos/img_fixes/tours.jpg" border="0" usemap="#Map" style="top:195px; position:absolute" />
<map name="Map" id="Map">
<area shape="poly" coords="164,10,184,13,153,137,141,132" href="javascript [decu]void);" onclick="showdiv('troncon','0')" />
<area shape="poly" coords="319,162,332,166,242,280,233,271" href="javascript [decu]void);" onclick="showdiv('troncon','1')" />
<area shape="poly" coords="232,276,239,286,250,401,235,398" href="javascript [decu]void);" onclick="showdiv('troncon','2')" />
<area shape="poly" coords="235,401,244,406,163,600,151,590" href="javascript [decu]void);" onclick="showdiv('troncon','3')" />
</map>
Le clic sur une zone appelle un javascript "showdiv" qui affiche un div en transmettant une variable qui est un numéro (0 à 3) :
<script language="javascript">
function showdiv(D,I) {
if (document.all) {
document.all[D].style.display="block";
document.all[D].innerHTML = tabcontenu[I];
}
else if (document.getElementById) {
document.getElementById(D).style.display="block";
document.getElementById(D).innerHTML = tabcontenu[I];
}
}
function hiddediv(D) {
if (document.all) { document.all[D].style.display="none";}
else if (document.getElementById) { document.getElementById(D).style.display="none";}
}
</script>
Cette variable identifie l'indice d'un tableau javascript qui contient le contenu à afficher dans le div final :
<script language="javascript">
var tabcontenu = new Array(16);
tabcontenu[0] = "<div id=\"fermer\" class=\"fermer\" style=\"left:680px;\"><img src=\"photos/img_fixes/croix_fermer.png\" onclick=\"hiddediv('troncon')\" /></div><img src=\"photos/img_fixes/tours.jpg\" /> ";
tabcontenu[1] = "<div id=\"fermer\" class=\"fermer\" style=\"left:680px;\"><img src=\"photos/img_fixes/croix_fermer.png\" onclick=\"hiddediv('troncon')\" /></div><img src=\"photos/img_fixes/bordeaux.jpg\" />
tabcontenu[2] = etc etc ....
</script>
La div "fermer" est là simplement pour afficher la petite croix blanche sur fond rouge (même que c'est moi qui l'ai faite à la main et aux crayons de couleurs;) et qu'en cliquant dessus ça ferme la div.
Et enfin le div final qui affiche le contenu voulu :
<div id="troncon" class="popup"></div>
Le CSS qui va avec :
.popup {
top:300px;
left:20px;
width:700px;
height:auto;
border-top:#ffffff solid 2px;
border-left:#ffffff solid 2px;
border-right:#cccccc solid 3px;
border-bottom:#cccccc solid 3px;
background-color:#fedfa9;
position: absolute;
padding: 10px;
z-index:50;
display:none;
}
Et bien c'est l'image finale, par exemple "tours.jpg" qui ne s'affiche pas. Le div "troncon" apparait, l'emplacement de l'image aussi, mais rien à l'intérieur. Ou plutôt de façon très aléatoire, ça marche environ 1 foi sur 10. En plus des fois c'est la petite croix de la div "fermer" qui refuse de s'afficher.
Il y a forcément quelque chose que je ne sais pas au sujet de IE6 et de la compatibilité (en fait je ne sais pas grand chose, je suis loin d'être un kador). J'aimerai juste savoir si je peux espérer une solution ou si je dois complètement modifier le graphisme et la structure.
Si quelqu'un à une idée ..... je serai infiniment reconnaissante à toute personne voulant bien s'intéresser à mon soucis.
void);" que j'ai l'habitude d'utiliser et là le pb est réapparu.
