11493 sujets

JavaScript, DOM et API Web HTML5

[Résolut] Rollover multiples

Bonjour,
Suite à mon sujet (voir le sujet suivant), j'ai décidé de le faire en JavaScript. C'est ce que j'ai fait, mais ça ne fonctionne pas...

L'idée est que le menu est un peu comme un onglet; le fond de l'item du menu correspondant à la page courante est blanc, alors que les autres sont gris. Cependant, je souhaites que si on fait un rollover, seulement l'item survolé soit blanc; il faut donc "griser" celui qui est déjà blanc. Il faut aussi le remettre blanc si on sort du menu. Vous me suivez?

Mon code: (effectivement, ce n'est pas ma vraie page, ce n'est que pour tester)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Untitled Document</title>
    <style type="text/css">
<!--
#bonmelon {
	float: left;
	height: 20px;
	width: 150px;
	background-color: #E7E7E9;
	border:1px dotted #333333;
}
#philo {
	float: left;
	height: 20px;
	width: 150px;
	background-color: #E7E7E9;
	border:1px dotted #333333;
}
#portfolio {
	float: left;
	height: 20px;
	width: 150px;
	background-color: #E7E7E9;
	border:1px dotted #333333;
}
body,td,th {
	color: #999999;
}
-->
  </style>
  <script type="text/javascript" language="javascript">
<!--
var thisPage = portfolio
function menuOn(){
	document.getElementById("bonmelon").style.backgroundColor = "#E7E7E9";
	document.getElementById("philo").style.backgroundColor = "#E7E7E9";
	document.getElementById("portfolio").style.backgroundColor = "#E7E7E9";
	document.getElementById(thisID).style.backgroundColor = "#FFFFFF";
}
function menuOut(){
	document.getElementById("bonmelon").style.backgroundColor = "#E7E7E9";
	document.getElementById("philo").style.backgroundColor = "#E7E7E9";
	document.getElementById("portfolio").style.backgroundColor = "#E7E7E9";
	document.getElementById(thisPage).style.backgroundColor = "#FFFFFF";
}
//-->
</script>
  </head>    
  <body>
  <div id="bonmelon" onmouseover="javascript:menuOn();thisID = bonmelon;" onmouseout="javascript:menuOut()">BONMELON	</div>  
  <div id="philo" onmouseover="javascript:menuOn();thisID = philo;" onmouseout="javascript:menuOut()">PHILOSOPHIE</div>  
  <div id="portfolio" onmouseover="javascript:menuOn();thisID = portfolio;" onmouseout="javascript:menuOut()">PORTFOLIO</div>
  </body>
  </html>


N'est-ce pas possible de mettre un "this" dans mon document.getElementById ? Ça n'a pas fonctionné.

FoxLeader
Modifié par FoxLeader (13 Sep 2007 - 23:59)
Déjà tu pourrais gagner en CSS en mettant une class commune à tout tes élément du menu, ça t'éviterais de tripler ton code CSS...

Ensuite, au lieu de modifier le style via Javascript, tu ferais mieu de modifier la class via document.getElementById(TONid).className, ca serai plus évolutif si jamais tu veux changer tes couleurs ou la mise en forme.

Puis pour ton menu tu ferais mieu de utiliser un <ul id="menu"> avec des <li>. Car ainsi, pour manipuler ton menu, tu ferai une boucle sur le document.getElementById('menu').childNodes (tous les élément du menu). Dans cette boucle, tu leur mets une class qui correspond à "pas de rollover", puis tu 'this' pour manipuler l'objet sur lequel la souris est et tu lui applique une class "rollover".

Sinon un autre méthode qui consiterait à retourner à la méthode rollover CSS et à rajouter une petite fonction qui désactiverais le rollover de la page courant.

3ième idée (ouha chui chaud ce matin!) c'est de changer la couleur de l'élément de la page en cours. Par exemple, tu aura la page courante en bleu, les autre en gris, puis le rollover en blanc...

Allez amuse toi bien Smiley ravi
Salut!

Merci de ta réponse. Je vais étudier cela plus en détails ce soir, cependant je voulais juste souligner que si j'utilise des ID, c'est que je dois aussi changer les images de fond, différentes pour chacun des items. Je ne les ai juste pas ajouté pour ces essais.

Je vais effectivement commencer par essayer avec des ul+li, chose que j'oublie toujours Smiley biggol
Bon j'ai, pour de multiples raison, décidé de garder le div pour l'instant.

Sachez que ce que je présente là n'est pas le vrai menu, car il contiendera aussi des images de fond. seulement, une fois que ça aura fonctionné avec les couleurs, il ne devrait pas avoir plus de problèmes avec des images, non?

Bon, ça ne marche toujours pas, mais je crois que le code, lui, est déjà mieux...
La page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Menu Bon Melon</title>
  <script type="text/javascript" src="menu.js" language="javascript"></script>
    <style type="text/css">
