1. Accueil
  2. Forum Codes-Sources
  3. PHP

Animé un bouton [Résolu]

Signaler
Messages postés
968
Date d'inscription
jeudi 20 mai 2004
Statut
Membre
Dernière intervention
26 avril 2013
 -
Messages postés
968
Date d'inscription
jeudi 20 mai 2004
Statut
Membre
Dernière intervention
26 avril 2013
 -
bonjour je voudrais connaitre votre avis
je voudrais animer un bouton style on/off
qu'il change de couleur et lors du clik qu'il permette de lancer des fonctions php
quel est le meilleur moyen :javascript ou flash
et pouvez vous me donner un exemple ou un bon tuto???
A voir également:

19 réponses

Réponse 1 / 19
Messages postés
10840
Date d'inscription
lundi 24 février 2003
Statut
Modérateur
Dernière intervention
2 mars 2010
 23
Et G fait une autre erreur...decidement, lol...

Bon re-le code:

<script language="javascript">
var couleur=0;
function teste_couleur(id)
{
a=document.getElementById(id).style;
if (!couleur)
{
a.backgroundColor="green";
couleur=1;
}
else
{
a.backgroundColor="red";
couleur=0;
}
}
</script>

Texte
Réponse 2 / 19
Messages postés
2268
Date d'inscription
mercredi 27 novembre 2002
Statut
Membre
Dernière intervention
13 septembre 2013
 3
Salut!
Si tu veux du JS, rdv sur le site de JS: http://www.javascriptfr.com/ mais le JS peut être désactivé...

Sinon, tu as le CSS (la propriété :hover) qui fonction théoriquement pour tous les éléments sauf que sous MSIE, elle ne fonctionne que pour les liens...

Si tu veux un exemple pour les CSS, dis le moi, j'en ai pas mal, ;-)

@++

R@f

www.allpotes.ch: Photos, humour, vidéos, gags, ...

"On dit que seulement 10 personnes au monde comprenaient Einstein. Personne ne me comprends. Suis-je un génie???"
Réponse 3 / 19
Messages postés
968
Date d'inscription
jeudi 20 mai 2004
Statut
Membre
Dernière intervention
26 avril 2013
 1
ecoute je veux bien un exemple si tu en as!!!!!
avec grand plezir,meme!!!!!!!!!!!!!

moi j'ai trouver pas mal de truc qui changer lors du passage de la souris et moi je voudrais un bouton qui change de couleur(vert/rouge) et de nom(on/off) apres un simple click

si t'as un truc qui pourrait m'aider a avancer je suis preneur!!!
Réponse 4 / 19
Messages postés
968
Date d'inscription
jeudi 20 mai 2004
Statut
Membre
Dernière intervention
26 avril 2013
 1
j'ai réussi a faire un bouton en CSS qui est vert et devient rouge au passage de la souris mais redevient vert une fois la souris retirée!!!!!!!!!!!!!!!!et ca je ne veux pas!!!!
et je voudrais savoir si le texte peut lui aussi changer ???
je suis un peu perdu la!!!
Réponse 5 / 19
Messages postés
10840
Date d'inscription
lundi 24 février 2003
Statut
Modérateur
Dernière intervention
2 mars 2010
 23
Ca c'est facile :

<td style="background-color:green" onMouseOver="this.style.backgroundColor='red'" onMouseOut="this.style.backgroundColor=red"">texte</td>

Oui tu peux tout changer, texte, style du texte, taille de la cellule etc...explore les css et innerHTML.
Réponse 6 / 19
Messages postés
10840
Date d'inscription
lundi 24 février 2003
Statut
Modérateur
Dernière intervention
2 mars 2010
 23
enfin:

texte


evidemment, la.
Réponse 7 / 19
Messages postés
968
Date d'inscription
jeudi 20 mai 2004
Statut
Membre
Dernière intervention
26 avril 2013
 1
