onmouseover - onmouseout

Version imprimable

13/04/2008, 11h04
Foutix

onmouseover - onmouseout

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
13/04/2008, 11h12
Jumano

Bonjour,
Pourrais tu poster le code de ta fonction JS ...
13/04/2008, 11h39
Foutix

J'ai un souci pour mettre le code source.

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

Comment faire SVP
13/04/2008, 11h44
Jumano

Juste la fonction changeImages() ...;)
13/04/2008, 11h46
shaun_the_sheep

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.

Re,
Peut être une solution :

Code:

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>

Citation:

Envoyé par jumano

Juste la fonction changeImages() ...;)

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
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 :(:cry:

13/04/2008, 17h36
Jumano

Tu as testé le code que je t'ai donné ?
13/04/2008, 17h44
Foutix

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 ?
13/04/2008, 17h49
Foutix

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 ? :oops:
13/04/2008, 17h51
Jumano

Quel message as tu ?
As tu bien rajouté des "div" ?
13/04/2008, 18h01
Foutix

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

Ne faut il pas rajouter un onload dans body ?

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

Code:

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:

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>

13/04/2008, 18h21
Foutix

Ok, autant pour moi.
Je n’avais pas compris qu’il fallait que je rajoute la fonction au reste du code.
13/04/2008, 18h28
Foutix

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

@+
13/04/2008, 18h51
Jumano

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 ...;)
13/04/2008, 19h28
Foutix

Ah. :(:cry::(

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

Alors dans ton cas .... :oops: .... 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:

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:

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>

13/04/2008, 21h15
Foutix

je dois être null :cry: tu peux voir le résultat sur cette page, le bouton du bas (home)

Big Deal Music

je crois que je vais laisser comme ça
13/04/2008, 21h22
Jumano

Ca doit être du à la "div" que je t'ai fait ajouter ... je regarde et j'essaye de trouver sans rajouter de "div" ...
13/04/2008, 21h29
Jumano
Essayes de modifer la fonction comme ceci :
Code:

1 2 3 function fixeImages() { document.getElementById('img').outerHTML = .....
Supprime le "div" que je t'ai fait rajouter et ajoute l' "id" dans la balise <a> :
Code:

1 2 <a id="img" onmouseover= ...
13/04/2008, 21h34
Jumano

Je viens de regarder ton code source tu n'as pas mis la "div" au bon endroit ...
13/04/2008, 21h41
Foutix

un vrai casse tête ce code ! sans la balise div le problème persiste

Tu as ajouter du code au niveau de la ligne 150 à 152, tu n'as pas à le faire ici ...
Tu dois juste ajouter à la ligne 87 id="img" :

Code:

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

Remplacer l'ancienne fonction par celle-ci :

Code:

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>

et dans le body tu ajoutes :

Code:

1
2
 
<BODY text=#6a707c link=#4e5255 vLink=#4e5255 aLink=#4e5255 onload="preloadImages(); fixeImages();" >