18068 sujets

Questions générales et questions de débutants

Selection et couleur dynamique [résolu]

Bonjour
J'expose mon probléme :
Ce que je voudrais c est changer la couleur du fond d'un div lorsque je selection une valeur dans ce div. J'ai retourné ce probléme dans tous les sens mais vue que je suis amateur je n'ai pas réussi. J'ai utisé comme code pour y arriver :

onmouseover=this.style.backgroundColor="#dfeabf" onmouseout=this.style.backgroundColor="#ffffff"

mais je pense que ce n'est pas par la que je dois passer.

voici mon code :
<!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=iso-8859-1" />
<title>Document sans nom</title>
<link href="style3.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div class="chaussure-ressource-nbr"> chaussure (s)
  <select name="select" >
  <option></option>
    <option > 1</option>
    <option >2 </option>
  </select>
</div>

</body>
</html>




.chaussure-ressource-nbr {
	width: 218px;
	height: 30px;
	text-align: left;
	color: #527307;
	padding: 0;
	color: #527307;
	border: solid #94b521 1px;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size:13px;
	color:#527307;
	padding-left: 0px;
	margin-bottom: 5px;
	float: left;
	background-color: #FFFFFF;
}

.chaussure-ressource-nbr select {
	float: right;
	margin-right: 5px;
	margin-top: -10px;
}


Ce que je voudrais c est lorsque je selectionne un nombre de chaussure le fond blanc du div de tête devienne vers et lorsque je retourne a 0 il redevient blanc.

Si vous savez comment résoudre ce probléme merci pour les explications Smiley biggrin
Modifié par xiryu (27 Nov 2006 - 18:06)
Bonjour,

Je ne vois qu'en php en rechargeant ta page et affectant une variable à ta couleur de fond stylée dans le code html.
Salut,
xiryu a écrit :
onmouseover=this.style.backgroundColor="#dfeabf" onmouseout=this.style.backgroundColor="#ffffff"
Je pense qu'il faut plutôt que tu te tournes vers l'évènement "onchange" de ton select.
je suis de bon humeur Smiley biggrin

v'là le code : 

<!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=iso-8859-1" />
	<title>Document sans nom</title>
	<style type="text/css">
		.chaussure-ressource-nbr {

			width: 218px;
			height: 30px;
			text-align: left;
			color: #527307;
			padding: 0;
			color: #527307;
			border: solid #94b521 1px;
			font-family: Georgia, "Times New Roman", Times, serif;
			font-size:13px;
			color:#527307;
			padding-left: 0px;
			margin-bottom: 5px;
			float: left;
			background-color: #FFFFFF;

		}

		.chaussure-ressource-nbr select {

			float: right;
			margin-right: 5px;
			margin-top: -10px;

		}	
	</style>
	<script type="text/javascript">
		function selection(pSelect,pDiv){
			
			var couleur = "#FFFFFF;"

			if(pSelect.options[pSelect.selectedIndex].value != ""){
				couleur = "#94b521";
			}
			document.getElementById(pDiv).style.backgroundColor = couleur;

		}
	</script>
</head>
<body>

<div id="monDiv" class="chaussure-ressource-nbr"> chaussure (s)

 	<select name="select" onchange="selection(this,'monDiv')">
		<option value=""></option>
	    	<option value="1"> 1</option>
    		<option value="2">2 </option>
  	</select>

</div>

</body>
</html>


J'ai rajouté les value sur tes options.
J'ai ajouté un attribut ID à ton div.
J'ai ajouté l'évenement onchange sur le select.

sur le onchange ca lance une fonction javascript qui va tester la valeur de l'attribut "value" de l'option sélectionnée.
Si la valeur est différente de vide, ca passe au vert, sinon par défaut c'est blanc.

Cette fonction prend 2 paramètres : le select lui meme (this), et l'id du div à modifier.
Sujet clos
Aller à