Discussion :

[Federico_muy_bien]

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

Code Javascript :

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
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 XHTML :

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
<!-- 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&eacute;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 ...

Bonne journée

[Bovino]

Salut,

Tout d'abord, ton script fonctionne correctement avec IE8 (pas pu tester sur d'autres versions).
Ensuite, quelques remarques sur ton script :

Code :

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

1
2
3
if(!document.getElementById) document.getElementById=function (id) {
	return eval("document.all."+id);
}

Ce genre de fonction était utiles il y a quelques années, aujourd'hui, je pense que l'on peut considérer que getElementById est accepté par tous les navigateurs

Code :

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

if (document.images)

Là encore, je n'ai pas connaissance de navigateurs qui n'implémentent pas le tableau images.

Code :

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

url = new Array();

Il est nécessaire d'utiliser le mot clé var pour déclarer ses variables, sinon, ça peut perturber IE (voir la FAQ) de plus, "url" n'est pas un bon choix de nommage, URL étant déjà un nom de propriété de l'objet document (même si JavaScript est sensible à la casse, c'est pas conseillé).

Code :

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

1
2
tmp = new Image(640, 480)
tmp.src = url[i];

Là encore, il faudrait utiliser le mot clé var.
Ceci dit, il est fort possible que l'erreur vienne de là. Tu modifies le src avant que l'image ait eu le temps de se charger, il est donc possible que certains navigateurs mettent en cache une image vide...
Ceci dit, puisqu'il s'agit juste de la mise en cache, inutile d'utiliser une variable ni de dimensions :

Code :

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

1
2
3
for(i=0; i<12; i++){
   new Image(0,0).src = url[i];
}

[Federico_muy_bien]

Salut Bovino !!
Merci beaucoup pour ton aide j'ai fait les changements que tu m'as signifié (je parle bien !)

Je pencherais sur la mise en cache d'image vide !!
Donc 1ere question comment attendre que le chargement des images soit terminée ?

2eme question : la map est constituée de petites zones qui sont des liens mais qui ne font que déclencher des fonctions JS onmouseover:"blabla". Sur firefox le curseur se transforme en main comme pour les liens mais pas sous IE .... Est ce que cela pourrait etre un probléme de HTML ???

Merci pour tes précisions !

**EDIT** : Meme probleme sous Safari 4 (j'ai safari 4 public beta)

[Federico_muy_bien]

Je up mon probléme car je n'ai pas toujours pas trouvé la solution ....
J'ai fait les changements : mettre var, changer le nom de la variable url (j'ai mis chemin), et la creation de l'image .... ça marche toujours sous Firefox et IE8 mais IE<=7 + Safari 4 + Konqueror ...

Alors j'ai vu qu'il y avait des problémes avec les map sous IE mais j'ai mis le # dans le usemap comme il est conseillé de le faire pour IE et il y a toujours le même probléme ...

Encore merci à la personne qui prendra un peu de temps pour m'aider ....