Changement image par hover

Version imprimable

Bonjour à tous,

dans le cadre d'un cours de programmation web, j'ai réalisé un site (incomplet). Malheureusement, je suis bloqué au niveau du CSS. Je n'arrive pas à déterminer comment une image placée comme image de menu pourrait changer d'URL lors du passage de la souris sur celle-ci.

Voici les différents codes :

HTML :

Code:

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/1999/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml1" xml:lang="fr">
	<head>
		<title>Dead World</title>
		<meta http-equiv="Content-Type"	content="text/html" charset=iso-8859-1"/>
		<link rel="stylesheet" type="text/css" href="style.css"/>
	</head>
	<body>
		<div id=fond>
			<div id=entete>
				<div id=logo>
 
				</div>
			</div>
			<div id=menu>
				<ul>
					<li><img src="images/btn01.png"/>
						<ul>
							<li><a href="http://www.google.com">menu 1.1</a></li>
							<li><a href="http://www.google.com">menu 1.2</a></li>
							<li><a href="http://www.google.com">menu 1.3</a></li>
						</ul>
					</li>
					<li><img src="images/btn02.png"/>
						<ul>
							<li><a href="http://www.google.com">menu 2.1</a></li>
							<li><a href="http://www.google.com">menu 2.2</a></li>
						</ul>
					</li>
					<li><img src="images/btn03.png"/>
						<ul>
							<li><a href="http://www.google.com">menu 3.1</a></li>
							<li><a href="http://www.google.com">menu 3.2</a></li>
							<li><a href="http://www.google.com">menu 3.3</a></li>
						</ul>
					</li>
					<li><img src="images/btn04.png"/>
						<ul>
							<li><a href="http://www.google.com">menu 4.1</a></li>
							<li><a href="http://www.google.com">menu 4.2</a></li>
							<li><a href="http://www.google.com">menu 4.3</a></li>
							<li><a href="http://www.google.com">menu 4.4</a></li>
							<li><a href="http://www.google.com">menu 4.5</a></li>
							<li><a href="http://www.google.com">menu 4.6</a></li>
							<li><a href="http://www.google.com">menu 4.7</a></li>
						</ul>
					</li>
				</ul>
			</div>
			<div id=marge>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eget enim sed lacus faucibus hendrerit eu nec diam. Ut lacus diam, convallis in ornare aliquet, fermentum id purus. Nunc vitae purus dui. In quis nibh eget libero
			</div>
			<div id=contenu>
				<center><h1>Titre 1</h1></center>
				<h2>Titre 2</h2>
				<div id=textarea>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eget enim sed lacus faucibus hendrerit eu nec diam. Ut lacus diam, convallis in ornare aliquet, fermentum id purus. Nunc vitae purus dui. In quis nibh eget libero egestas bibendum pretium cursus mauris. Nulla facilisi. Sed in massa eu sapien gravida lacinia. Suspendisse potenti. Curabitur lacinia sollicitudin enim at laoreet. Nunc vitae hendrerit dolor. Nullam dapibus scelerisque enim, in mollis eros rhoncus vel. Quisque tortor ipsum, tincidunt sed consequat vel, consectetur in nulla. Sed aliquet pulvinar pellentesque. Pellentesque eget odio id tellus accumsan congue vel sed tortor. Nulla ultricies, dolor sed adipiscing accumsan, leo mi tincidunt mi, eget mattis libero felis eu arcu. Ut egestas placerat volutpat. Mauris nec tempus erat. Pellentesque sem tellus, fringilla nec auctor sit amet, faucibus ac lectus. Quisque nibh velit, scelerisque ac rutrum ac, fermentum eleifend mi. Praesent eu odio nec felis aliquet bibendum sed et orci.
 
				Nullam gravida, felis sit amet tincidunt consectetur, ligula massa dapibus mi, nec bibendum felis urna non odio. Proin tempor leo quis nunc faucibus ultricies. Vestibulum non fermentum dui. Ut pretium sapien id massa bibendum sagittis. Phasellus egestas, eros nec auctor porttitor, ipsum nibh ultricies nibh, et sollicitudin nulla odio quis mi. In a pulvinar lacus. Maecenas dolor est, varius nec imperdiet a, vulputate quis magna. Ut posuere dignissim nisl, eu tempor tellus vehicula sit amet. Proin posuere lectus libero. Maecenas sit amet lacinia diam. Praesent diam enim, tincidunt quis ultricies non, condimentum tincidunt massa. Nam faucibus ipsum eget enim vehicula iaculis. Nulla facilisi. Nam sit amet leo ut mauris convallis elementum ut at arcu. Suspendisse potenti. Nulla nec diam ut velit rutrum eleifend. Aliquam gravida elit at nibh blandit in vulputate ipsum accumsan. Maecenas iaculis, arcu eu scelerisque sodales, sapien nunc consectetur lacus, semper porta lorem augue et enim. Aenean consectetur hendrerit blandit. Maecenas et tortor odio.
 
				Sed blandit urna eu erat sollicitudin fermentum. Quisque mattis pellentesque orci ut condimentum. Nam posuere ipsum id diam congue a iaculis massa commodo. Aenean rhoncus tempor mauris, a fermentum nisi molestie nec. Ut tincidunt tortor ante, in suscipit nisi. Suspendisse posuere risus ac est elementum vel luctus metus lobortis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla sit amet lacus ut erat pretium laoreet. Sed faucibus feugiat mi bibendum convallis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tincidunt libero vitae mi porta semper. Integer sed imperdiet ligula. Pellentesque pretium pulvinar sapien sagittis posuere.
 
				Aenean quis arcu a leo auctor mollis eu et ipsum. Sed eros tellus, fermentum eu rhoncus et, condimentum sed lacus. Nulla et malesuada nibh. Quisque rutrum elit et ipsum hendrerit tristique. Donec enim magna, congue nec gravida quis, scelerisque vitae lacus. Sed consequat neque non sapien placerat laoreet. Donec nisi nulla, imperdiet non vestibulum at, commodo sed est. Praesent nec lorem ipsum, ut vulputate erat. Phasellus ultrices metus ac lacus pulvinar sagittis. Nunc ac rhoncus mauris. Maecenas pharetra dolor a tellus scelerisque commodo. Nam interdum quam eu nisi feugiat viverra. Sed volutpat tempor felis vitae posuere. Integer tempus turpis id nisi ultrices vitae mollis augue malesuada. Maecenas non odio et nisi luctus consectetur. Curabitur sagittis nisi ac ligula porttitor fermentum. Sed ut nibh sagittis risus ullamcorper semper. Nulla vel felis nisi, vitae gravida ante. Sed sit amet ante urna.
 
				Proin semper auctor vestibulum. Nulla facilisi. Aliquam porta, augue vel convallis aliquam, dui lectus laoreet sem, id tristique tortor leo sit amet velit. Morbi viverra, nisl ut auctor consequat, augue sem pellentesque dui, mattis consectetur justo mauris non ante. Sed volutpat ullamcorper dui vel tempus. Maecenas fermentum leo vitae dolor fermentum eu scelerisque lorem ullamcorper. Curabitur ornare pulvinar odio ac consequat. Quisque imperdiet arcu id est cursus sollicitudin eget non sem. Quisque varius facilisis ante at fringilla. Sed massa nisi, faucibus in adipiscing faucibus, accumsan nec eros. Fusce euismod lacinia metus, quis egestas diam mollis sit amet. Vivamus gravida porta lectus eu lacinia. 
				</div>
			</div>
			<div id=pied>
				Copyright © 2010 ISIMs
			</div>
		</div>
	</body>
