Affichage image lors d'un survol de lien

**Dawlon** · 27/11/2012, 20h44

Bonsoir,

Je sais que le topic est un peu présent partout sur le forum. Mais impossible de trouver ce que je souhaite faire.

Je résume :
j'ai une image

sur laquelle, j'ai placé sur chaque signe une copie du signe découper avec PS CS5. Chaque signe est un DIV et j'ai placer tout ça avec un css.

Le souci que j'ai maintenant, c'est que lorsque je passe ou cli sur le signe, je souhaite charger une image de la flamme située au dessus mais elle sera d'une autre couleur.

Vous trouverez ci-dessous les codes de ma pages web et du la page CSS.

CODE Page Web :

Code html :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Saint Seiya Ultimate</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
 
 
<!--Bélier-->
<div id="belier">
<a href="#">
<img id="belier" src="belier.png" width="61" height="31" /></a>
</div>
<!--Taureau-->
<div id="taureau">
<a href="#">
<img src="taureau.png" width="63" height="54" /></a>
</div>
 
<!--Gémeaux-->
<div id="gemeaux">
<a href="#">
<img src="gémeaux.png" width="57" height="65" /></a>
</div>
 
<!--Cancer-->
<div id="cancer">
<a href="#">
<img src="cancer.png" width="35" height="64" />
</a>
</div>
 
<!--Lyon-->
<div id="lyon">
<a href="#">
<img src="lyon.png" width="56" height="62" /> </a>
</div>
 
<!--Vierge-->
<div id="vierge">
<a href="#">
<img src="vierge.png" width="62" height="56" /></a>
</div>
 
<!--Balance-->
<div id="balance"><a href="#"><img src="balance.png" width="63" height="32" /></a>
</div>
 
<!--Scorpion-->
<div id="scorpion"><a href="#"><img src="scorpion.png" width="62" height="54" /></a>
</div>
 
<!--Sagitaire-->
<div id="sagitaire">
<a href="#">
<img src="sagitaire.png" width="55" height="65" /></a>
</div>
 
<!--Capricorne-->
<div id="capricorne">
<a href="#">
<img src="capircorne.png" width="33" height="63" /></a>
</div>
 
<!--Verseau-->
<div id="verseau"><a href="#"><img src="verseau.png" width="57" height="64" /></a>
</div>
 
<!--Poisson-->
<div id="poisson"><img src="poisson.png" width="65" height="57" />
</div>
 
</body>
</html>

CODE Page CSS

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
 
body {
	background-color: #fff;
	background:url(horloge.png) top left no-repeat;
	}
 
 
#belier{width:61px;height:31px;margin-top:62px;margin-left:109px;}
 
#taureau{width:61px;height:31px;margin-top:34px;margin-left:277px ;}
 
#gemeaux{width:61px;height:31px;margin-top:4px;margin-left:321px ;}
 
#cancer{width:61px;height:31px;margin-top:29px;margin-left:343px ;}
 
#lyon{width:61px;height:31px;margin-top:32px;margin-left:319px ;}
 
#vierge{width:61px;height:31px;margin-top:9px;margin-left:277px ;}
 
#balance{width:61px;height:31px;margin-top:-5px;margin-left:215px ;}
 
#scorpion{width:61px;height:31px;margin-top:-55px;margin-left:157px ;}
 
#sagitaire{width:61px;height:31px;margin-top:-76px;margin-left:120px ;}
 
#capricorne{width:61px;height:31px;margin-top:-89px;margin-left:118px ;}
 
#verseau{width:61px;height:31px;margin-top:-94px;margin-left:119px ;}
 
#poisson{width:61px;height:31px;margin-top:-67px;margin-left:156px ;}

J'espère avoir été le plus clair possible. Si vous avez besoin d'autres informations, ne pas hésiter à me demander !

Merci d'avance !

**DrDarko** · 28/11/2012, 10h36

Bonjour,
Tu ne sais pas comment procéder ou tu as essayer quelques choses qui n'a pas marché...?

Du coté CSS tu peux voir ce lien Effets Rollover à l'aide de :hover.

Sinon tu peux voir du coter des évènements jQuery et JavaScript, tu trouveras ton bonheur.

