Menu

[HTML/JavaScript] Couleur de fond dynamique [Fermé]

- - Dernière réponse :  fossoyeur - 22 juin 2016 à 15:56
Bonjour a tous,

J'ai un ptit souci de programmation ... Je m'explique :

J'aimerais qu'en cliquant sur des images qui sont affichées sur ma page html, par exemple une image jaune, la couleur du fond de ma page prenne la couleur de l'image ...

Voila, la couleur de l'image n'est en realité que prévu pour que la personne sache quelle va etre la couleur du site apres avoir cliqué dessus.

Merci d'avance pour votre aide, et si vous voulez plus d'explications demandez moi :)

A plus ,

Maxence
Afficher la suite 

5 réponses

Meilleure réponse
Messages postés
623
Date d'inscription
vendredi 26 juillet 2002
Statut
Membre
Dernière intervention
11 novembre 2012
958
21
Merci
Salut!

Voici le code qui te permet de faire cela:

<html>
	<!-- Author: HackTrack -->
	<head>
		<title>Démo de sélection de couleur de fond</title>
		<script language="javascript" type="text/javascript">
			function changeBackgroundColor(elm){
			window.status=elm.style.backgroundColor;
				document.body.style.backgroundColor=elm.style.backgroundColor;
			}
		</script>
		<style>
			table, tr, td{
				margin: 0px;
				padding:0px;
				border: solid 1px #0f0f0f;
			}
			div{
				width: 50px;
				height: 50px;
			}
		</style>
	</head>
	<body>
		<table>
			<tr>
				<th colspan="4">Choisissez la couleur de fond</th>
			</tr>
			<tr>
				<td><div onclick="javascript: changeBackgroundColor(this);" style="background-color: #000000;"></div></td>
				<td><div onclick="javascript: changeBackgroundColor(this);" style="background-color: #111111;"></div></td>
				<td><div onclick="javascript: changeBackgroundColor(this);" style="background-color: #222222;"></div></td>
				<td><div onclick="javascript: changeBackgroundColor(this);" style="background-color: #333333;"></div></td>
			</tr>
			<tr>
				<td><div onclick="javascript: changeBackgroundColor(this);" style="background-color: #444444;"></div></td>
				<td><div onclick="javascript: changeBackgroundColor(this);" style="background-color: #555555;"></div></td>
				<td><div onclick="javascript: changeBackgroundColor(this);" style="background-color: #666666;"></div></td>
				<td><div onclick="javascript: changeBackgroundColor(this);" style="background-color: #777777;"></div></td>
			</tr>
			<tr>
				<td><div onclick="javascript: changeBackgroundColor(this);" style="background-color: #888888;"></div></td>
				<td><div onclick="javascript: changeBackgroundColor(this);" style="background-color: #999999;"></div></td>
				<td><div onclick="javascript: changeBackgroundColor(this);" style="background-color: #aaaaaa;"></div></td>
				<td><div onclick="javascript: changeBackgroundColor(this);" style="background-color: #bbbbbb;"></div></td>
			</tr>
			<tr>
				<td><div onclick="javascript: changeBackgroundColor(this);" style="background-color: #cccccc;"></div></td>
				<td><div onclick="javascript: changeBackgroundColor(this);" style="background-color: #dddddd;"></div></td>
				<td><div onclick="javascript: changeBackgroundColor(this);" style="background-color: #eeeeee;"></div></td>
				<td><div onclick="javascript: changeBackgroundColor(this);" style="background-color: #ffffff;"></div></td>
			</tr>			
		</table>
	</body>
</html>


;-)
HackTrack

Dire « Merci » 21

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 54890 internautes nous ont dit merci ce mois-ci

-
merci pour ce petit bout de code ! je ne connais quasiment pas javascript et ca m a bien servi pour un projet au boulot ! merci a toi
gilbert1995
Messages postés
416
Date d'inscription
samedi 12 septembre 2009
Statut
Membre
Dernière intervention
30 mai 2013
32 -
comment crée un cookie pour sauvegarder la couleur sur les pages futur
Bien joué. Simple et net.
Messages postés
233
Date d'inscription
mardi 27 mars 2007
Statut
Membre
Dernière intervention
12 juin 2007
163
6
Merci
Salut,

http://www.toutjavascript.com/main/gorun.php3?s=chpcolor

Si tu t'y connais un peu en javascript, tu pourras sûrement adapter ce script prévu pour changer la couleur de fond d'un cadre en fonction de la valeur d'un champ texte...

Fondamentalement, ça doit marcher pareil que ce que tu veux faire, enfin je pense...
Messages postés
112
Date d'inscription
samedi 23 février 2008
Statut
Membre
Dernière intervention
2 juillet 2018
1
1
Merci
Merci, c super ton code, simple, pile ce que je cherchais, c bête qu'il ne soit pas mis plus en avant
Sait tu comment on fait la même chose avec une image de fond (changeBackgroundimage(this) ou changeBackgroundImage(this) ne marchent pas)
0
Merci
Et bien merci tout d'abord ...

Mais par contre, je m'y connais un peu en JavaScript et ce truc ne m'aide pas trop trop ... :s
En fait j'avais vu un truc du genre on choisi parmi un menu defilant une couleur et hop le fond de la page prend cette couleur mais ca non plus ca m'aidait pas donc j'aurais vraiment besoin d'une aide ciblée si possible :) ...

En tout cas merci a toi :)

PS : je vais quand meme regarder en profondeur ce code ... ;)
0
Merci
n'étant pas un pro du html, je ne peux pas t'indiquer les balises, mais je pense qu'il est possible de faire quelque chose du genre:
un clic sur la couleur définit une variable, que tu utilises ensuite pour définir la couleur de ta page...

j'espère que ceci t'aidera au moins un peu
merci à toi pour ton aide
prosthetiks
Messages postés
1170
Date d'inscription
dimanche 7 octobre 2007
Statut
Membre
Dernière intervention
16 août 2018
422 -
Déterrage de topic en vue ! Après 4 ans de silence, le revoilà en tête de liste. Etait-ce vraiment nécessaire ?
Merci c'est cool