Select backgroundcolor

Commenter

Contenu du snippet

Ce script permet à un internaute de sélectionner la couleur de fond de la page Web.
Un léger remaniement permettrait même de sélectionner la couleur d'une autre page.
Pour ça dans la fonction Go, au lieu de document.body.style.backgroundColor=couleur[compteur]; ajoutez le nom de la page devant.
Et ouvrez la page de sélection en popup.

Source / Exemple : 


<html>
<head> 
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1"> 
<META NAME="GENERATOR" CONTENT="UltraEdit-32">
<META NAME="date" CONTENT="2002-06-19">
<META NAME="Author" CONTENT="Thierry Denele">
<head>
<script type="text/JavaScript"> 
var compteur = 3;
var couleur = new Array("#FFFF00","#FF0000","#008000","antiquewhite","#FFA500","#FFFFFF","#0000FF","#EE82EE");
function selectplus() {
compteur = document.forms[0].elements[0].selectedIndex;
	if (compteur < document.forms[0].elements[0].length-1) {compteur ++;} 
document.forms[0].elements[0].selectedIndex=compteur;
document.forms[0].elements[0].style.backgroundColor=couleur[compteur];
}
function selectmoins() {
compteur = document.forms[0].elements[0].selectedIndex;
	if (compteur > 0) {compteur --;} 
document.forms[0].elements[0].selectedIndex=compteur;
document.forms[0].elements[0].style.backgroundColor=couleur[compteur];
}
function Go() {
	compteur = document.forms[0].elements[0].selectedIndex;
	document.body.style.backgroundColor=couleur[compteur];
	document.forms[0].elements[0].style.backgroundColor=couleur[compteur];
	}
function Selec() {
compteur = document.forms[0].elements[0].selectedIndex;
document.forms[0].elements[0].style.backgroundColor=couleur[compteur];
}
</script>
</head>
<body>
<p style="color:black;font-weight:700;background-color:white;border:3 orange groove;width:100px;font-size:18px">Select The background Color</p>
<form>
<p>
<select name="choix" size="1" value="mescouleurs" style="background-color:antiquewhite;color: black; width: 100" onChange="javascript:Selec()">
<option>yellow
<option>red
<option>green
<option selected>beige
<option>Orange
<option>white
<option>blue
<option>violet
</select>
<input type="button" value="Go !" onClick="Go();">
</p>
<p>
<input type="button"  style="width:80"  value="Select down" onClick="selectplus()"><br><input type="button"  style="width:80" value="Select up" onClick="selectmoins()">
</p>
</form>
</body>
</html>

Conclusion :


R.A.S - Pas de mise à jour prévue - Laissez des commentaires si vous y trouvez des bugs ou si vous désirez en faire !

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (cs_Deny)