Changer une image sur le hover

Version imprimable

Bonne nuit,

Je me lance corps et âme dans les sous-menus css, toutefois je ne comprends pas pourquoi le rollOver sur un élément de liste ne remplace pas img1.jpg par img2.jpg, jugez plutôt:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
div#nav {float: left; width: 7em; margin: -1px 0 0 -1px; }
div#nav ul {margin: 0; padding: 0; width: 7em; background: white;
  border: 1px solid #AAA;}
div#nav li {position: relative; list-style: none; margin: 0;
  border-bottom: 1px solid #CCC;}
div#nav li.submenu {background-image:url(img1.jpg);}
div#nav li.submenu:hover {background-image:url(img2.jpg);}
div#nav li a {display: block; padding: 0.25em 0 0.25em 0.5em;
  text-decoration: none; width: 6.5em;}
div#nav>ul a {width: auto;}
div#nav ul ul {position: absolute; top: 0; left: 7em;
  display: none;}
div#nav ul.level1 li.submenu:hover ul.level2, 
div#nav ul.level2 li.submenu:hover ul.level3 {display:block;}

et l'HTML:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
<div id="nav">
<ul class="level1">
	<li><a href="/">a</a></li>
	<li class="submenu"><a href="/services/">b</a>
			  <ul class="level2">
			   <li><a href="/services/strategy/">b1</a></li>
			   <li><a href="/services/optimize/">b2</a></li>
			   <li> </ul>
	</li>
	<li><a href="/events/">c</a></li>
</ul>
</div>

Ce livre provient du bouquin de Meyer, je précise que j'appelle bien csshover.htc qui permet sous IE le :hover pour des balises autres que <a>
Merci pour vos lanternes!

05/11/2006, 00h18
Auteur
bonjour,

Certes je ne t'apprends rien mais :
Code:

1 2 3 div#nav li.submenu {background-image:url(img1.jpg);} div#nav li.submenu:hover {background-image:url(img2.jpg);}
le hover ne fonctionne que sur des balise a sous IE.

Citation:

Ce livre provient du bouquin de Meyer, je précise que j'appelle bien csshover.htc qui permet sous IE le :hover pour des balises autres que <a>

Le problème est que nous nous ne savons pas ce qu'est csshover.htc :(
05/11/2006, 11h46
viviboss

...... Moi non plus je ne sais pas ce que c'est, mais je me dis que ca ne peut venir que de là : il serait relativement aisé de changer ton code afin d'utiliser les "a:hover", et tu verra ca passera omme une lettre à la poste !!!;)
05/11/2006, 12h08
taffMan

Mais pourtant le :hover est detecté car csshover.htc permet d'étendre les capacités de survol à tous les éléments dans IE/win. C'est magique, le pb est que au lieu de remplacer l'image par une autre, l'image disparaît, voilà tout. Par contre on peut remplacer la couleur d'arrière-plan.:roll:

Je vais voir ce que je peux faire en me contentant d'un a:hover, et me renseigner plus avant sur csshover.htc;)
05/11/2006, 12h15
Auteur

ça ne serait pas plus simple d'utiliser onmouseover et onmouseout ?
05/11/2006, 15h56
taffMan

je crains que l'utilisation de javascript aille à l'encontre des standards oueb n'est-il pas?
05/11/2006, 15h57
Bisûnûrs

Citation:

Envoyé par taffMan

je crains que l'utilisation de javascript aille à l'encontre des standards oueb n'est-il pas?

Depuis quand ?
05/11/2006, 16h22
viviboss

Javascript est un langage ECMA (labélisé au niveau Européen) client. Tu confond "standard web" et, je dirais, recommandation.

En effet, il n'est pas souhaitable de programmer un site 100% javascript, il faut l'utiliser avec parcimonie car trop tributaire du client (il suffit de désactiver javascript et ca met la grouille....:lol: )

C'est un très bon complément à des langages comme PHP qui sont situés serveur, mais la recommandation est quand même la suivante : tant que tu peux faire autrement, n'utilise pas Javascript (bref, faut pas en abuser :mouarf: Mais c'est comme tout.....)

Le jour ou tu voudra faire de l'AJAX, tu sera bien obligé d'y toucher de toute les facons !!!!:mouarf:

L'Ajax justement j'y viens!! C'est tout de même ennuyeux de devoir recharger la page pour faire une requête MySQL, et un peu d'interractivité semble bienvenu dans ces utilitaires côtés serveur si peu fantaisistes que je développe humblement!

Pour en revenir au menu déroulant je l'ai développé en js mais il faut admettre qu'il faut 4 fois plus de code qu'en 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
<script type="text/javascript">
 
	function init(){
		urlInit = Array("ressources/btns/fontaines-bureaux.jpg", "ressources/btns/fontaines-passe-partout.jpg", 
		"ressources/btns/fontaines-ecoles-sport.jpg", "ressources/btns/fontaines-industries.jpg", 
		"ressources/btns/fontaines-collectivites.jpg", "ressources/btns/fontaines-universites.jpg");
 
		for(var i = 1; i <= 6; i++){
				document.getElementById("btn" + i).style.backgroundImage = "url(" + urlInit[i - 1] + ")";
			} 
	}
 
	function over(obj, url){
		obj.style.backgroundImage = "url(" + url + ")";
	}
 
	function out(obj, url){
		if(obj.clicked == false || obj.clicked == undefined){
			obj.style.backgroundImage = "url(" + url + ")";
		}
	}
 
	function cache(i){
 
		if(document.getElementById("submenu" + i).style.display == "block"){
			document.getElementById("submenu" + i).style.display = "none";
		}
		document.getElementById("btn" + i).style.backgroundImage = "url(" + urlInit[i - 1] + ")";
		document.getElementById("btn" + i).clicked = false; 
	}
 
	function afficheSousMenu(obj, num, url){
		over(obj, url);
		obj.clicked = true;
		document.getElementById("submenu" + num).style.display = "block";
 
		if(num == 1){
 
			for(var i = 2; i <= 6; i++){
				cache(i, url);
			}
 
		}else if(num == 2){
 
				cache(1, url)
 
		for(var i = 3; i <= 6; i++){
 
				cache(i, url);
 
			}
 
 
		}else if(num > 2){
 
			num = Number(num);
 
			for(var i = 1; i < num; i++){
 
				cache(i, url);
 
			}
 
			for(var j = num + 1; j <= 6; j++){
 
				cache(j, url);
 
			}  
		}
}
</script>

Sans parler des gestionnaires dévènements et des paramètres des fonctions!

J'ai tout essayé en CSS et je ne suis pas parvenu à faire un sous-menu comme celui-ci http://www.htmldog.com/articles/suck...owns/example/# en jouant uniquement sur l'image d'arrière plan de la balise <li>:(