Si tu as fait quelque chose qui ne marche pas montre nous le bout de code que tu as pondu et les erreurs que tu as.

Invité · 28/11/2012, 13h26

Bonjour,
voici comment je procèderais :
1/ au lieu de mettre les images dans le HTML, je les mets en background dans le CSS.
2/ ce qui fait qu'avec :hover je peux changé ce background-image
3/ dans le HTML, je mets une image "vide" (transparente => vide.png), de sorte qu'on puisse cliquer dessus.
En clair, remplacer :

Code html :

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

1
2
3
4
<!--Bélier-->
<div id="belier">
<a href="#"><img id="belier" src="belier.png" width="61" height="31" /></a>
</div>

par :

Code html :

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

1
2
3
4
<!--Bélier-->
<div id="belier">
<a href="#"><img src="vide.png" width="61" height="31" alt="bélier" /></a>
</div>

et le CSS :

Code css :

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

1
2
3
4
5
6
7
#belier {
   width:61px; height:31px; margin-top:62px; margin-left:109px;
   background:url(../images/belier.png) no-repeat;  /* mettre le chemin relatif ENTRE le fichier CSS et le fichier image */
}
#belier:hover {
   background:url(../images/belier-hover.png) no-repeat; 
}

N.B. Un id doit être unique !

**Dawlon** · 29/11/2012, 17h41

Envoyé par DrDarko

Bonjour,
Tu ne sais pas comment procéder ou tu as essayer quelques choses qui n'a pas marché...?

Du coté CSS tu peux voir ce lien Effets Rollover à l'aide de :hover.

Sinon tu peux voir du coter des évènements jQuery et JavaScript, tu trouveras ton bonheur.

Si tu as fait quelque chose qui ne marche pas montre nous le bout de code que tu as pondu et les erreurs que tu as.

Ben disons les deux ! J'ai essayé le hover sauf que cela me remplace l'image sur laquelle je fais le survol ! Ce que je souhaite faire que, quand je survol ou clique sur une zone une autre image apparait à un endroit défini sur la page ...

Merci encore pour ton aide !

Edit :
C'est bon ca fonctionne super ! Comme indiquer dans le message plus bas, j'ai juste un souci de stabilité pour mon lien

**NoSmoking** · 29/11/2012, 18h00

Bonjour,
as tu essayé la démarche proposée par jreaux62?

Tu peux également regarder du coté de USEMAP.

**Dawlon** · 29/11/2012, 18h44

Envoyé par jreaux62

Bonjour,
voici comment je procèderais :
1/ au lieu de mettre les images dans le HTML, je les mets en background dans le CSS.
2/ ce qui fait qu'avec :hover je peux changé ce background-image
3/ dans le HTML, je mets une image "vide" (transparente => vide.png), de sorte qu'on puisse cliquer dessus.
En clair, remplacer :

Code html :

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

1
2
3
4
<!--Bélier-->
<div id="belier">
<a href="#"><img id="belier" src="belier.png" width="61" height="31" /></a>
</div>

par :

Code html :

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

1
2
3
4
<!--Bélier-->
<div id="belier">
<a href="#"><img src="vide.png" width="61" height="31" alt="bélier" /></a>
</div>

et le CSS :

Code css :

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

1
2
3
4
5
6
7
#belier {
   width:61px; height:31px; margin-top:62px; margin-left:109px;
   background:url(../images/belier.png) no-repeat;  /* mettre le chemin relatif ENTRE le fichier CSS et le fichier image */
}
#belier:hover {
   background:url(../images/belier-hover.png) no-repeat; 
}

N.B. Un id doit être unique !

Merci beaucoup !!! Ca marche super ^^
Je ne connaissais pas du tout l'astuce du "vide. png". Plus pratique ... Maintenant il ne me reste plus qu'à régler la stabilité du lien. car il n'arrete pas de clignoter et le lien n'est pas sur l'image même ... mais quelques mm à côté :/ je ne sais pas du tout pourquoi !

Merci encore

Invité · 29/11/2012, 19h46

Pour continuer avec "ma" méthode :

1/ Au lieu de mettre l'image principale (horloge.png) dans le <body>,
mets-la dans une <div>, en position:relative; englobant tous les autres <div> (astro).

