18041 sujets

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

CSS switch.js : insertion des liens via <select>

Salut,

je fait un style switcher pour le fun, et je souhaiterai "proposer" mes différents feuilles de styles avec un <select>.

J'utilise cette méthode , en javascript, ils conseillent de faire des liens pour activer les feuilles de style comme ça :


<a href="#" onclick="setActiveStyleSheet('default'); return false;">
<a href="#" onclick="setActiveStyleSheet('secondOne'); return false;">Plus sombre</a>


Une fois le fichier javascript appelé dans le head, ça fonctionne bien.
Ensuite je tente de les inserrer dans un <select> en m'inspirant de ce qu'il y a sur la page d'accueil de OpenWeb (mais ça à l'air de fonctionner differemment apparemment), mais j'y arrive pas.

Mon problème doit être assez bas niveau là...

Voilà ce que je fait :

<form action="index.php" method="get">
<select value="Style par défaut">			
<option selected="selected"><a href="#" onclick="setActiveStyleSheet('default'); return false;">Style par défaut</a></option>
<option value="Plus sombre"><a href="#" onclick="setActiveStyleSheet('secondOne'); return false;">Plus sombre</a></option>
</select>	
 <input value="Ok" type="submit">
</form>


Je voudrai que le style choisi s'active en cliquant sur un <option>du select, ou après avoir valider le <form>.

C'est que le lien doit etre cliqué dans ce cas, et on a pas l'air de pouvoir cliquer un lien dans un select ....non Smiley confused ?

Eclairez moi, je me sent bien couillon. Smiley confus

Merci et bonne fetes à tous. Smiley smile
Modifié par Hum (31 Dec 2006 - 16:14)
bonjour,

Je me serais tenté le coup plutot en php ... (en fait suis nul en js)
avec des tests conditionnels dans le head determinant le css à charger en fonction de la variable $_GET, la validation du formulaire dans le body rechargeant la page en cours ...
Re,

Ce n'est pas bien compliqué ...
Par exemple, 3 css: style_rouge.css, style_vert.css, style_jaune.css

@charset "iso-8859-1";
#conteneur{
width: 300px;
height:200px;
margin: auto;
background: yellow;
}


l'exemple c'est la jaune, je ne ferais pas l'insulte de te donner le code des 2 autres Smiley cligne

et ce bout de code pour la page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>habillage</title>
<?php
if (isset($_GET['habillage']))// verifie que $_get existe
{
echo '<link rel="stylesheet" media="all" type="text/css" href="style_'.$_GET['choix'].'.css" />';// si oui placer la valeur de $_get dans la partie variable de la chaine de déclaration de style
}
else{ // si $_get n'existe pas (premier chargement de la page) valeur par défaut.
?> <link rel="stylesheet" media="all" type="text/css" href="style_jaune.css" />	
<?php
}
?>

	
</head>
<body>
<div id="conteneur">
	<form method="get" action="test.php"><!-- recharge la même page -->	  
		<fieldset>
			<legend>  Choix habillage  </legend>
				<p>
						<select name="choix">
							<option value="rouge">rouge</option>
							<option value="vert">vert</option>
							<option value="jaune">jaune</option>
						</select>
							<input type="hidden" name="habillage" /> 
							<input type="submit" value="Ok" />
	   </fieldset>											
	</form> 

</div>
</body>
</html>


Bon c'est à adapter à ton cas mais la base est là, il ne te reste qu'à modifier le nom de tes css peut être le chemin du répertoire et le formulaire et un détail, de donner l'extension .php à tes pages... Et encore pour 2007 de te mettre au php ! Smiley lol
Salut Ghost,

j'ai finalement fait autrement, mais je tiens à tester ce que tu me donnes.

Je te remercie, je reviens pousser un crie de joie quand j'aurai fait fonctionner ce bout de php.
Sujet clos
Aller à