Des livres incontournables pour tout maîtriser

  • CSS2
  • Réussir son site web avec XHTML et CSS
  • PHP 5 avancé
  • Memento CSS
  • Memento XHTML
  • Ergonomie web
  • Bien rédiger pour le web
Rechercher dans le sujet :
Forum
» JavaScript et DOM
» [Résolut] Rollover multiples
Auteur
FoxLeader
# 31 Aug 2007 - 04:09:42
Citer
Wannabe!
33 Posts
 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)
"Un bel avion est un avion qui vole bien"
[-Marcel Dassault]
http://www.foxleader.fr.nf 
^
MoOx
# 31 Aug 2007 - 09:34:22
Citer
L'habit ne fait pas le moine.
202 Posts
 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 ravi

http://moox.fr/ 
^
FoxLeader
# 31 Aug 2007 - 18:29:31
Citer
Wannabe!
33 Posts
 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 biggol
"Un bel avion est un avion qui vole bien"
[-Marcel Dassault]
http://www.foxleader.fr.nf 
^
FoxLeader
# 08 Sep 2007 - 23:16:53
Citer
Wannabe!
33 Posts
 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 biggol
Bonne fin de journée!
FoxLeader
"Un bel avion est un avion qui vole bien"
[-Marcel Dassault]
http://www.foxleader.fr.nf 
^
FoxLeader
# 11 Sep 2007 - 03:54:16
Citer
Wannabe!
33 Posts
 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!
lol

FoxLeader
"Un bel avion est un avion qui vole bien"
[-Marcel Dassault]
http://www.foxleader.fr.nf 
^
FoxLeader
# 12 Sep 2007 - 23:40:15
Citer
Wannabe!
33 Posts
 Une petite idée ? 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)
"Un bel avion est un avion qui vole bien"
[-Marcel Dassault]
http://www.foxleader.fr.nf 
^
Le sujet est clos.
Aller à
Powered by Phedio v3.8.6 beta in 33 ms © dew