Bonsoir à toutes et à tous,

Je cherche à faire une sorte de bouton radio a insérer dans un formulaire html mais je voudrais en fait que ce soit un bouton ON/OFF pour activer ou désactiver une fonction du site par exemple.

La fonction en question c'est l'activation automatique d'un lecteur sur la page d'accueil.

Si "autostart" vaut "on", alors le lecteur se lance automatiquement.
Sinon (si il vaut "off") on doit cliquer sur Play pour lancer le lecteur.

Je voudrais que si "autostart" vaut "ON" le bouton le montre comme sur ce type de bouton la:

Et que s'il vaut "OFF" il le montre comme celui-ci:


En fait, ce bouton me parait super le seul problème c'est qu'il n'est pas fais avec de simple images je pense ^^, lorsque le bouton est sur "ON" par exemple et que l'on clique dessus, le cache blanc se déplace pour cacher "ON" et montrer "OFF".

Donc voilà, est-ce que ce serait compliquer de faire quelque chose comme ça ? et surtout d'enregistrer la valeur du bouton pour l'envoyer avec le formulaire ? :s

cordialement,

Fais sa avec jQuery. Fait une petite recherche sur Google

Avec jQuery... oopa. -_-

Un simple déplacement de quelques pixels en JS pur, ça n'a jamais tué personne. Et charger un framework juste pour ça, c'est tout simplement ridicule.

Citation : Golmote

Avec jQuery... oopa. -_-

Un simple déplacement de quelques pixels en JS pur, ça n'a jamais tué personne. Et charger un framework juste pour ça, c'est tout simplement ridicule.

Désolé, je n'y connais rien en JS Je sais pas pourquoi mais...j'étais certain que tu allais venir

Ok, mais je voudrais que ce déplacement soit asser .... je sais pas trpo quel mot utiliser .... dynamique ? ^^"

J'veux pas qu'il se déplace à la même vitesse en gros, par exemple il accèlre de plus en plus et ralentis à la fin.

Le problème c'est que je n'sais pas du tout comment faire ça en JS =)

Si vous avez déjà un script pour ce genre de choses j'essaierais de le modifier ou sinon je prend un tuto

C'est bien parce qu'aujourd'hui je suis de bonne humeur, que ton système avait l'air sympa et que je voulais voir combien de temps ça me prendrait pour le faire.
Voici un système qui pourrait peut-être correspondre à ton système de boutons on/off. Si ce n'est pas ce que tu voulais, tant pis.
Par contre il ne change pas la vitesse au départ ni à l'arrivée (ça m'étonnerait que l'œil voie une différence pour des distance aussi courte)
J'ai fait ce système en 3 images (en reprenant celle que tu avais mise ci-dessus) mais il pourrait être possible de ne faire qu'une seule image que tu décales en fonction de la position (et tout ce qui dépasse du cadre est masqué). C'est sans doute plus facile mais ce n'est pas ce que je voulais faire (faut bien que je m'amuse un peu aussi )

Et c'est sans Jquery (Jquery c'est nul car je ne le connais pas )

ça me va vraiment =D

Merci encore je n'esperais pas que quelqu'un me le fasse =D

Merci encore beaucoup =)

EDIT: ça marche super merci =) mais sur ma page moi le bouton à une bordure :s

Et même en attribuant un border: none; a la classe button_on_off dans le css, ça ne change rien :s

Comment faire ?

Sans voir ton code, difficile de dire...

EDIT : @resti Original, d'utiliser des checkboxes ! J'aime l'idée.

Bah j'ai éxactement le même code que sur la page de test à la seule différenceque j'ai inclus le JS dans un fichier a part plutôt que directement dans la page ^^"

<script language="JavaScript" src="js/on_off.js"></script>

<input type="checkbox" class="button_on_off" name="autostart" value="on" /><br/><br/>

Tu testes sous quel navigateur ?

T'as pas un lien vers la page online ? Un screen pour qu'on voit explicitement le problème ? La totalité de tes codes ?

En plus des questions de Golmote:
Est-ce que tu as une page CSS? et si oui est-ce qu'il y a une propriété ajoutant une bordure aux div ou aux images? si c'est le cas tu devras sans doute forcer le "pas de bordure" en ajoutant un button.style.border="none"; et (peut-être) de même pour image1 et image2

