Bonjour à tous,
je suis en train de faire une petite mise en place de zone cliquable avec les balises map et de jouer avec les fonction show & hide de jQuery.
Voici le principe: J'ai des zones (pour l'instant une pour commencer) de forme polygonale sur ma page et j'aimerai qu'au survol de ces zones cliquables une div apparaissent.
Jusque là je suis arrivé à faire en sorte que:
- au passage de la souris le Div apparaissent
- lorsque la souris part de la zone la div se cache.

J'ai cependant un soucis au niveau de l'apparition de ma Div.
Lorsque je laisse ma souris sur la zone cliquable la fonction "show" de jquery s’exécute mais pas jusqu'à la fin.
Elle a peine le temps de se faire que mon élément Div (qui contient une image) se cache.
Et pourtant ma souris est toujours sur la zone cliquable.

Je ne comprends pas vraiment ...
Pour vous aider voici mon code (du moins le nécessaire):

JS/jQuery:
Code : 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
 
$().ready(function()
	{
		// positionnement du fond 
		var width=(100); 
		var posx= ($('#menu a.accueil').offset().left+10); 
		$('#underline').css( { width:width+'px', left:posx+'px' });
		$('#PC').hide();
 
 
		$('#menu li a').mouseover( function() { 
			// deplacement du fond 
			var width=(100);
			var posx= ($(this).offset().left+10);
			$('#underline').animate( { width:width+'px', left:posx+'px' }, { queue:false, duration:200 } );
		});
 
		$('#menu li a').mouseout( function() { 
			// deplacement du fond 
			var width=(100);
			var posx= ($('#menu a.accueil').offset().left+10);
			$('#underline').animate( { width:width+'px', left:posx+'px' }, { queue:false, duration:200 } );
		});
 
		$()
 
	});
 
 
 
	function Jshow(valeur, nom)
	{
		$('#'+nom).show();
	};
 
	function Jhide(valeur, nom)
	{
		$('#'+nom).hide();
	};
Et là mon HTML:
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
 
<div id="main">
			<map name="map">
				<area shape="poly" id="1" coords="96,273,164,268,166,315,181,322,181,326,110,334,105,330,104,292,103,290,96,288" href="./img/hoverPC.png" onmouseover="Jshow('1','PC')" onmouseout="Jhide('1', 'PC')" />
			</map>
			<div id="PC" style="z-index:5;position:absolute;margin-top:90px;margin-left:16px;">
				<img src="./img/hoverPC.png" />
			</div>
			<img src="./img/main-bg-2.png" width="935" height="640" border="0"  style="position:absolute" usemap="#map" />
 
		</div>
Est-ce que cela viendrai de mon hide au chargement du document qui mets le bazarre?
A savoir que j'ai essayé sans et en mettant un display none sur mon div et j'ai la même chose.

Merci d'avance de votre aide en tout cas !