Jump to content

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


Recommended Posts

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 !

Link to comment
Share on other sites

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

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

voili voila

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...