Discussion :

[numerodix]

Bonjour à tous,
J'aurais besoin d'un coup de main pour un problème de javascript...
J'ai plusieurs images superposées les unes sur les autres :

Code :

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

1
2
3
4
5
 
<img src="map.png" id="imgMap" alt="Map" usemap="#map"/>
<img src="1.png" id="map1" alt="Map 1" usemap="#map1" class="sousMap" />
<img src="2.png" id="map2" alt="Map 2" usemap="#map2" class="sousMap" />
<img src="3.png" id="map3" alt="Map 3" usemap="#map3" class="sousMap" />

La première image à la propriété visibility:visible, et les autres hidden. Il s'agit d'images cliquable. Ainsi au clic sur la zone 1, je cherche à cacher la première image (id:imgMap) et afficher l'image avec l'id "map1", au clic sur la zone 2, il faut afficher l'image "map2", etc...
Tout fonctionne très bien sur Firefox, mais sous IE7, les "sous-images" ne s'affichent pas. L'événement "click" est bien executé, l'image "map.png" est bien cachée mais l'autre image ne s'affiche pas.
Voici mon code JS (Mootools) :

Code :

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

1
2
3
4
5
6
7
8
9
 
$$('#imgMap area').addEvents({
	'click':function(){
		$('imgMap').fade("hide");
		var map = 'map'+this.get("id");
		$(map).fade("show");
		return false;
	}
});

J'ai tout essayé, utiliser $(map).setStyle('visibility','visible') à la place de fade("show"), utiliser display : none/block à la place de visibility, mettre les images dans des div et cacher/afficher les div... Ça fonctionne toujours sous Firefox, mais jamais sous IE...

Merci d'avance pour votre aide !

[SpaceFrog]

mets un css display none dans le callback du fade ?
ou modifies son z-index...
visibility ne supprime pas l'image du flux

[numerodix]

J'ai essayé de modifier le z-index sans succès...
Pareil pour display block.

Je viens de tester en supprimant la position "absolute" de mes images. Ainsi elles ne sont plsu superposées et on a un truc du style :
[image principale]
[sous-image1]
[sous-image2]
[sous-image3]

Sous firefox et sous IE , les images sont bien présentes (les sous-images sont invisibles, normal).
Sous firefox, au clic sur la zone 1, l'image principale disparait et la sous-image1 devient visible. Tandis que sous IE, l'image principale disparait mais la sous-image1 reste invisible...

Edit : J'ai également essayé en utilisant opacity (filter:alpha(opacity=x)) à la place de visibility, et c'est la meme chose

[SpaceFrog]

j'ai répondu il y a un mois ou deux à un souci de map sur des images ...

[numerodix]

Mais à mon avis le problème ne vient pas des map, juste de l'image... Au pire, si ça venait de la map, l'image s'afficherait et les zones cliquables ne fonctionneraient pas, non ?
Et dans le pire des cas, tu penserais à une solution de remplacement ? J'avoue que je ne vois pas comment faire autrement...

[Gsnalf]

Donne nous plus de code, par exemple la CSS associée, ça serait cool

[numerodix]

Voici la CSS associée

Code :

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

1
2
3
4
5
6
7
8
9
10
#imgMap {
	position:absolute;
	visibility:visible;
}
 
#map1,#map2,#map3{
	visibility:hidden;
	position:absolute;
	z-index:99;
}

[SpaceFrog]

Code :

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

1
2
3
4
5
#map1,#map2,#map3{
	visibility:hidden;
	position:absolute;
	z-index:99;
}

pas visibmlity !!
display:none
tu les passes en block au besoin ...