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

Question

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.

bruno3591 · Answer

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.

@karamel · Answer

fait un rollover sauf que au lieu de faire onmouseover tu fait onclick

bruno3591 · Answer

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.

@karamel · Answer

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

@karamel · Answer

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
}
}

Bul3 · Answer

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]

bruno3591 · Answer

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)

bruno3591 · Answer

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.

bruno3591 · Answer

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.

bruno3591 · Answer

J'ai des soucis avec le site pour poster :)

Bul3 · Answer

fait donc un alert du src.

          Bul [mon Site] [M'écrire]

Bul3 · Answer

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]

bruno3591 · Answer

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

Bul3 · Answer

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]

bruno3591 · Answer

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 ? :)

Bul3 · Answer

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]

bruno3591 · Answer

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.

@karamel · Answer

tu va pouvoir arrete le doliprane mais pense a travaille ta logique (lol)

bruno3591 · Answer

Merci pour ta réponse mais...ça ne fonctionne pas :)

Je vais étudier tout ça de prés. A bientôt.

bruno3591 · Answer

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.

PetoleTeam · Answer

Bonjour à tous, juste une autre approche plus généraliste, un exemple avec un INPUT... ;O)

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

21 réponses

Votre réponse

Discussions similaires