problème de rolloover pour un menu d'un site

anthony1987 · le 21 mars 2006

Bonjour à tous je m'adresse à ceux qui s'y connaissent un peu en langage web,

Je veux crer un menu sur mon site et je veux que chaque image de boutons change d'image quand je passe dessus(cf onmouseover) et quand je click dessus (cf onclick);mais mon code doit être faut je vous le soumet:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" >
<head>
<title>index</title>
<style type="text/css">
	#logo{
		position:absolute;
		left:110px;
		top:0px;
		height:190px;
		width:740px;
	}
	#menu{
		position:absolute;
		left:0px;
		top:192px;
		height:200px;
		width:130px;

	}
	#main{
		position:absolute;
		left:132px;
		top:192px;
		height:600px;
		width:800px;
	}
</style>
<script type="text/javascript">
	function appuyer(identif){
		document.getElementById('identif').src="bouton\"+identif+"3.gif";
	}
	function survol(identif){
		document.getElementById('identif').src="bouton\"+identif+"2.gif";	
	}
</script>
</head>
<body>
<div id="logo">
		<img src="image\logo1.bmp" alt="logo" height="190px" width="740px" />
</div>

<div id="menu">
		<table>
			<tr>
				<td>
	<img id="accueil" src="bouton\accueil1.gif" alt="accueil" height="30" width="100" 
	 onclick="appuyer('accueil');" onmouseover="survol('accueil');" />
				</td>
			</tr>
			<tr>
				<td>
	<img id="securite" src="bouton\securite1.gif" alt="securite" height="30" width="100" 
	 onclick="appuyer('securite');" onmouseover="survol('securite');" />
				</td>
			</tr>
			<tr>
				<td>
<img id="encordement" src="bouton\encordement1.gif" alt="encordement" height="30" width="100" 
 onclick="appuyer('encordement');" onmouseover="survol('encordement');" />
				</td>
			</tr>
			<tr>
				<td>
		<img id="lieu" src="bouton\lieu1.gif" alt="lieu" height="30" width="100" 
		 onclick="appuyer('lieu');" onmouseover="survol('lieu');" />
				</td>
			</tr>
			<tr>
				<td>
<img id="compétition" src="bouton\compétition1.gif" alt="compétition" height="30" width="100" 
 onclick="appuyer('compétition');" onmouseover="survol('compétition');" />
				</td>
			</tr>
			<tr>
				<td>
	<img id="amusez" src="bouton\amusez1.gif" alt="amusez" height="30" width="100" 
	 onclick="appuyer('amusez');" onmouseover="survol('amusez');" />
				</td>
			</tr>
			<tr>
				<td>
		<img id="liens" src="bouton\liens1.gif" alt="liens" height="30" width="100" 
		 onclick="appuyer('liens');" onmouseover="survol('liens');" />
				</td>
			</tr>
			<tr>
				<td>
		<img id="contact" src="bouton\contact1.gif" alt="contact" height="30" width="100" 
		onclick="appuyer('contact');" onmouseover="survol('contact');" />
				</td>
			</tr>
		</table>
	</div>
</body>
</html>

voila j'ai un problème avec ma fonction qui doit planter avec le"get.ElementById(identif) mais je sais pas comment faire pour y remédier

Note du modo : Utilise la balise [ code ] pour garder le formatage de ton code quand tu le postes ! Sinon c'est totalement illisible !

Helfima · le 23 mars 2006

Ah les problèmes avec le javascript!!!

ce qui probablement te pose le problème c'est "document.getElementById" qui n'est pas valable pour tous les navigateur.

en fait l'accès aux objects d'une page varie selon les grandes familles de navigateur.

en règle générale on en traite 3

1) Microsoft explorer

2) Netscape

3) Opera

sachant que pour "explorer" faut aussi géré les versions normalement.

donc faut faire soit un test du type d'objet qu'on l'on rencontre sur la page ou le type de navigateur.

franchement pas besoin de javascript pour ca sachant que le traitement du type de navigateur est chiant (avec les mots "menu" "javascript" "image" tu trouvera facilement un exemple en javascript sur ton moteur de recherche préféré) mais opte plutot pour un css qui sera largement plus efficace et surtout sans bug

Par ici, attention y a un lien en bas de la page pour comment contourner un problème avec IE6.

voili voila

Baldurien · le 23 mars 2006

Pourquoi tu te fais chier avec des identifiants alors que tu modifie l'image qui envoie l'événement?

Lorsque tu as un événement (onclick, etc) il existe une référence spéciale - this - représentant l'objet subissant l'événement.

Ce qui donne :

		function appuyer(o){
		o.src="bouton\"+o.id+"3.gif";
	}
	function survol(identif){
		o.src="bouton\"+o.id+"2.gif";	
	}

au lieu de :

		function appuyer(identif){
		document.getElementById('identif').src="bouton\"+identif+"3.gif";
	}
	function survol(identif){
		document.getElementById('identif').src="bouton\"+identif+"2.gif";	
	}

Et :

onclick="appuyer('contact');" onmouseover="survol('contact');"

devient :

onclick="appuyer(this);" onmouseover="survol(this);"

(etc)

Je ne suis pas sûr pour le .id, ça devrait marcher sous Fx, ou IE, mais ailleurs je ne sais pas. Si ça foire, passe l'id en deuxième paramètre de la fonction après avoir essayé.

anthony1987 · le 27 mars 2006

Ce qui donne :
		function appuyer(o){
		o.src="bouton\"+o.id+"3.gif";
	}
	function survol(identif){
		o.src="bouton\"+o.id+"2.gif";	
	}
au lieu de :
		function appuyer(identif){
		document.getElementById('identif').src="bouton\"+identif+"3.gif";
	}
	function survol(identif){
		document.getElementById('identif').src="bouton\"+identif+"2.gif";	
	}
Et :

onclick="appuyer('contact');" onmouseover="survol('contact');"

devient :

onclick="appuyer(this);" onmouseover="survol(this);"

merci Baldurien je vais essayer ta méthode je ne connaissait pas this merci beaucoup

Connexion

problème de rolloover pour un menu d'un site

Messages recommandés

anthony1987

Lien vers le commentaire

Partager sur d’autres sites

Helfima

Lien vers le commentaire

Partager sur d’autres sites

Baldurien

Lien vers le commentaire

Partager sur d’autres sites

anthony1987

Lien vers le commentaire

Partager sur d’autres sites

Archivé

Naviguer

Activité