Salut à tous !

J'ai un problème de changement d'image au survol.
Voici le site en question : http://maximal-sound.com/Site-Gala/

Comme vous pouvez le constater sur le menu du haut :
1) Si on passe la souris très vite, le onmouseout ne s'active et les images restent comme si elles étaient sous la souris.
2) Si on met le curseur juste en dessous on peut cliquer sur le lien sans activer l'image.

Voici mon javascript :

var page = 'accueil';
function chargerpage(variable) {
	document.getElementById(page).innerHTML = '<img onmouseover="survol(\''+page+'\');" onclick="chargerpage(\''+page+'\');" src="./images/boutons/' + page + '.jpg" alt="' + page + '" />';
	document.getElementById(variable).innerHTML = '<img src="./images/boutons/' + variable + '-h.jpg" alt="' + variable + '" />';
	page = variable;
}

function survol(variable)
{
	document.getElementById(variable).innerHTML = '<img onclick="chargerpage(\''+variable+'\');" onmouseout="desurvol(\''+variable+'\')" src="./images/boutons/' + variable + '-h.jpg" alt="' + variable + '" />';
}

function desurvol(variable)
{
	if(variable != page)
	{
		document.getElementById(variable).innerHTML = '<img onmouseover="survol(\''+variable+'\');"  src="./images/boutons/' + variable + '.jpg" alt="' + variable + '" />';
	}
}

Et mon HTML :

<ul id="menu">
			<li><a href="#ma_liste2-1" id="accueil" onclick="changerphoto(photo1)"><img src="./images/boutons/accueil-h.jpg" alt="Accueil" /></a><a href="#ma_liste-1"></a></li>
			<li><a href="#ma_liste2-2" id="artistes"><img onmouseover="survol('artistes');" src="./images/boutons/artistes.jpg" alt="Artistes" /></a></li>
			<li><a href="#ma_liste2-3" id="animations"><img onmouseover="survol('animations');" src="./images/boutons/animations.jpg" alt="Animations" /></a></li>
			<li><a href="#ma_liste2-4" id="infos"><img onmouseover="survol('infos');" src="./images/boutons/infos.jpg" alt="Informations" /></a></li>
			<li><a href="#ma_liste2-5" id="partenaires"><img onmouseover="survol('partenaires');" src="./images/boutons/partenaires.jpg" alt="Partenaires" /><a></li>
			<li><a href="#ma_liste2-6" id="contact"><img onmouseover="survol('contact');" src="./images/boutons/contact.jpg" alt="Contact" /></a></li>	
		</ul>

Pour le second problème ca doit venir du fait que le onmouseover et sur l'image et pas sur le lien mais je me vois mal mettre un onmouseover sur un lien, si ?
Et pour le premier problème je ne sais pas du tout. Pourtant ca ne fait pas ca sur le menu vertical :S

Merci à vous.

Bonne soirée !

Salut,

Plutôt que de changer le innerHTML pourquoi ne superposes tu pas les 2 images [comme ça les 2 sont chargées dès le départ (cf. cause de ton problème) ] puis tu affiche l'une où l'autre en changeant son z-index ?


Et pour apprendre à remplacer une image par une autre, jette un oeil ici : http://www.siteduzero.com/tutoriel-3-8 [...] et-image.html [inutile de toucher au innerHTML quand il suffit de modifier la source de l'image )

Pour le second problème, tu peux virer le lien et de mettre le onclick dans la balise image.

Le mieux est de refaire le système qui n'est pas top.

<ul id="menu">
			<li><a href="#ma_liste2-1" id="accueil" onclick="changerphoto(photo1)"><img src="./images/boutons/accueil-h.jpg" alt="accueil" /></a>
			<a href="#ma_liste-1"></a></li>
			<li><a href="#ma_liste2-2" id="artistes"><img src="./images/boutons/artistes.jpg" alt="artistes" /></a></li>
			<li><a href="#ma_liste2-3" id="animations"><img src="./images/boutons/animations.jpg" alt="animations" /></a></li>
			<li><a href="#ma_liste2-4" id="infos"><img src="./images/boutons/infos.jpg" alt="infos" /></a></li>
			<li><a href="#ma_liste2-5" id="partenaires"><img src="./images/boutons/partenaires.jpg" alt="partenaires" /><a></li>
			<li><a href="#ma_liste2-6" id="contact"><img src="./images/boutons/contact.jpg" alt="contact" /></a></li>	
		</ul>

window.onload = function() {
	var lis = document.getElementById('menu').getElementsByTagName('li');
	
	for (var i = 0; i < lis.length; i++) {
		lis[i].getElementsByTagName('a')[0].onmouseover = function() {
			var el = this.getElementsByTagName('img')[0];
			el.src = './images/boutons/' + el.alt + '-h.jpg';
		};
		lis[i].getElementsByTagName('a')[0].onmouseout = function() {
			var el = this.getElementsByTagName('img')[0];
			el.src = './images/boutons/' + el.alt + '.jpg';
		};
	}
};

Pourquoi tu as mis des images ?

Un simple

a.hover {
   border-top : white 3px solid ;
}

n'aurait-il pas suffit ?

Le problème du remplacement en JS c'est que l'image va mettre un certain temps à charger, ce qui suppose que l'utilisateur laisse sa souris sur le lien...

On pourrait toujours précharger les images en utilisant l'objet Image() mais il faudrait utiliser des closures pour pouvoir utiliser ça dans une boucle

Tu te retrouverais avec une vingtaine de ligne JS inutiles car remplçables par 3 lignes de CSS...

Le problème c'est la police (Copperplate) qui n'est pas partout apparemment. Quand je lance avec Safari ou Firefox c'est bon mais avec Chrome ou IE je me retrouve avec du Arial.

Merci pour ton code Tiller, sauf que j'aimerais conserver le fait que quand on clique sur un lien la barre au dessus s'active

Ben dans ces cas tu laisses ton image,ton lien, mais au lieu de changer d'image tu met une bordure blanche...

Ah ouais pas mal

J'essaierais ca demain Merci.

Mais derien !

Bon week-end les Toulousains