Show & Hide

**Friksstyle** · 23/02/2012, 14h44

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 !

**Golgotha** · 23/02/2012, 15h38

Bonjour,

Je n'ai pas pu tester ton cas, il manque les urls complètes des images (si elle sont en ligne).

Mais ça me semble bien complexe pour faire ce que tu dit.

J'ai réalisé une page simple faisant à peu près ce que tu veux faire, cela t'aidera peut être à y voir plus claire.

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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Datepicker - Default functionality</title>
	<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
	<script>
 
	$(function() {
 
		$('#s').hide();
		$('#v').hide();
		$('#m').hide();
 
 
		$('#sun').mouseover( function() { 
			  $('#s').animate({
					height: 'toggle'
					}, 500, function() {
				});
			});
 
		$('#sun').mouseout( function() { 
			$('#s').animate({
					height: 'toggle'
					}, 500, function() {
				});
		});
 
		$('#Venus').mouseover( function() { 
			  $('#v').animate({
					height: 'toggle'
					}, 500, function() {
				});
			});
 
		$('#Venus').mouseout( function() { 
			$('#v').animate({
					height: 'toggle'
					}, 500, function() {
				});
		});
 
		$('#Mercury').mouseover( function() { 
			  $('#m').animate({
					height: 'toggle'
					}, 500, function() {
				});
			});
 
		$('#Mercury').mouseout( function() { 
			$('#m').animate({
					height: 'toggle'
					}, 500, function() {
				});
		});
 
	});
	</script>
</head>
<body>
 
<html>
<body>
 
<img src="http://www.w3schools.com/tags/planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap" />
 
<map id = "planetmap" name="planetmap">
  <area id="sun" shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm" />
  <area id="Mercury" shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm" />
  <area id="Venus" shape="circle" coords="124,58,8" alt="Venus" href="venus.htm" />
</map>
 
<div id="m">Mercury</div>
<div id="v">Venus</div>
<div id="s">The Sun</div>
 
</body>
</html>
 
</body>
</html>

L'exemple est simple : lorsque le curseur passe sur une planète, cela fait apparaître une div avec son nom dessous, avec une petite animation.

**Friksstyle** · 23/02/2012, 16h03

Merci de ta réponse Golgotha,
cela m'a permis d'apprendre 2 ou 3 trucs.
Pas ce que je cherche à faire mais c'est toujours bon à prendre et pour apprendre.

En fait ce que je cherche à faire (en me basant sur ton exemple), c'est que lorsque je survole le soleil il y a une image qui viendrait par dessus le soleil.
Exemple: le soleil est jaune actuellement et lorsque je passe dessus une image (même taille et forme que le soleil) vient par dessus.
Du coup la zone cliquable est le soleil et lorsqu'on est dessus on met une image par dessus.
Donc techniquement nous ne sommes plus sur l'image et donc l'image de remplacement apparaît puis disparait.

Je suis en train de me battre pour faire ça (en Js standard et jQuery) mais je n'y arrive pas ....
Si tu as une piste je suis preneur.

Merci encore

Show & Hide

jQuery

Vue hybride

Discussions similaires

Partager

Partager