Sélection par clic sur bouton coloré dans un tableau

Signaler
Messages postés
155
Date d'inscription
dimanche 28 septembre 2008
Statut
Membre
Dernière intervention
28 mars 2010
-
 PetoleTeam -
Bonjour,

N'étant un féru du JS, je viens vers vous.

Pour le moment j'ai un tableau html qui ressemble à ça : http://img56.imageshack.us/my.php?image=sanstitreaa4.jpg

J'aimerais pouvoir changer la couleur des mois juste en cliquant sur les pastilles de couleur.

Exemple : si je clique sur la pastille verte d'avril elle passe au rouge et inversement.

Faut-il refaire tous le tableau en JS ou peut-on ajouter des commandes JS dans le code html ?

Merci.

21 réponses

Messages postés
155
Date d'inscription
dimanche 28 septembre 2008
Statut
Membre
Dernière intervention
28 mars 2010

Désolé je me suis trompé de thème. Si un modérateur passe par là, pouvez-vous déplacer le sujet dans fonctions et méthodes. Merci.
Messages postés
1788
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
30 juin 2021
132
fait un rollover sauf que au lieu de faire onmouseover tu fait onclick
Messages postés
155
Date d'inscription
dimanche 28 septembre 2008
Statut
Membre
Dernière intervention
28 mars 2010

Merci ça fonctionne mais je ne peux pas revenir en arrière : je passe au rouge mais en recliquant je ne repasse pas au vert.
Messages postés
1788
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
30 juin 2021
132
il faudra passer par une fonction
la fonction

function couleur(elem){
if(this.src==monimageverte.gif){
this.src=monimagerouge.gif
}
else{
this.src=monimageverte.gif
}
}

le html

j'ai peut etre fait des erreurs pas essayer le script mais en gros c'est ca
Messages postés
1788
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
30 juin 2021
132
si sa ne marche pas dans la fonction remplace this par elem

function couleur(elem){
if(elem.src==monimageverte.gif){
elem.src=monimagerouge.gif
}
else{
elem.src=monimageverte.gif
}
}
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
11
bonjour,

1° et les guillemets ?
   elem.src=="monimageverte.gif"

2° le src contient le chmin complet
    utiliser [last]indexof, substr[ing] ...
    ou alors mémoriser ( dans elem.mem par exemple ) l'image initiale

