petit JS développé sur Firefox : grosse conséquence sur IE
Salut à tous !
Je n'ai pas l'habitude de poster car généralement on trouve tout sur les sujets déja crées mais là j'ai desesperement parcouru le net à la recherche d'une solution sans succes. J'ai developpé un tit site pour mes parents (le premier que j'ai fais, si vous avez des remarques je suis open) : edendescimes.com je l'ai dévellopé sous Linux et donc Firefox ... et là catastrophe ! Un tout petit script permet d'afficher des images lors d'un survol d'une maparea. Ce code ne marche que sous FF. IE et Safari ne répondent pas. Alors j'ai essayé de voir les problémes de compatibilité avec les fonctions utilisées mais ....
Donc je fais appel à vous car je ne sais pas comment résoudre ce probléme et que le temps me manque maintenant (ayant repris le boulot) et vu la grande majorité de IE sur le net ....
Je mets le lien vers la page en question
http://edendescimes.com/fr/php/appart.php
et le code JS pour ceux qui veulent aller à l'essentiel :D
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
|
<script type="text/javascript">
// <![CDATA[
if(!document.getElementById) document.getElementById=function (id) {
return eval("document.all."+id);
}
if (document.images){
preload = false;
url = new Array();
url[0] = "../../images/salon.jpg";
url[1] = "../../images/entree.jpg";
url[2] = "../../images/cuisine.jpg";
url[3] = "../../images/balcon.jpg";
url[4] = "../../images/balcon2.jpg";
url[5] = "../../images/cabine.jpg";
url[6] = "../../images/salledebain.jpg";
url[7] = "../../images/salon2.jpg";
url[8] = "../../images/chambre_haut_1.jpg";
url[9] = "../../images/chambre_haut_2.jpg";
url[10] = "../../images/etage1.jpg";
url[11] = "../../images/etage2.jpg";
url[12] = "../../images/salledebain_etage.jpg";
var i = 0;
for(i=0; i<12; i++)
{
tmp = new Image(640, 480) // a changer
tmp.src = url[i];
}
preload = true;
}
function changeImage(img_index) {
if (document.images && (preload == true)) {
if (document.getElementById("zoneImage").style.visibility == "hidden"){
document.getElementById("zoneImage").style.visibility = "visible" ;
}
document.getElementById("zoneImage").src = url[img_index];
}
}
function changeImageEtage(img_index) {
if (document.images && (preload == true)) {
if (document.getElementById("zoneImage_etage").style.visibility == "hidden"){
document.getElementById("zoneImage_etage").style.visibility = "visible" ;
}
document.getElementById("zoneImage_etage").src = url[img_index];
}
}
//]]>
</script> |
avec le XHTML qui va bien :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| <!-- zone d'affichage des photos RDC.... elle prend 80% de l'ecran par avance pour eviter les redimensionnements ... -->
<div id="DivImage" style="position:absolute" >
<img src="" id="zoneImage" style="visibility:hidden" alt="" height="350px" />
</div>
<!-- map utilise pour le RDC ... -->
<map name="map_rdc" id="map_rdc">
<area shape="rect" coords="99,208,128,232" onmouseover="changeImage(0);return false;" title="salon" href="#" alt="#" />
<area shape="rect" coords="147,434,171,454" onmouseover="changeImage(1);return false;" title="entrée" href="#" alt="#" />
<area shape="rect" coords="97,143,120,158" onmouseover="changeImage(2);return false;" title="cuisine" href="#" alt="#" />
<area shape="rect" coords="288,9,319,22" onmouseover="changeImage(3);return false;" title="balcon sur station" href="#" alt="#" />
<area shape="rect" coords="155,9,185,22" onmouseover="changeImage(4);return false;" title="balcon sur pistes" href="#" alt="#" />
<area shape="rect" coords="205,421,226,437" onmouseover="changeImage(5);return false;" title="chambre" href="#" alt="#" />
<area shape="rect" coords="88,378,117,397" onmouseover="changeImage(6);return false;" title="salle de bain" href="#" alt="#" />
<area shape="rect" coords="166,276,197,297" onmouseover="changeImage(7);return false;" title="salon" href="#" alt="#" />
</map>
<!-- image du plan .... quand click sur escaliers javascript change attribut src et attribut usemap en donnant le src de limage d'etage et le usemap testmap2 -->
<img src="../../images/appart_plan_rdc.jpg" usemap="#map_rdc" alt="Plan de l'appart" id="plan1" style="padding:0 0 0 480px" /> |
(il y a le meme avec l'étage)
Merci beaucoup à ceux qui prendrait le temps de m'aider qar je ne sais pas quoi faire .... C'est aussi la premiere fonction JS que je code ...:aie:
Bonne journée