sympa!!!
mais pr le changement de texte justement tu dis que c simple
moi j'en ai vu en CSS mais pr changer la police ou la couleur mais pas le texte en lui meme....
enfin je crois pas!!!
si tu sais je veux bien un exemple ....
merci bcp
Réponse 8 / 19
Messages postés
2268
Date d'inscription
mercredi 27 novembre 2002
Statut
Membre
Dernière intervention
13 septembre 2013
 3
Salut!
Changer le texte, je crois pas... Si c'est pour des liens, tu peux changer l'image qui contient le texte...

Voici ce que j'utilise: 
/* Lien (Off) */
a.menu:link, a.menu:active, a.menu:visited
{
position: relative;
/* Décallage de 1px vers la droite */
left: 1px;

/* Image d'arrière fond */
background-image: url(../../images/design/menu_puce_off.jpg);

font-size: 13px;
color: #0000FF;
/* Identation du texte */
text-indent: 25px;

/* Dimensions du lien (pour l'image)*/
width: 176px;
height: 20px;

display: block;
/* On ne répète pas l'images */
background-repeat: no-repeat;
}

/* Lien (On) */
a.menu:hover
{
position: relative;
left: 1px;

/* Changement de l'image */
background-image: url(../../images/design/menu_puce_on.jpg);

font-size: 13px;
/* Changement de la couleur */
color: #0000A0;
text-indent: 25px;

width: 176px;
height: 20px;

display: block;
background-repeat: no-repeat;
}


@++

R@f

www.allpotes.ch: Photos, humour, vidéos, gags, ...

"On dit que seulement 10 personnes au monde comprenaient Einstein. Personne ne me comprends. Suis-je un génie???"
Réponse 9 / 19
Messages postés
968
Date d'inscription
jeudi 20 mai 2004
Statut
Membre
Dernière intervention
26 avril 2013
 1
salut malalam,
je viens de tester ton petit truc et j'avoue que maintenant ca marche te la couleur rouge reste mais j'ai oublier de préciser que je voulais qu'il puisse revenir en vert apres puis en rouge etc....

en fait qu'il change a chaque click!!!!

tu pense que c possible???
Réponse 10 / 19
Messages postés
10840
Date d'inscription
lundi 24 février 2003
Statut
Modérateur
Dernière intervention
2 mars 2010
 23
Si si, changer le texte, avec innerHTML, ca devrait marcher, en js.

Par contre, Latatadu91, je n'ai pas compris ce que tu voulais dans ton dernier message.
A moins que (une illumination soudaine) : ta cellule est rouge.
Le mec passe sa souris, elle devient verte. Il quitte la cellule, elle reste verte. Elle revient, elle passe au rouge. Il quitte, elle reste rouge. Il revient, elle passe au vert...c'est ca? Ou avec des clicks? (mais le principe sera le meme)
Réponse 11 / 19
Messages postés
10840
Date d'inscription
lundi 24 février 2003
Statut
Modérateur
Dernière intervention
2 mars 2010
 23
Dans les 2 cas, il te faut un peu de js, juste pour tester une variable en fait. Le principe :
Ta variable (disons couleur) est a 0.
Ta cellule est rouge au depart.
Le mec clique.
Tu testes ta variable :
Si elle est a 0, tu mets la cellule en vert, et tu passes ta variable a 1.
Si elle est a 1, tu mets la cellule en rouge, et tu passes ta variable a 0.

<script language="javascript">
var couleur=0;
function teste_couleur(id)
{
a=document.getElementById('id').style;
if (!couleur)
{
a.backgroundColor="green";
couleur=1;
}
else
{
a.backgroundColor="red";
couleur=0;
}
}
</script>

Texte
Réponse 12 / 19
Messages postés
968
Date d'inscription
jeudi 20 mai 2004
Statut
Membre
Dernière intervention
26 avril 2013
 1
