onmouseover - onmouseout

**Foutix** · 13/04/2008, 11h04

Bonjour, j'ai un souci avec mon onmouseover.
ça va pas être facile d'expliquer, je vai faire de mon mieux.

J'ai un javascript onmouseover - onmouseout et je souhaite que l'image qui ce trouve dans onmouseover reste active aprés le clic de la souris.

Voici le détail de mon script.

<A onmouseover="changeImages('home','images/menu/b-home_over.jpg');return true" onmouseout="changeImages('home','images/menu/b-home.jpg');return true" href="#">
<IMG height="50" alt="" src="images/menu/b-home.jpg" width="86"
align="top" border="0" name="home"></A>

Je sait le faire en CSS, mais pas en javascript.

Avez vous une idée? J'ai utilisé la fonction rechercher mais c'est une telle jungle qu'au bout de quelque post j'ai laisser tombé.

Merci d'avance.

Foutix

**Jumano** · 13/04/2008, 11h12

Bonjour,
Pourrais tu poster le code de ta fonction JS ...

**Foutix** · 13/04/2008, 11h39

J'ai un souci pour mettre le code source.

Trop de caractère, il fait plus de 34960 caractères.

Comment faire SVP

**Jumano** · 13/04/2008, 11h44

Juste la fonction changeImages() ...

**shaun_the_sheep** · 13/04/2008, 11h46

Salut,

utilise l'evenement onClick peut être que cela peut te permettre de faire ce que tu veux.

Sinon mais le code de la fonction :
changeImages

Remarque:
Si ta page en nombre de caractères est trop lourde. Pour la maintenance cela pourra aussi t'aider. Tu devrais peut être l'éclater un peu. Comme mettre le javascript à part ainsi que les feuille de style si ce n'est déjà fait.

**Jumano** · 13/04/2008, 13h27

Re,
Peut être 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
 
<script language="javascript" type="text/javascript">
function changeImages(image) {
document.images['home'].src = image ;
}
 
function fixeImages() {
document.getElementById('img').innerHTML = '<a href="#"><img height="50" alt="" src="images/menu/b-home.jpg" width="86" align="top" border="0" name="home"/></a>' ;
}
</script>
</head>
<body>
<div id="img" onclick="fixeImages();">
<a onmouseover="changeImages('images/menu/b-home_over.jpg');" onmouseout="changeImages('images/menu/b-home.jpg');" href="#" ><img height="50" alt="" src="images/menu/b-home.jpg" width="86" align="top" border="0" name="home"/></a>
</div>

**Foutix** · 13/04/2008, 17h24

Envoyé par jumano

Juste la fonction changeImages() ...

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
function changeImagesArray(array) {
	if (preloadFlag == true) {
		var d = document; var img;
		for (i=0;i<array.length;i+=2) {
			img = null; var n = array[i];
			if (d.images) {
				if (d.layers) {img = findElement(n,0);}
				else {img = d.images[n];}
			}
			if (!img && d.getElementById) {img = d.getElementById(n);}
			if (!img && d.getElementsByName) {
				var elms = d.getElementsByName(n);
				if (elms) {
					for (j=0;j<elms.length;j++) {
						if (elms[j].src) {img = elms[j]; break;}
					}
				}
			}
			if (img) {img.src = array[i+1];}
		}
	}
}
function changeImages() {
	changeImagesArray(changeImages.arguments);
}

J pige que dalle

**Jumano** · 13/04/2008, 17h36

Tu as testé le code que je t'ai donné ?

**Foutix** · 13/04/2008, 17h44

Non mais je vais le faire de suite.
Je supose que je doit renseigner les champs href="#" dans la function fixeImages pour que le code soit complet ?

**Foutix** · 13/04/2008, 17h49

je vient de testé ton code mais ça ne marche pas

Dans le bas du navigateur il m'indique une erreur sur la page.

Ne faut il pas rajouter un onload dans body ?

**Jumano** · 13/04/2008, 17h51

Quel message as tu ?
As tu bien rajouté des "div" ?

**Foutix** · 13/04/2008, 18h01

Oui j'ai fait un copier coller dans mon code source.

Ne faut il pas rajouter un onload dans body ?

**Jumano** · 13/04/2008, 18h06

Non, ce n'est pas la peine ...
Tu ne dois copier que la fonction :

Code :

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

1
2
3
4
 
function fixeImages() {
document.getElementById('img').innerHTML = '<a href="#"><img height="50" alt="" src="images/menu/b-home.jpg" width="86" align="top" border="0" name="home"/></a>' ;
}

après ta fonction changeImages() originale, et ensuite mettre ton code dans une "div" :

Code :

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

1
2
3
4
5
6
 
<div id="img" onclick="fixeImages();">
<A onmouseover="changeImages('home','images/menu/b-home_over.jpg');return true" onmouseout="changeImages('home','images/menu/b-home.jpg');return true" href="#">
<IMG height="50" alt="" src="images/menu/b-home.jpg" width="86" 
align="top" border="0" name="home"></A>
</div>

**Foutix** · 13/04/2008, 18h21

Ok, autant pour moi.
Je n’avais pas compris qu’il fallait que je rajoute la fonction au reste du code.

**Foutix** · 13/04/2008, 18h28

Désolé mais sans effet avec ton code.

je vais peut être reprendre la question, je souhaite que le bouton ( b-home_over.jpg) reste actif lors ce que l'on a cliqué sur le bouton (pour avoir un visuel de la page visité)

Pour avoir une idée voici le lien de mon site:
Big Deal Music

@+

**Jumano** · 13/04/2008, 18h51

Le soucis vient du fait que lorsque l'on clique sur un des boutons de ton menu, la page se recharge donc il est évident que le code ne peut pas fonctionner dans ces conditions ...

**Foutix** · 13/04/2008, 19h28

Ah.

Y a t'il une solution a mon problème ?

**Jumano** · 13/04/2008, 20h11

Alors dans ton cas ....

.... on va devoir appeler la fonction dans la balise <body> avec un onload ...
Par contre il faut modifier le code pour chaque page :
Juste avant la fin de ta balise </head>, tu ajoute ceci :

Code :

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

1
2
3
4
5
6
 
<script language="javascript" type="text/javascript">
function fixeImages() {
document.getElementById('img').innerHTML = '<a href="#"><img height="50" alt="" src="'images/menu/b-home_over.jpg" width="86" align="top" border="0" name="home"/></a>' ;
}
</script>

Tu dois donc modifier sur chaque page le "href="#" et la "src=".

Ensuite tu mets entre "div" le lien qui correspond à la page sur laquelle tu te trouves :
Donc pour la page index.html :

Code :

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

1
2
3
4
5
6
 
<div id="img">
<A onmouseover="changeImages('home','images/menu/b-home_over.jpg');return true" onmouseout="changeImages('home','images/menu/b-home.jpg');return true" href="#">
<IMG height="50" alt="" src="images/menu/b-home.jpg" width="86" 
align="top" border="0" name="home"></A>
</div>