Remplacer l'image d'un div au passage de la souris

Version imprimable

26/05/2007, 12h26
koskoz

Remplacer l'image d'un div au passage de la souris

Salut tout le monde,
j'explique mon problème.

J'ai ce menu.
Au passage de la souris sur l'un des liens situés à gauche, il faudrait que mon div principal (celui en rouge) change de couleur.

J'ai regardé du côté du javascript et du framework script.aculo mais je n'ai rien trouvé de concret ne connaissant pas grand chose à ce langage.

Apparemment, il faudrait pouvoir modifier l'id du div en fonction du lien que l'on survole.

Voilà, si vous avez des liens, infos, conseils ou solutions, je suis prenneur.

Merci :)

Salut, si tu veux changer la couleur, tu peux essayer ça

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
	<head>
		<script type="text/javascript">
			function changeColor(color) {
				document.getElementById("content").style.backgroundColor = color;
			}
 
			function initContent() {
				document.getElementById("content").style.backgroundColor = "#ffffff";
			}
		</script>
 
		<style type="text/css">
			#content {
				border: 1px solid #000000;
				height: 200px;
				width: 200px;
			}
		</style>
	</head>
	<body>
		<div id="menu">
			<a href="#" onmouseout="initContent();" onmouseover="changeColor('#ff0000');">Rouge</a>
			|
			<a href="#" onmouseout="initContent();" onmouseover="changeColor('#0000ff');">Bleu</a>
			|
			<a href="#" onmouseout="initContent();" onmouseover="changeColor('#ffff00');">Jaune</a>
			|
			<a href="#" onmouseout="initContent();" onmouseover="changeColor('green');">Vert</a>
		</div>
		<div id="content"></div>
	</body>
</html>

Bon développement ;)

26/05/2007, 12h46
koskoz

Merci, je vais voir pour l'adapter avec des images en background au lieu des couleurs :)
26/05/2007, 12h52
Nesmontou

Re, pour mettre une image plutôt que la couleur, il faut faire

Code:

document.getElementById("content").style.backgroundImage = "chemin/image.png";

Bon développement ;)
26/05/2007, 13h02
koskoz

Merci beaucoup :)

Pour l'instant je suis en train de faire mes essais avec des couleurs, et j'essaye de combiner un effet de script.aculo (l'effet "fade") au changement de couleur de mon div "main".

Pour l'instant j'ai ça :

Code:

<dt onmouseover="javascript:montre('smenu1'); changeColor('green'); new Effect.Fade(main); window.setTimeout('Effect.Appear(\'demo-effect-fade\', {duration:.3})',2500);">Displays</dt>

Mon bloc "main" change bien de couleur mais l'effet "fade" n'est pas pris en compte :/
27/05/2007, 22h21
koskoz

Salut,
j'ai finalement réussi à faire mon menu, mais un gros problème se pose à moi.
Lorsque le curseur survole un menu, le curseur s'affole, et il faut cliquer ou le déplacer pour que le sous-menu apparaisse.

De plus, si l'utilisateur a désactivé javascript, plus rien ne fonctionne sauf les sous menu :/

Vous pouvez voir l'exemple ici.
02/06/2007, 10h52
koskoz

Ca y est, j'ai résolu une grosse partie de mon problème sous Firefox, même si maintenant j'ai un petit problème en CSS.

Par contre, sous IE le menu déroulant ne veut pas s'afficher et à chaque fois quand je charge la page il m'indique que ce site peut contenir des activeX dangereux et me demande si je veux les activer ou pas 8O