Cordialement

          Bul [mon Site] [M'écrire]         
Messages postés
155
Date d'inscription
dimanche 28 septembre 2008
Statut
Membre
Dernière intervention
28 mars 2010

Error convertoring HTML to XHTML: System.InvalidOperationException: There was no XML start tag open.
at System.Xml.XmlTextWriter.InternalWriteEndElement(Boolean longFormat)
at System.Xml.XmlWriter.WriteNode(XmlReader reader, Boolean defattr)
at FreeTextBoxControls.Support.Formatter.HtmlToXhtml(String input)
Messages postés
155
Date d'inscription
dimanche 28 septembre 2008
Statut
Membre
Dernière intervention
28 mars 2010

Voici mon code actuel :

html :

J'ai toujours le même problème : je passe au vert en cliquant une 1er fois mais je ne peux pas revenir en arrière en recliquant.

Merci Bul3 pour tes propositions, mais je n'ai pas encore les connaissances suffisantes pour appliquer tes commandes. Je fais des recherches.
Messages postés
155
Date d'inscription
dimanche 28 septembre 2008
Statut
Membre
Dernière intervention
28 mars 2010

Voici mon code actuel :
function couleur(elem){
if(elem.src=="images/puce_vert.jpg"){
elem.src="images/puce_rouge.gif"
}
else{
elem.src="images/puce_vert.jpg"
}
}


html :

J'ai toujours le même problème : je passe au vert en cliquant une 1er fois mais je ne peux pas revenir en arrière en recliquant.

Merci Bul3 pour tes propositions, mais je n'ai pas encore les connaissances suffisantes pour appliquer tes commandes. Je fais des recherches.
Messages postés
155
Date d'inscription
dimanche 28 septembre 2008
Statut
Membre
Dernière intervention
28 mars 2010

J'ai des soucis avec le site pour poster :)
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
11
fait donc un alert du src.

          Bul [mon Site] [M'écrire]         
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
11
pour poster, fait un copié/collé depuis un éditeur de texte
pas depuis le produit que tu utilises pour développer

au pire, clique sur
[../infomsg.aspx?ajout=&ID=1227105&txtmode=0 Si vous n'arrivez pas à saisir votre message, CLIQUEZ ICI pour revenir à une "TextBox classique"]
en dessous du bouton ajouter

avec alert tu verras que tu n'as pas "image/nom image.gif" dans le src
il faut donc faire une recherche  sur la chaîne "nom image.gif" ( lastindexof )

          Bul [mon Site] [M'écrire]         
Messages postés
155
Date d'inscription
dimanche 28 septembre 2008
Statut
Membre
Dernière intervention
28 mars 2010

J'ai tenté de comprendre est d'adapter lastindexof mais ça ne fonctionne pas. J'ai bien compris que cela sert à récupérer une sous-chaine.

Pouvez-vous y jeter un oeil:

function couleur(elem){
var verte="puce_vert.jpg"
var couleur=verte(couleur.lastIndexOf());
document.write(couleur)
}

html:



Merci
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
11
1° lastindexof certes, mais
   a)  faut pas inventer la syntaxe !
        regarde ici sur selfHTML
   b) tu ne testes rien, donc ? comment tu fais le choix du nouveau src ?

2° ton document.write va effacer toute la page.. y compris le javascript

Cordialement

          Bul [mon Site] [M'écrire]         
Messages postés
155
Date d'inscription
dimanche 28 septembre 2008
Statut
Membre
Dernière intervention
28 mars 2010

J'ai refais mon code avec tes recommandations mais je mis prend mal ça ne fonctionne pas.

function couleur(elem){
var transformation = "images/puce_rouge.gif";
var recherche = transformation.lastIndexOf("puce_rouge.gif");

if(elem.src=="images/puce_vert.jpg"){
alert(recherche)
}
else{
elem.src="images/puce_vert.jpg")
}
}

Tu aurai encore un indice ? :)
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
11
tu ne respectes pas la manière d'utiliser indexof.
tu n'en testes pas le résultat ( vu que tu fais un if sur elem.src )
quand c'est ok, tu fais un alert, tu ne change pas le src

syntaxe : var adresse = zone où on recherche.lastIndexOf(valeur à recherchrr);

si "valeur à recherch" existe dans "zone où on recherche",
adresse sera > ou = 0, égal à -1 sinon

si kazma ou moi te donnons directement la réponse, ça ne
te servirais à rien.  vaut mieux se casser les dents et
se creuser la tête pour comprendre ( mais c'est normal
de peiner ! )

          Bul [mon Site] [M'écrire]         
Messages postés
155
Date d'inscription
dimanche 28 septembre 2008
Statut
Membre
Dernière intervention
28 mars 2010

Bon et bien après 2 doliprane et un après-midi à solutionner mon bout de code je n'abandonne pas. Non j'ai toujours pas trouvé. J'ai tourné les données dans tous les sens sans pouvoir mettre en application lastindexof. J'ai parcouru beaucoup de sites qui effectivement donne tous la même définition mais sans exemple pouvant m'aider réellement. Le problème c'est pas le code mais moi :), j'apprends par l'exemple car comme beaucoup de forumeurs je suis autodidacte. Du coup, les cours ne me font pas le même effet qu'aux étudiants. En général je regarde le cours une fois que j'ai réussi, et là je comprend bien. Je ne viens pas poster une nouvelle fois pour demander la solution toute faite d'une facon détournée, mais vous faire comprendre que si je m'adresse à un forum c'est pour gagner un peu de temps sur l'apprentissage classique.

Voila ou j'en suis :

function couleur(elem){
var transformation = elem.src="images/puce_rouge.gif";
var recherche = transformation.lastIndexOf("images/puce_rouge.gif");

if(recherche){
elem.src="images/puce_vert.jpg"
}
else{
(recherche)
}
}
Cette fois je teste recherche mais cela ne produit aucun résultat sur la page.
indexof traite des string mais là ce sont des images, comment retenir...!?
Bonne soirée, merci.
Messages postés
1788
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
30 juin 2021
132
tu va pouvoir arrete le doliprane mais pense a travaille ta logique (lol)

<html>
<head>
<script type="text/javascript" language="javascript">

function couleur(elem){

if(elem.src.lastIndexOf("puce_rouge.jpg")!=-1){
elem.src="images/puce_rouge.jpg"

}
else{
elem.src="images/puce_vert.jpg"

}
}
</script>
</head>

</html>
Messages postés
155
Date d'inscription
dimanche 28 septembre 2008
Statut
Membre
Dernière intervention
28 mars 2010

Merci pour ta réponse mais...ça ne fonctionne pas :)

Je vais étudier tout ça de prés. A bientôt.
Messages postés
155
Date d'inscription
dimanche 28 septembre 2008
Statut
Membre
Dernière intervention
28 mars 2010

Voila, après une petite étude de ton code, j'ai modifié cette ligne :

if(elem.src.lastIndexOf("puce_rouge.gif")<=-1){

et tout fonctionne bien.

Bonne nuit et encore merci pour votre aide.