2/ Mets tous les autres <div> (astro) en position:absolute;
et positionne-les avec top:..px; left:..px; (supprime les margin-top margin-left).

Sinon, NoSmoking t'a donné une autre piste, appropriée à ton cas : usemap

**Dawlon** · 30/11/2012, 01h58

Envoyé par NoSmoking

Bonjour,
as tu essayé la démarche proposée par jreaux62?

Tu peux également regarder du coté de USEMAP.

Oui je l'ai fait et ça marche très bien même ! Juste un petit souci avec le lien mais que je pense régler d'ici peu !

**Dawlon** · 30/11/2012, 04h54

Comme me l'a indiqué NoSmoking, j'ai fini par utilisé USEMAP ^^

J'ai crée deux zones cliquables (pour le moment, pour éviter de trop m'éparpiller. Il y en aura douze en tout ^^)

La première sur le signe du bélier. Je lui est attribué un hover et une image apparait (la bonne et au bon endroit surtout

le pied quoi ^^). Juste un souci. En plus de mettre un HOVER, j'ai mis un active pour que, quand je clique dessus, l'image qui apparait pendant le hover reste. Sauf que là, ben elle disparait (je redonne le nouveau code à la fin du message)

Ensuite, j'en ai créé une autre sur le signe du taureau et c'est là qu'est le plus gros problème. Pas de souci pour l'image en HOVER tout se passe bien de ce côté sauf qu'il m'affiche aussi celle que j'avais mise pour le bélier. Donc au lieu d'en avoir une ben j'en ai deux qui s'affiche. Et je ne vois pas du tout comment faire disparaitre celle du bélier pour qu'il ne me reste que celle du taureau, et ainsi de suite

J'espère me faire bien comprendre :/

Je joins le code CSS et le code de ma page en suivant :

Code CSS :

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
body {
	background-color: #fff;}
 
 
 
#belier:hover, #belier:active{
	position:absolute;
	width:46px;
	height:77px;
	margin-top:-492px;
	margin-left:223px;
    background:url(flamme-belier.png) no-repeat; 
}
 
#taureau:hover{
	position:absolute;
	width:49px;
	height:72px;
	margin-top:30px;
	margin-left:95px;
    background:url(flamme-taureau.png) no-repeat;
	}
 
#gemeaux:hover{
	position:absolute;
	width:47px;
	height:72px;
	margin-top:100px;
	margin-left:100px;
    background:url(flamme-gemeaux.png) no-repeat;
	}

Code page web :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Saint Seiya Ultimate</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
<script type="text/javascript">
			function MM_openBrWindow(theURL,winName,features) { //v2.0
			window.open(theURL,winName,features);
		}
</script>
 
 
<img src="horloge.png" width="499" height="500" border="0" usemap="#map"  />
 
<!--BELIER-->
<map name="map" id="belier">
  <area shape="poly" coords="219,120,282,121,274,155,228,154" onclick="MM_openBrWindow('belier-signe.html','','width=1000,height=300')" />
 
<!--TAUREAU-->  
<map name="map" id="taureau">
<area shape="poly" coords="280,156,320,181,344,154,289,123" href="#" />
 
 
<!--GEMEAUX-->
<map name="map" id="gemeaux">
<area shape="poly" coords="323,182,344,224,378,215,347,158" href="#" />  
 
</map>  
</body>
</html>

Et merci encore pour votre aide franchement

EDIT
Voici un lien permettant de voir un aperçu de ce que j'ai déjà fait !
http://essaisitecdz.perso.sfr.fr/ ^^ merci

Invité · 30/11/2012, 10h15

Bonjour,
ta syntaxe est mauvaise.
Il ne faut qu'une seule balise <map ...>.....</map>

**Dawlon** · 30/11/2012, 17h09

J'avoue que je ne sais pas pourquoi je l'ai mise à chaque fois ! Merci pour l'infos !

EDIT
Alors en fait, quand j'enlève name="map" à chaque signe, ça me désactive le HOVER :/ Du coup pour le moment, je préfère essayer de prendre un problème à la fois. C'est à dire comment faire pour qu'une seule image apparaisse et non toute quand je passe au deuxième signe voir +n.