</html>

CSS :

Code:

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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
a {
	text-decoration:none;
	color:white;
	}
 
html  {
	height:100%;
	margin:0;
	padding:0;
	}
 
body {
	height:100%;
	margin:0;
	padding:0;
	background-color:#000;
	font-family:"arial";
	}
 
ul {
	margin:0px 0px;
	padding:0px;
	}
 
#fond {
	background-image:url(images/fond.jpg);
	background-color:black;
	background-repeat:no-repeat;
	text-align:left; /* Internet Explorer 6 et ultérieurs prennent les div comme du texte. Nous contredirons cet alignement plus bas */
	margin:0 auto;
	width:800px;
		}
#entete {
	background-image:url(images/ban.png);
	background-repeat:no-repeat;
	height:266px;
		}
#menu {
	padding:0px 85px;
		}
#contenu {
	padding:0px 30px;
	height:600px;
	width:650px;
		}
#textarea {
	background-image:url(images/transpa.png);
	overflow:scroll;
	height:350px;
}
#marge {
	padding:60px 20px;
	text-align:right;
	float:right;
	width:150px;
		}
#pied {
	padding-top:15px;
	clear:both;
	height:50px;
	text-align:center;
		}
 
li #menu {
	width:150px;
	height:20px;
	background-image:url(image/btn01.png);
		}
 
