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

**koskoz** · 26/05/2007, 12h26

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

**Nesmontou** · 26/05/2007, 12h37

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

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.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

**koskoz** · 26/05/2007, 12h46

Merci, je vais voir pour l'adapter avec des images en background au lieu des couleurs

**Nesmontou** · 26/05/2007, 12h52

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

Code :

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

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

Bon développement

**koskoz** · 26/05/2007, 13h02

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 :

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

<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 :/

**koskoz** · 27/05/2007, 22h21

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.

**koskoz** · 02/06/2007, 10h52

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

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

JavaScript

Discussions similaires

Partager

Partager