11548 sujets

JavaScript, DOM et API Web HTML5

Un menu à background dynamique

Bonjour,
Je développe un site internet, et je voudrais savoir comment faire qqchose :
J'ai un menu vertical et je voudrai que qd on passe le souris sur un des lien, le fond entier du menu change.
Comment faire, les programmateurs ?
merci d'avance


en gros <div id='blabla'>
<a href='bleu'>aaaaaa</a>
<a href='blanc'>aaaaaa</a>
<a href='rouge'>aaaaaa</a>
</div>

et je voudrais que qd on passe la souris sur le lien 1 le fond entier du div devienne bleu, surl le lien 2 rouge etc ...
Modifié par Mymyst (28 Dec 2008 - 13:06)
Arf, personne ne s'occupe de la programmation d'émissions de radio ou de télé ici.

a écrit :
programmateur, programmatrice
Personne chargée d'établir le programme d'une série d'émissions de radio ou de télévision, d'une salle de spectacle, etc.
Via Larousse

Ensuite malgré tout, il faudrait attribuer un événement onmouseover sur le div principal, vérifier le target lors du survol et si c'est un lien appliquer le couleur de fond en fonction (que l'on pourra retrouver par exemple dans l'attribut class plutot que href)
Modifié par Tymlis (30 Dec 2008 - 22:51)
Tu pourrais faire ainsi :
<div id="menu" class="white">
	<ul>
		<li><a href="#" onmouseover="switchBackground('bleu');">bleu</a></li>
		<li><a href="#" onmouseover="switchBackground('rouge');">rouge</a></li>
		<li><a href="#" onmouseover="switchBackground('vert');">vert</a></li>
	</ul>
</div>


Ainsi lorsque tu cliques sur un lien tu modifies la classe de ton menu. J'a choisi de séparer la couleur de fond (en classes) et le menu pour éviter de réécrire à chaque couleur les propriétés de mise en page de ton menu.
Dans ton fichier JavaScript :
var switchBackground = function(newClass) {
	var menu = document.getElementById('menu');
	menu.className = newClass;
}


Tu définies donc les classes, une par couleur.
Dans ton fichier CSS :
#menu { ... }
.white { background-color: white; }
.bleu { background-color: blue; }
.rouge { background-color: red; }
.vert { background-color: green; }

Modifié par Noix de Coco (07 Jan 2009 - 16:29)
Sujet clos
Aller à