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 !