#menu ul {
	padding:0px;
	margin:0px;
	}		
 
#menu ul li {
	display:inline;
	position:relative;
		}
 
#menu li li {
	padding:0;
	width:100px;
	display:block;
	position:relative;
		}		
 
#menu ul ul {
	padding:0;
	display:none;
	position:absolute;
	left:0px;
	top:28px;
	width:100px;
	background-image:url(images/transpa.png)
		}
 
#menu li{
	padding:0px 7px;
		}
 
#menu li:hover ul {
	display:block;
		}
 
#gallerie {
	width:80px;
		}
 
#grand_cadre {
	width:300px;
		}

J'ai pensé à utiliser du javascript mais j'aimerais utiliser cette méthode uniquement en cas de nécessité (surtout que je ne suis pas certain que le hover utilisé sur mes ul et le mouseOn du javascript ne se tueraient pas).

Merci d'avance pour votre aide !

25/04/2010, 17h37
Yorick

Salut,

En effet pas besoin de JS.

2 options en CSS :

- la simple : changer l'url du background-image sur le element:hover
(d'ailleurs tu l'as pas mis sur le <a>, ça risque de ne pas être pris en compte sur certains navigateurs IE - je sais plus quels versions)

- la "mieux" : modifier le background-position
Le principe est d'enregistrer les différents états du bouton sur une même image et de faire varier sa position.
Avantages: moins de requêtes et pas de "flash" de chargement au premier survol.
Recherche avec "css sprite".

D'accord, merci pour ta réponse.
Je regarde ça de suite et je reviens dès qu'il y a du neuf :).

[edit]

J'ai réussi à coder ce que tu m'as proposé mais je me retrouve face à un nouveau dilemme : je ne peux pas contrôler la largeur des boutons du menu. J'ai beau chercher, je ne trouve pas la source de l'erreur. Il est fort probable que j'ai fait une erreur très très idiote, surtout vu l'heure qu'il est...

Quoiqu'il en soit, voici mon code à l'heure actuelle :

HTML