voila en fait c ca !!!
c le mec qui en cliquant sur le bouton fait passer le bouton en ON et OFF indéfiniment avec le changement de couleur qui convient....
c un bouton qui permettra de lancer une fonction ou non suivant le choix du mec et ce indéfiniment !!!!
je sais pas si c plus clair mais je pense que avec vos deux reponses ya qlq chose a faire!!!!

je vais regarder ca de plus pres ...
+++
Réponse 13 / 19
Messages postés
10840
Date d'inscription
lundi 24 février 2003
Statut
Modérateur
Dernière intervention
2 mars 2010
 23
Oups...oui tu remplaces
Texte

par
Texte
Réponse 14 / 19
Messages postés
968
Date d'inscription
jeudi 20 mai 2004
Statut
Membre
Dernière intervention
26 avril 2013
 1
je viens de tester cela (malalam)

[bouton.php ON/OFF]

afin de revenir sur la page avec le bouton vert puis ensuite rouge etc...

le truc c que je le vois bien passer au vert mais que qlq millisecondes
puis il repasse en rouge et ce a chque clik

je sais pas si tu l'as tester ou si c mon qui ne va pas....
Réponse 15 / 19
Messages postés
10840
Date d'inscription
lundi 24 février 2003
Statut
Modérateur
Dernière intervention
2 mars 2010
 23
Tui reviens comment sur la page? bouton.php pointe sur quoi? sur cette meme page? en gros c'est un lien qui fait reference a lui-meme?

Ah ben oui forcement...dans ce cas : tu reviens sur la page, et le style de la cellule (TD) est fixe a rouge par defaut...donc forcement, chaque fois, il te le reaffiches en rouge.

Attends...je suis pas specialiste javascript, en php ce serait plus simple lol. Mais je vais voir ce que je trouve...je teste.
Réponse 16 / 19
Messages postés
968
Date d'inscription
jeudi 20 mai 2004
Statut
Membre
Dernière intervention
26 avril 2013
 1
nanan mais c bon te prends pas la tete
j'ai pas besoin de faire de lien
par contre si tu peux me conseiller un logiciel FREE pr faire vite fait mes images de boutons ON/OFF je veux bien....
Réponse 17 / 19
Messages postés
10840
Date d'inscription
lundi 24 février 2003
Statut
Modérateur
Dernière intervention
2 mars 2010
 23
Bon, le truc c'est que la variable couleur est perdue en route, forcement (si tu developpes: dans n'importe quel language, une variable a en general une portee limitee si elle est definie entre "accolades"...la, c'est pareil : une page web est comme un objet, toute variable declaree a l'interieur de cet objet est perdue une fois que l'on sort de cet objet).
Le truc c'est de faire passer la variable d'une page sur l'autre (meme si c'est la meme page hein...c'est comme si on creait une instance de cette meme page).
C'est facile, mais heu...je n'arrive pas a la recuperer lol.
Voici le code, avec les interceptions pour essayer de voir ce qui cloche. Ce qui cloche, c'est que je n'arrive pas a recuperer la variable. En php c'est simple, et il me semblait que ct parail en js. Je dois faire une erreur qquepart...

<script language="javascript">

function teste_couleur(id)
{
a=document.getElementById(id).style;
if (couleur==undefined)
{
alert ("Non Defini !");
var couleur="green";
}
if (couleur=="red")
{
alert ("Rouge!");
a.backgroundColor=couleur;
couleur="green";
}
else
{
alert ("Vert!");
a.backgroundColor=couleur;
couleur="red";
}
}
</script>

Texte,
Réponse 18 / 19
Messages postés
10840
Date d'inscription
lundi 24 février 2003
Statut
Modérateur
Dernière intervention
2 mars 2010
 23
Heu non, lol...utilise une demo? Photoshop evidemment, Fireworks...paint shop pro peut-etre...gimp est gratuit je crois, et il est tres bien!
Réponse 19 / 19
Messages postés
968
Date d'inscription
jeudi 20 mai 2004
Statut
Membre
Dernière intervention
26 avril 2013
 1
merci!!!!
Répondre Posez votre question