<!--
#bonmelon {
	float: left;
	height: 20px;
	width: 150px;
	background-color: #FFFFFF;
	border:1px solid #333333;
}
#philo {
	float: left;
	height: 20px;
	width: 150px;
	background-color: #E7E7E9;
	border:1px solid #333333;
}
#portfolio {
	float: left;
	height: 20px;
	width: 150px;
	background-color: #E7E7E9;
	border:1px solid #333333;
}
body,td,th {
	color: #999999;
}
-->
  </style>
  </head>    
  <body>
  <div id="bonmelon" onmouseover="javascript:menuOn(bonmelon)" onmouseout="javascript:menuOut(bonmelon)">BONMELON</div>  
  <div id="philo" onmouseover="javascript:menuOn(bonmelon)" onmouseout="javascript:menuOut(bonmelon)">PHILOSOPHIE</div>  
  <div id="portfolio" onmouseover="javascript:menuOn(bonmelon)" onmouseout="javascript:menuOut(bonmelon)">PORTFOLIO</div>
  </body>
  </html>


et le fichier menu.js
function menuOn(thisPage){
	document.getElementById(thisPage).style.backgroundColor = "#E7E7E9";
	this.style.backgroundColor = "#FFFFFF";
}
function menuOut(thisPage){
	this.style.backgroundColor = "#E7E7E9";
	document.getElementById(thisPage).style.backgroundColor = "#FFFFFF";
}


Voilà! Après tout ce temps, j'espère que ça fonctionnera Smiley biggol
Bonne fin de journée!
FoxLeader
Bon... je l'ai remodifié avec des li+ul et quelques autres, mais je ne comprends toujours pas ce qui cloche.

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript"> new var thisPage
  thisPage = bonmelon
  
  function menuOn(){
	document.getElementById(thisPage).style.backgroundColor = '#E7E7E9';
	this.style.backgroundColor = '#FFFFFF';
	}
	function menuOut(){
		this.style.backgroundColor = '#E7E7E9';
		document.getElementById(thisPage).style.backgroundColor = '#FFFFFF';
	}
</script>
<style type="text/css">
	#bonmelon {
		float: left;
		height: 20px;
		width: 150px;
		background-color: #FFFFFF;
		border:1px solid #333333;
	}
	#philo {
		float: left;
		height: 20px;
		width: 150px;
		background-color: #E7E7E9;
		border:1px solid #333333;
	}
	#portfolio {
		float: left;
		height: 20px;
		width: 150px;
		background-color: #E7E7E9;
		border:1px solid #333333;
	}

	body,td,th {
		color: #999999;
	}
	ul{list-style:none;}
	li{list-style:none;}
</style>
</head>

<body>
<ul>
  <li id="bonmelon" onmouseover="javascript:menuOn()" onmouseout="javascript:menuOut()"><a href="#">BONMELON</a></li>  
  <li id="philo" onmouseover="javascript:menuOn()" onmouseout="javascript:menuOut()"><a href="#">PHILOSOPHIE</a></li>  
  <li id="portfolio" onmouseover="javascript:menuOn()" onmouseout="javascript:menuOut()"><a href="#">PORTFOLIO</a></li>
</ul>
 
</body>
</html>


Merci beaucoup de votre aide si précieuse!
Smiley lol

FoxLeader
Une petite idée ? Smiley biggrin
Bon! j'ai cherché sur un autre forum et j'ai solutionné le problème.
Si ça en intéresse, voilà le code complet, presque final:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
var  thisPage = 'bonmelon'
  
	function menuOn(objet){
		document.getElementById(thisPage).style.backgroundColor = '#E7E7E9';
		objet.style.backgroundColor = '#FFFFFF';     
	}
	
	function menuOut(objet){
		objet.style.backgroundColor = '#E7E7E9'; 
		document.getElementById(thisPage).style.backgroundColor = '#FFFFFF';
	}
</script>
<style type="text/css">
	#bonmelon {
		float: left;
		height: 20px;
		width: 150px;
		background-color: #FFFFFF;
		border:1px solid #333333;
	}
	#philo {
		float: left;
		height: 20px;
		width: 150px;
		background-color: #E7E7E9;
		border:1px solid #333333;
	}
	#portfolio {
		float: left;
		height: 20px;
		width: 150px;
		background-color: #E7E7E9;
		border:1px solid #333333;
	}

	body,td,th {
		color: #999999;
	}
	ul{list-style:none;}
	li{list-style:none;}
</style>
</head>

<body>
<ul>
  <li id="bonmelon" onmouseover="javascript:menuOn(this);" onmouseout="javascript:menuOut(this);"><a href="#">BONMELON</a></li>  
  <li id="philo" onmouseover="javascript:menuOn(this);" onmouseout="javascript:menuOut(this);"><a href="#">PHILOSOPHIE</a></li>  
  <li id="portfolio" onmouseover="javascript:menuOn(this);" onmouseout="javascript:menuOut(this);"><a href="#">PORTFOLIO</a></li>
</ul>
 
</body>
</html>

Modifié par FoxLeader (13 Sep 2007 - 23:58)
Sujet clos
Aller à