Alors, j'ai effectivement une page online où j'ai insérer cet input mais c'est la page de mofification du profil, donez moi juste le temps de créer un compte test pour que vous puissiez y acceder.

J'ai effectivement un index.css mais j'ai ajouter:

.button_on_off
{
   border: none;
}

Je n'sais pas comment ajouter un style a des proprietée JavaScript :s

Voici la page: www.petit-raptor.fr
Login: Test
Password: test159

Ensuite vous allez ICI

EDIT: Et je test sous FF pour l'instant =)

C'est normal que cette classe ne fonctionne pas, vu que les éléments créés par le JS n'ont pas cette classe

Mais je pense que le plus simple serait de leur en donner une non ?

while(i<li){
  if((element=alls[i]).className==="button_on_off"){
    element.type="hidden";
    button=document.createElement("div"); //creation de l'element contenant le tout
    button.className="button_on_off";

Et un CSS dans ce style là :

.button_on_off img {
  border:none;
}

Hmm ok mais j'veux bien mais je rajoute le code JavaScript où précisemment dans le script ?

A la fin ou il y a un endroit précis où je dois le mettre ?

Golmote te propose de modifier le code (ajouter sa ligne 5 au code existant) je ne vois pas pourquoi tu te poses la question de où il faut mettre le code... Ses lignes 1 à 4 servent justement à t'aider à trouver la position du code.

Ah ok j'avais pas compris désolé.

Désolé mais ça ne marche pas :s, j'ai ajouter border: none; aux img de la classe button_on_off et à la classe button_on_off mais ça ne marche pas :s

je viens de voir ta page online apparemment tu as un conflit avec la propriété #block img Ce qui est étrange c'est que celle-ci est défini avant et pourtant reste prioritaire.
N'étant pas extrêmement calé en CSS je dirai que c'est parce que les selecteurs d'id (commençant par #) sont prioritaire (mais je n'avais jamais entendu parler de ça avant...)

Cependant si tu mets alors le selecteur #block .button_on_off img (à la place de .button_on_off img ) cela semble corriger ce problème.

par contre mets seulement border:none;
(le medium étant inutile puisqu'il n'y pas de bordure)

Oh, je n'avais jamais entendu parler de cet ordre de priorité non plus... Mais ça ne semble pas dénué de sens...

ça marche du tonnerre merci beaucoup encore =D

Problème résolu =DD

Arf, excusez moi de déterrer un peu le post mais je viens seulement de me rendre compte vu que je suis en train de coder l page de traitement des modification du profil.

Comment je fais pour récupéré la valeur de ce bouton en JavaScript moi ?

J'ai réussis à le mettre sur on ou sur off suivant si dans la BDD autostart = on ou off mais j'ai l'impression que quand je clique sur le bouton ça ne change pas sa valeur :s

le input que tu crées au départ existe toujours (il est juste caché (son type est désormais hidden)) c'est lui qui contient la valeur.
Donc soit tu vas lire sa valeur en javascript comme tu vas lire le value d'un autre input, soit tu l'envoies par un formulaire à une page PHP (ou autre langage serveur) et que cet input soit dans le formulaire en question. À ce moment tu peux lire sa valeur comme tout autre input.

Par contre si tu changes sa valeur en javascript le bouton ne sera pas mis à jour automatiquement.

Ah non désolé, j'avais fais une erreur dans la requete SQL donc forcement ça ne marchait pas ^^"

ça marche maintenant voilà =)

Merci encore je sens que je vais utilise ce bouton pleins de fois =DD

Cordialement,

Bonjour,

Super j'avais besoin aussi de ce genre de script! par contre derriére j'ai besoin d'envoyer une commande (EventGhost), sans cliquer sur le bouton "envoyer", c'est pour allumer et éteindre des lampes (domotique)

J'ai fait un nouveau post ici:

http://www.siteduzero.com/forum-83-517 [...] omotique.html

Utilise les balises code pour que ce soit plus lisible.

J'ai modifié, j'espére que c'est plus lisible !

Il serait mieux que tu crées un nouveau sujet (en mettant un lien vers celui-ci) au lieu de squatter le sujet d'un autre

Et de ce que j'ai compris, il te suffit de changer l'url à partir du onchange, non?

Désolé, j'ai fait un nouveau post:

http://www.siteduzero.com/forum-83-517 [...] omotique.html