Code:

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/1999/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml1" xml:lang="fr">
	<head>
		<title>Dead World</title>
		<meta http-equiv="Content-Type"	content="text/html" charset=iso-8859-1"/>
		<link rel="stylesheet" type="text/css" href="style.css"/>
	</head>
	<body>
		<div id=fond>
			<div id=entete>
				<div id=logo>
 
				</div>
			</div>
			<div id=menu>
				<ul>
					<li><a href="http://www.google.com" class="site">SITE SITE SITE</a>
						<ul>
							<li><a href="http://www.google.com">menu 1.1</a></li>
							<li><a href="http://www.google.com">menu 1.2</a></li>
							<li><a href="http://www.google.com">menu 1.3</a></li>
						</ul>
					</li>
					<li><a href="http://www.google.be" class="medias">MEDIAS MEDIAS MEDIAS</a>
						<ul>
							<li><a href="http://www.google.com">menu 2.1</a></li>
							<li><a href="http://www.google.com">menu 2.2</a></li>
						</ul>
					</li>
					<li><a href="http://www.google.be" class="achat">ACHAT ACHAT ACHAT</a>
						<ul>
							<li><a href="http://www.google.com">menu 3.1</a></li>
							<li><a href="http://www.google.com">menu 3.2</a></li>
							<li><a href="http://www.google.com">menu 3.3</a></li>
						</ul>
					</li>
					<li><a href="http://www.google.be" class="conseils">CONSEILS CONSEILS</a>
						<ul>
							<li><a href="http://www.google.com">menu 4.1</a></li>
							<li><a href="http://www.google.com">menu 4.2</a></li>
							<li><a href="http://www.google.com">menu 4.3</a></li>
							<li><a href="http://www.google.com">menu 4.4</a></li>
							<li><a href="http://www.google.com">menu 4.5</a></li>
							<li><a href="http://www.google.com">menu 4.6</a></li>
							<li><a href="http://www.google.com">menu 4.7</a></li>
						</ul>
					</li>
				</ul>
			</div>
			<div id=marge>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eget enim sed lacus faucibus hendrerit eu nec diam. Ut lacus diam, convallis in ornare aliquet, fermentum id purus. Nunc vitae purus dui. In quis nibh eget libero
			</div>
			<div id=contenu>
				<center><h1>Titre 1</h1></center>
				<h2>Titre 2</h2>
				<div id=textarea>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eget enim sed lacus faucibus hendrerit eu nec diam. Ut lacus diam, convallis in ornare aliquet, fermentum id purus. Nunc vitae purus dui. In quis nibh eget libero egestas bibendum pretium cursus mauris. Nulla facilisi. Sed in massa eu sapien gravida lacinia. Suspendisse potenti. Curabitur lacinia sollicitudin enim at laoreet. Nunc vitae hendrerit dolor. Nullam dapibus scelerisque enim, in mollis eros rhoncus vel. Quisque tortor ipsum, tincidunt sed consequat vel, consectetur in nulla. Sed aliquet pulvinar pellentesque. Pellentesque eget odio id tellus accumsan congue vel sed tortor. Nulla ultricies, dolor sed adipiscing accumsan, leo mi tincidunt mi, eget mattis libero felis eu arcu. Ut egestas placerat volutpat. Mauris nec tempus erat. Pellentesque sem tellus, fringilla nec auctor sit amet, faucibus ac lectus. Quisque nibh velit, scelerisque ac rutrum ac, fermentum eleifend mi. Praesent eu odio nec felis aliquet bibendum sed et orci.
 
				Nullam gravida, felis sit amet tincidunt consectetur, ligula massa dapibus mi, nec bibendum felis urna non odio. Proin tempor leo quis nunc faucibus ultricies. Vestibulum non fermentum dui. Ut pretium sapien id massa bibendum sagittis. Phasellus egestas, eros nec auctor porttitor, ipsum nibh ultricies nibh, et sollicitudin nulla odio quis mi. In a pulvinar lacus. Maecenas dolor est, varius nec imperdiet a, vulputate quis magna. Ut posuere dignissim nisl, eu tempor tellus vehicula sit amet. Proin posuere lectus libero. Maecenas sit amet lacinia diam. Praesent diam enim, tincidunt quis ultricies non, condimentum tincidunt massa. Nam faucibus ipsum eget enim vehicula iaculis. Nulla facilisi. Nam sit amet leo ut mauris convallis elementum ut at arcu. Suspendisse potenti. Nulla nec diam ut velit rutrum eleifend. Aliquam gravida elit at nibh blandit in vulputate ipsum accumsan. Maecenas iaculis, arcu eu scelerisque sodales, sapien nunc consectetur lacus, semper porta lorem augue et enim. Aenean consectetur hendrerit blandit. Maecenas et tortor odio.
 
				Sed blandit urna eu erat sollicitudin fermentum. Quisque mattis pellentesque orci ut condimentum. Nam posuere ipsum id diam congue a iaculis massa commodo. Aenean rhoncus tempor mauris, a fermentum nisi molestie nec. Ut tincidunt tortor ante, in suscipit nisi. Suspendisse posuere risus ac est elementum vel luctus metus lobortis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla sit amet lacus ut erat pretium laoreet. Sed faucibus feugiat mi bibendum convallis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tincidunt libero vitae mi porta semper. Integer sed imperdiet ligula. Pellentesque pretium pulvinar sapien sagittis posuere.
 
				Aenean quis arcu a leo auctor mollis eu et ipsum. Sed eros tellus, fermentum eu rhoncus et, condimentum sed lacus. Nulla et malesuada nibh. Quisque rutrum elit et ipsum hendrerit tristique. Donec enim magna, congue nec gravida quis, scelerisque vitae lacus. Sed consequat neque non sapien placerat laoreet. Donec nisi nulla, imperdiet non vestibulum at, commodo sed est. Praesent nec lorem ipsum, ut vulputate erat. Phasellus ultrices metus ac lacus pulvinar sagittis. Nunc ac rhoncus mauris. Maecenas pharetra dolor a tellus scelerisque commodo. Nam interdum quam eu nisi feugiat viverra. Sed volutpat tempor felis vitae posuere. Integer tempus turpis id nisi ultrices vitae mollis augue malesuada. Maecenas non odio et nisi luctus consectetur. Curabitur sagittis nisi ac ligula porttitor fermentum. Sed ut nibh sagittis risus ullamcorper semper. Nulla vel felis nisi, vitae gravida ante. Sed sit amet ante urna.
 
				Proin semper auctor vestibulum. Nulla facilisi. Aliquam porta, augue vel convallis aliquam, dui lectus laoreet sem, id tristique tortor leo sit amet velit. Morbi viverra, nisl ut auctor consequat, augue sem pellentesque dui, mattis consectetur justo mauris non ante. Sed volutpat ullamcorper dui vel tempus. Maecenas fermentum leo vitae dolor fermentum eu scelerisque lorem ullamcorper. Curabitur ornare pulvinar odio ac consequat. Quisque imperdiet arcu id est cursus sollicitudin eget non sem. Quisque varius facilisis ante at fringilla. Sed massa nisi, faucibus in adipiscing faucibus, accumsan nec eros. Fusce euismod lacinia metus, quis egestas diam mollis sit amet. Vivamus gravida porta lectus eu lacinia. 
				</div>
			</div>
			<div id=pied>
				Copyright © 2010 ISIMs
			</div>
		</div>
	</body>
