Des radio boutons en CSS et javascript, ou comment modifier dynamiquement le style d'un composant html

Des radio boutons en CSS et javascript

Ou comment changer dynamiquement le style d'un composant d'une page pour créer des interfaces qui ont de la gueule

Ce sont des boutons qui se comportent comme des radio-boutons sauf qu'ils ne font pas partie d'une balise FORM mais sont simplement codés en CSS et javascript ! L'astuce, c'est qu'on va changer dynamiquement le style de nos boutons ! Comme un exemple vaut dix mille mots, voici le résultat que vous allez obtenir. Il est compatible avec tous les navigateurs un peu modernes (à partir d'IE 4) :
bleu rouge vert blanc

Changez ma couleur de fond !

Si vous pressez un de ces boutons, les autres sont désélectionnés. Regardez le code source de cette page.

Chaque bouton est implémenté sous forme d'un tag "span". On définit deux styles pour ces boutons, "depressed" (sélectionné)  et "raised" (désélectionné). Le handler "onclick" de chaque bouton appelle une fonction  appellée toggleButton(elementObj, idRegex) . Cette fonction boucle sur tous les élements "span" du document, et pour ceux qui ont un id qui matche l'expression régulière, il positionne sa classe sur "raised". Et ensuite la classe de style du "span" qui a été cliquée est positionnée à "depressed". C'est un peu compliqué, mais avec php on peut se simplifier la vie : par exemple j'ai créé une fonction php "affiche_boutons(array boutons_à_afficher)" qui économise mes petits doigts ! (Attention, c'est juste pour aider, le code de cette page marche uniquement avec javascript et CSS, pas besoin en théorie de php)

La fonction toggleButton provoque aussi l'affichage du numéro du bouton dans le champ texte (input, en fait). Pour récupérer dans une fonction quel radio bouton a été sélectionné comme ci-dessus, cette fonction appelle "afficher_bouton_selectionne" (voir le code source de la page), qui boucle sur tous les champs "span", filtre ceux qui concernent nos radio-boutons au moyen d'une expression régulière, et trouve celui qui a le style "depressed".

Mais on ne s'arrête pas là parce qu'on va aussi changer dynamiquement le style dun tag "table" (ici on change la couleur de fond) Ce que j'ai fait, c'est que chaque clic sur un bouton appelle, en plus de toggleButton, une fonction "changeStyle" qui va se charger de modifier dynamiquement le style de la table ! En principe, il n'y a pas de limite à cela, vous pouvez modifier dynamiquement n'importe quel attribut de n'importe quel élément défini dans votre feuille de style !

Cool, non ?

---

Extraordinairement puissant !
Affichez votre bannière 1 million de fois par jour... Gratuitement !

---

Goodies, utilitaires, référenceurs et autres scripts utiles pour les webmasters : (cliquez sur les images)

Référencement semi automatique sur plusieurs centaines de moteurs et annuaires

Pack France Giveaway : 35 produits pour booster votre site et vos ventes !

J'en profite pour vous donner un TRUC INCROYABLE : comment vendre des produits sur votre site super facilement, sans avoir à aucun script à installer, ni rien à payer, et même si vous n'avez aucun produit à vendre !
Il suffit juste d'inclure des bannières ou des liens de pub dans vos pages  perso !
Cela s'appelle l'affiliation  En cliquant sur le lien ci dessous, vous pourrez devenir (gratuitement) affilié de la plate-forme "1tpe.com", et vous pourrez commencer à vendre, sur votre site, les produits de la plate-forme, en touchant une commission au passage, allant jusque 70% ! Génial, non ?