**NoSmoking** · 02/12/2012, 14h30

Tu n'est toujours pas dans le cadre de la utilisation des MAP, reprend ce qui a été dit dans cette discussion pour recentrer le tout.

Invité · 02/12/2012, 15h30

Voici une solution :

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
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body { background-color: #fff; }
 
/* Horloge */
#horloge { 
	position:relative; 
	width:499px; 
	height:500px; 
}
#horloge img{ 
	width:499px; 
	height:500px; 
	border:0;
}
 
/* Positionnement des flammes bleues */
#flamme-belier {
	position:absolute;
	width:46px;
	height:77px;
	top:8px;
	left:223px;
    background:url(http://essaisitecdz.perso.sfr.fr/flamme-belier.png) no-repeat; 
}
 
#flamme-taureau {
	position:absolute;
	width:49px;
	height:72px;
	top:38px;
	left:318px;
    background:url(http://essaisitecdz.perso.sfr.fr/flamme-taureau.png) no-repeat;
	}
 
#flamme-gemeaux {
	position:absolute;
	width:47px;
	height:72px;
	top:110px;
	left:390px;
    background:url(http://essaisitecdz.perso.sfr.fr/flamme-gemeaux.png) no-repeat;
	}
#flamme-cancer {
	position:absolute;
	width:45px;
	height:79px;
	top:191px;
	left:413px;
    background:url(http://essaisitecdz.perso.sfr.fr/flamme-cancer.png) no-repeat;
	}	
 
#flamme-lyon {
	position:absolute;
	width:54px;
	height:72px;
	top:296px;
	left:381px;
    background:url(http://essaisitecdz.perso.sfr.fr/flamme-lyon.png) no-repeat;
	}
 
/* on masque les flammes bleues */
.flamme { 
	display:none; 
}
 
/* Affichage des flammes bleues */
#belier:hover #flamme-belier,
#taureau:hover #flamme-taureau,
#gemeaux:hover #flamme-gemeaux,
#cancer:hover #flamme-cancer,
#lyon:hover #flamme-lyon
/* ... */
{ 
	display:block; /* on affiche la flamme correspondante */
}
 
</style>
 
</head>

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
<body>
 
<div id="horloge">
	<img src="http://essaisitecdz.perso.sfr.fr/horloge.png" usemap="#horloge-map" alt="" />
 	<!-- ... -->
	<map name="horloge-map" id="horloge-map">
		<!--BELIER-->
		<div id="belier">
			<area shape="poly" coords="219,120,282,121,274,155,228,154" href="#" />
			<div class="flamme" id="flamme-belier"></div>
		</div>
		<!--TAUREAU-->  
		<div id="taureau">
			<area shape="poly" coords="280,156,320,181,344,154,289,123" href="#" />
			<div class="flamme" id="flamme-taureau"></div>
		</div>
		<!--GEMEAUX-->
		<div id="gemeaux">
			<area shape="poly" coords="323,182,344,224,378,215,347,158" href="#" />  
			<div class="flamme" id="flamme-gemeaux"></div>
		</div>
		<!--CANCER-->
		<div id="cancer">
			<area shape="poly" coords="380,219,379,281,345,273,347,229" href="#" />
			<div class="flamme" id="flamme-cancer"></div>
		</div>
		<!--LYON-->
		<div id="lyon">
			<area shape="poly" coords="344,280,377,289,347,341,321,317" href="#" />
			<div class="flamme" id="flamme-lyon"></div>
		</div>
	</map>  
</div>
</body>
</html>

N.B. Le signe astrologique est "Lion", pas "lyon"...

**Dawlon** · 02/12/2012, 16h30

Je ne sais pas comment te remercier franchement

tout fonctionne super bien !!! J'avais hésité à utiliser le DIV ayant eu des souci avec un essai avant :/ après pour le display none, ben je n'y avait pas du tout pensé !!

Je note tout ça franchement ! C'est super sympas de ta part d'avoir prit le temps de me réponse ! Merci encore !

Sinon pour le Lyon, je pense que je devais penser à la ville de Lyon en même temps !

Merci encore !

Affichage image lors d'un survol de lien

Survol d'un élément en CSS (:hover)

Discussions similaires

Partager

Partager