</html>

CSS

Code:

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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
a {
	text-decoration:none;
	color:white;
	}
 
html  {
	height:100%;
	margin:0;
	padding:0;
	}
 
body {
	height:100%;
	margin:0;
	padding:0;
	background-color:#000;
	font-family:"arial";
	}
 
ul {
	margin:0px 0px;
	padding:0px;
	}
 
#fond {
	background-image:url(images/fond.jpg);
	background-color:black;
	background-repeat:no-repeat;
	text-align:left; /* Internet Explorer 6 et ultérieurs prennent les div comme du texte. Nous contredirons cet alignement plus bas */
	margin:0 auto;
	width:800px;
		}
#entete {
	background-image:url(images/ban.png);
	background-repeat:no-repeat;
	height:266px;
		}
#menu {
	padding:0px 85px;
		}
#contenu {
	padding:0px 30px;
	height:600px;
	width:650px;
		}
#textarea {
	background-image:url(images/transpa.png);
	overflow:scroll;
	height:350px;
}
#marge {
	padding:60px 20px;
	text-align:right;
	float:right;
	width:150px;
		}
#pied {
	padding-top:15px;
	clear:both;
	height:50px;
	text-align:center;
		}
 
li #menu {
	width:150px;
	height:20px;
		}
 
#menu ul {
	padding:0px;
	margin:0px;
	}		
 
#menu ul li {
	display:inline;
	position:relative;
		}
 
#menu li li {
	padding:0;
	width:100px;
	display:block;
	position:relative;
		}		
 
#menu ul ul {
	padding:0;
	display:none;
	position:absolute;
	left:0px;
	top:28px;
	width:100px;
	background-image:url(images/transpa.png)
		}
 
#menu li{
	padding:0px 0px;
		}
 
#menu li:hover ul {
	display:block;
		}
 
#menu ul li a.site{
	height:20;
	width:120px;	
	background-image:url(images/btn01.png);
		}
 
#menu ul li a.medias{
	height:20px;
	width:120px;
	background-image:url(images/btn02.png);	
		}
 
#menu ul li a.achat{
	height:20px;
	width:120px;
	background-image:url(images/btn03.png);	
		}
 
#menu ul li a.conseils{
	height:20px;
	width:120px;
	background-image:url(images/btn04.png);	
		}
 
#menu ul li a:hover{
	background-position:0px -20px;
		}

Encore merci pour votre aide !