Actualité informatique
Test comparatif matériel informatique
Jeux vidéo
Astuces informatique
Vidéo
Télécharger
Services en ligne
Forum informatique
01Business



|||-  

Changer la couleur d'une cellule lorsqu'on clic

 

Ajouter une réponse
 

 
Page photos
 
     
Vider la liste des messages à citer
 
 Page :
1
Auteur
 Sujet :

Changer la couleur d'une cellule lorsqu'on clic

RÉSOLU
Prévenir les modérateurs en cas d'abus 
madmat5
madmat5
Présent de temps en temps (De 50 à 99 messages postés)
  1. Posté le 10/07/2007 à 09:52:19  
  1. answer
  1. Prévenir les modérateurs en cas d'abus
 
Bonjour à tous,

Tous es dans le titre, j'ai fais une ligne "tableau" pour faire mes boutons de mon site web et je cherche une astuce pour pouvoir faire que lorsque qu'on clic sur tel menu "cellule" il reste d'une couleur différente, pour que le visiteur puisse savoir ou il est.

Merci d'avance pour vos réponse.
Message édité par Tintin10 le 05/08/2015 à 18:24:10
superted97
Bébé forumeur (De 10 à 49 messages postés)
  1. Posté le 10/07/2007 à 10:54:25  
  1. answer
  1. Prévenir les modérateurs en cas d'abus
 
salut, il faut utiliser les styles CSS
 voir le site http://www.gotapi.com/html ou www.editeurjavascript.com


---------------
www.roodali.com script gratuits
(Publicité)
beno5
Assidu (de 10 000 à 19 999 messages postés)
  1. Posté le 10/07/2007 à 11:00:02  
  1. answer
  1. Prévenir les modérateurs en cas d'abus
 
Code :(Double-cliquez pour supprimer les numéros de ligne)
  1. onclick="this.style.background-color='#eeeeee'"


Edit par Tintin10 : rajout des balises de code
Message édité par Tintin10 le 05/08/2015 à 18:25:35
madmat5
Présent de temps en temps (De 50 à 99 messages postés)
  1. Posté le 10/07/2007 à 13:21:37  
  1. answer
  1. Prévenir les modérateurs en cas d'abus
 
Vu que je suis loin d'étre bon pourrais tu développer Beno@ pour une p'tite cervelle comme la mienne

madmat5
Présent de temps en temps (De 50 à 99 messages postés)
  1. Posté le 10/07/2007 à 13:26:26  
  1. answer
  1. Prévenir les modérateurs en cas d'abus
 
Voici en gros ma page :
Code :(Double-cliquez pour supprimer les numéros de ligne)
  1.  <head>
  2.  </head>
  3.  <body>
  4.    <table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#00FF00" width="100%" id="AutoNumber4" height="25">
  5.      <tr>
  6.        <td width="16%" height="25" align="center">
  7.          <a href="bureau.htm" style="text-decoration: none; color: #000000; font-family: 'Times New Roman', Arial; font-size: 12pt">Bureau</a>
  8.    </td>
  9.        <td width="16%" height="25" align="center">
  10.          <a style="text-decoration: none; color: #000000; font-family: 'Times New Roman', Arial; font-size: 12pt" href="agenda.htm">Agenda</a>
  11.    </td>
  12.        <td width="17%" height="25" align="center">
  13.          <a href="membres.htm" style="text-decoration: none; color: #000000; font-family: 'Times New Roman', Arial; font-size: 12pt">Membres</a>
  14.    </td>
  15.        <td width="17%" height="25" align="center">
  16.          <a href="partenaire.htm" style="text-decoration: none; color: #000000; font-family: 'Times New Roman', Arial; font-size: 12pt">Partenaires</a>
  17.    </td>
  18.        <td width="17%" height="25" align="center">
  19.          <a href="forum.htm" style="text-decoration: none; color: #000000; font-family: 'Times New Roman', Arial; font-size: 12pt">Forum</a>
  20.    </td>
  21.        <td width="17%" height="25" align="center">
  22.          <a href="http://www.meteofrance.com" style="text-decoration: none; color: #000000; font-family: 'Times New Roman', Arial; font-size: 12pt"><font face="Times New Roman">Météo</font></a>
  23.    </td>
  24.      </tr>
  25.    </table>
  26.  </body>
  27. </html>

Merci

Edit par Tintin10 : rajout des balises de code
Message édité par Tintin10 le 05/08/2015 à 18:28:37
(Publicité)
beno5
Assidu (de 10 000 à 19 999 messages postés)
  1. Posté le 10/07/2007 à 14:07:07  
  1. answer
  1. Prévenir les modérateurs en cas d'abus
 
je m'etait trompé, c'est:
Code :(Double-cliquez pour supprimer les numéros de ligne)
  1. onclick="this.style.background='#eeeeee'"


c'est à mettre dans la balise de la cellule ;)

ici <td> donc ca ferait

Code :(Double-cliquez pour supprimer les numéros de ligne)
  1. <td width="17%" height="25" align="center" onclick="this.style.background='#eeeeee'">


 ;)

j'espere que ca marche :D

Edit par Tintin10 : rajout des balises de code
Message édité par Tintin10 le 05/08/2015 à 18:29:31
madmat5
Présent de temps en temps (De 50 à 99 messages postés)
  1. Posté le 11/07/2007 à 07:50:52  
  1. answer
  1. Prévenir les modérateurs en cas d'abus
 
Merci Beno@, ca marche nickel, mais je souhaiterai que la case redevienne de couleur normal quand le visiteur clic sur une autre, la si tu clique sur tous les menus ils se mettent tous de la méme couleur.

beno5
Assidu (de 10 000 à 19 999 messages postés)
  1. Posté le 11/07/2007 à 09:57:44  
  1. answer
  1. Prévenir les modérateurs en cas d'abus
 
ha, si tu clique sur une autre ca doit revenir de la même couleur :/  

 je ne serais pas vraiment faire le code mais je peux te donner la methode que j'utiliserais:

 quand tu clique on appelle une fonction Couleur avec comme argument l'id de la cellule, donc onclick="Couleur(this.id');"

 la fonction Couleur met en couleur la case du tableau et enregistre son id dans une variable
 lorsque qu'un case est cliquée, la fonction Couleur est appelée, elle met la case en couleur et elle regarde la derniere case en couleur et elle la met en blanc dans l'arrière plan (ou transparent)

 mais là ou ca se complique c'est que pour que la variable soit gardée, il faut obligatoirement on objet, et je ne sais pas programmer des classes en javascript :/  

(Publicité)
madmat5
Présent de temps en temps (De 50 à 99 messages postés)
  1. Posté le 11/07/2007 à 13:45:41  
  1. answer
  1. Prévenir les modérateurs en cas d'abus
 
J'ai rééssayer, lorsque je clic sur une cellule elle change bien de couleur ça c'est nickel  :youpi:  mais dés qe je clique sur une deuxiéme, la premiére reste coloré  :(

madmat5
Présent de temps en temps (De 50 à 99 messages postés)
  1. Posté le 12/07/2007 à 10:42:35  
  1. answer
  1. Prévenir les modérateurs en cas d'abus
 
S'il vous plait à l'aide  :pleure:

beno5
Assidu (de 10 000 à 19 999 messages postés)
  1. Posté le 12/07/2007 à 14:55:34  
  1. answer
  1. Prévenir les modérateurs en cas d'abus
 
à cause de toi j'ai du apprendre à utiliser les classes en javascript :o
même si on utilise pas vraiment de classe ici :)

voila le code que j'ai fait:
Code :(Double-cliquez pour supprimer les numéros de ligne)
  1. <script type="text/javascript">
  2.  function Couleur (id){
  3. /*---
  4. - rien, on clic -> on surligne
  5. - case deja surlignée, clic sur autre -> on enleve la 1ere, met la 2e
  6. - case déjà surlignée, clic sur même  -> on enleve la 1ere*/
  7.  
  8. // ici on configure la couleur au clic:
  9.    this.couleur = '#eeffee';
  10.    this.id=id;
  11.    if (typeof this.highlighted=='undefined' || this.highlighted==''){
  12.      document.getElementById(this.id).style.background = this.couleur;
  13.      this.highligted=this.id;
  14.    }
  15.    else{
  16.      if (this.id!=this.highlighted){
  17.        document.getElementById(this.id).style.background = this.couleur;
  18.        document.getElementById(this.highlighted).style.background = 'transparent';
  19.        this.highlighted = this.id;
  20.      }
  21.      else{
  22.        document.getElementById(this.id).style.background = 'transparent';
  23.        this.highlighted = '';
  24.      }
  25.    }
  26.  }


et le code html d'une cellule:
Code :(Double-cliquez pour supprimer les numéros de ligne)
  1. <td id="c1" onclick="Couleur(this.id)">


Edit par Tintin10 : rajout des balises de code
Message édité par Tintin10 le 05/08/2015 à 18:33:39
(Publicité)
madmat5
Présent de temps en temps (De 50 à 99 messages postés)
  1. Posté le 12/07/2007 à 15:08:33  
  1. answer
  1. Prévenir les modérateurs en cas d'abus
 
Merci beaucoup ca marche nickel  :super:  Beno@ et en plus grace a moi tu a appris quelque chose  :D

 Encore Merci

parmessoins
Bébé forumeur (De 10 à 49 messages postés)
  1. Posté le 01/04/2008 à 15:55:36  
  1. answer
  1. Prévenir les modérateurs en cas d'abus
 
Hummm !
 juste ce que cherchais  :super:

 ayant eu du mal à trouver, je complète pour Google ...
 Ce script javascript change la couleur de fond d'une d'une cellule (ou <td> ou <tr>...) en une couleur prédéfinit lorsque l'on clic dessus (OnClick, marche avec onFocus...) et reviens à la couleur 'transparent' à la perte du focus  :jap:

 shusssssssssss


---------------
Il n'est rien d'attendre quand on sait d'avoir !
naheulbeuk7
Membre impliqué (de 20 000 à 29 999 messages postés)
  1. Posté le 18/04/2008 à 10:46:05  
  1. answer
  1. Prévenir les modérateurs en cas d'abus
 
bonjour, je déterre un sujet désolé... :whistle:

 Beno@, t'aurais moyen de m'aider à adapter ton script stp ? :)
 je suis une bille en javascript...
 j'ai un tableau avec des lignes et des colonnes (un tableau quoi :p )
 je voudrais que la couleur de fond change quand on clic sur une cellule, qu'elle redevienne blanche quand on clic sur une cellule déjà colorée et que l'on ne puisse pas sélectionner plusieurs cellules d'une meme ligne ;)
 mais en plus je voudrais que l'on puisse sélectionner une case par ligne, donc pouvoir colorer une case par ligne au maximum ;)

 merci d'avance,
 bonne journée :p


---------------
Visitez mon site sur la sécurité informatique : http://www.site-naheulbeuk.com
(Publicité)
beno5
Assidu (de 10 000 à 19 999 messages postés)
  1. Posté le 18/04/2008 à 13:12:50  
  1. answer
  1. Prévenir les modérateurs en cas d'abus
 
oula :/  
 je suppose qu'il faut placer des cellules dans une balise indiquant une ligne et en suite, dans le script tu recupère l'id de la ligne et tu stocke dans un tableau les id des lignes ou des cellules sont surlignées et ensuite lors d'un clic tu vérifie que la ligne ne soit pas encore dans l'array...

naheulbeuk7
Membre impliqué (de 20 000 à 29 999 messages postés)
  1. Posté le 18/04/2008 à 14:03:17  
  1. answer
  1. Prévenir les modérateurs en cas d'abus
 
faut se taper le parcours de l'array, c'est comme en C ou en java ca nan ? avec les indices et une boucle while ? :)

 merci en tous cas :D

 EDIT : j'ai trouvé merki ^^


---------------
Visitez mon site sur la sécurité informatique : http://www.site-naheulbeuk.com
beno5
Assidu (de 10 000 à 19 999 messages postés)
  1. Posté le 18/04/2008 à 16:59:14  
  1. answer
  1. Prévenir les modérateurs en cas d'abus
 
on peut avoir le code? :D

naheulbeuk7
Membre impliqué (de 20 000 à 29 999 messages postés)
  1. Posté le 21/04/2008 à 08:18:32  
  1. answer
  1. Prévenir les modérateurs en cas d'abus
 
c'est pas très propre, mais pour mon appli ca me suffit donc... :whistle:

tableau html :

Code :(Double-cliquez pour supprimer les numéros de ligne)
  1. <table border="1">
  2.  <tr id="a">
  3.    <td id="infrastructures" class="titre">Infrastructures</td>
  4.    <td id="a5" onclick="Couleur(this.id)">-10 m</td>
  5.    <td id="a4" onclick="Couleur(this.id)">-50 m</td>
  6.    <td id="a3" onclick="Couleur(this.id)">-200 m</td>
  7.    <td id="a2" onclick="Couleur(this.id)">-500 m</td>
  8.    <td id="a1" onclick="Couleur(this.id)">+500 m</td>
  9.  </tr>
  10.  <tr id="b">
  11.    <td id="activites" class="titre">Activités</td>
  12.    <td id="b5" onclick="Couleur(this.id)">-10 m</td>
  13.    <td id="b4" onclick="Couleur(this.id)">-50 m</td>
  14.    <td id="b3" onclick="Couleur(this.id)">-200 m</td>
  15.    <td id="b2" onclick="Couleur(this.id)">-500 m</td>
  16.    <td id="b1" onclick="Couleur(this.id)">+500 m</td>
  17.  </tr>


javascript (merci Beno@) :D :

Code :(Double-cliquez pour supprimer les numéros de ligne)
  1. function Couleur (id){
  2. /*---
  3. - rien, on clic -> on surligne
  4. - case deja surlignée, clic sur autre -> on enleve la 1ere, met la 2e
  5. - case déjà surlignée, clic sur même -> on enleve la 1ere */
  6.  
  7. // ici on configure la couleur au clic:
  8.  var couleur = '#eeffee';
  9.  
  10.  var res = document.getElementById(id);
  11.  var row=id.charAt(0);
  12.  
  13.  var trouve=0;
  14.  var indice=-1;
  15.  for (var i=0; i<tab.length; i++){
  16.    if (tab[i]==row){
  17.      trouve = 1;
  18.      indice = i;
  19.      break;
  20.    }
  21.  }
  22.  
  23.  if (res.style.background == '' || res.style.background == 'transparent none repeat scroll 0% 0%') // pas coloriée{
  24.    if(trouve == 1){ // déjà une case colorée dans la ligne
  25.      for (var j=1; j<=5; j++){ // 5 est "en dur" car j'ai 5 colonnes dans mon tableau
  26.        cell = document.getElementById(row+j);
  27.        cell.style.background = 'transparent';
  28.      }
  29.      res.style.background = couleur;
  30.    }
  31.    else{ // ligne vierge
  32.      res.style.background = couleur;
  33.      tab.push(row);
  34.    }
  35.  }
  36.  else{ // déjà coloriée
  37.    res.style.background = 'transparent';
  38.    tab[indice]=''; // enlève de la liste
  39.    for (var j=indice+1; j<tab.length; j++){
  40.      tab[j-1]=tab[j];
  41.    }
  42.  }
  43. }


Edit par Tintin10 : rajout des balises de code
Message édité par Tintin10 le 05/08/2015 à 18:40:02

---------------
Visitez mon site sur la sécurité informatique : http://www.site-naheulbeuk.com
elana
  1. Posté le 07/07/2009 à 09:26:00  
  1. answer
  1. Prévenir les modérateurs en cas d'abus
 
Bonjour Beno,

J'aimerais utiliser ton script :

seulement, mon menu est présenté comme ceci : (avec des dl et des dt !)
Du coup (ou peut-être est-ce du à autre chose : je suis peut-être passé à côté d'une évidence !), cela ne marche pas...

Merci pour l'aide !
Code :(Double-cliquez pour supprimer les numéros de ligne)
  1. <script type="text/javascript">
  2.  function Couleur (id){
  3. /*---
  4. - rien, on clic -> on surligne
  5. - case deja surlignée, clic sur autre -> on enleve la 1ere, met la 2e
  6. - case déjà surlignée, clic sur même -> on enleve la 1ere*/
  7.  
  8. // ici on configure la couleur au clic:
  9.  this.couleur = '#FFFFFF';
  10.  
  11.  this.id=id;
  12.  
  13.  if (typeof this.highlighted=='undefined' || this.highlighted==''){
  14.    document.getElementById(this.id).style.background = this.couleur;
  15.    this.highlighted=this.id;
  16.  }
  17.  else{
  18.    if (this.id!=this.highlighted){
  19.      document.getElementById(this.id).style.background = this.couleur;
  20.      document.getElementById(this.highlighted).style.background = 'transparent';
  21.      this.highlighted = this.id;
  22.    }
  23.    else{
  24.      document.getElementById(this.id).style.background = 'transparent';
  25.      this.highlighted = '';
  26.    }
  27.  }
  28. }
  29. <dl class="nav3-grid">
  30.  <dt id="c1" onclick="Couleur(this.id)">
  31.    <a href="refIndex.jsp">Index</a>
  32.  </dt>
  33.  <dt id="c2" onclick="Couleur(this.id)>
  34.    <a href="blabla.jsp">blabla</a>
  35.  </dt>
  36. </dl>


Edit par Tintin10 : rajout des balises de code
Message édité par Tintin10 le 05/08/2015 à 18:46:19
paulwayne
  1. Posté le 27/08/2009 à 14:29:16  
  1. answer
  1. Prévenir les modérateurs en cas d'abus
 
j'ai essayer de faire le meme chose sur mon site mais quand je emts un lien ça ne marche pas ,au contraire en mettant un # à la plece du lien tout marche.je ne comprend pas ça si quelqu'un pourrait m'aider.

flocon77720
Bébé forumeur (De 10 à 49 messages postés)
  1. Posté le 15/09/2012 à 23:12:16  
  1. answer
  1. Prévenir les modérateurs en cas d'abus
 
Pour aider les prochains :

 Pour changer la couleur du texte
 onFocus="this.style.color='bla​ck'}" //Lorqu'on est dans la cellule
 onBlur="this.style.color='grey​'}"   //Lorsqu'on en sort

 Pour changer la couleur de la cellule
 onFocus="this.style.background​='black'}"  //Lorqu'on est dans la cellule
 onBlur="this.style.background=​'grey'}"    //Lorsqu'on en sort

 Page :
1

Aller à :
 

Sujets relatifs
changer de langue Anglais <-----> Francais MX 2004 Maccromed skyblog changer date article
technique ou logiciel changer mes liens d'un seul coup [CSS] demande d'aide. changer le fond d'une zone au passage de souris
pas de couleur pour les lien Donnez moi une bonne régie publicitaire qui paye au clic !!!
logiel pour changer les visages Sous Excel : comment mettre une cellule en format monétaire "F"
lorsqu'on a renoncé à IE  
Plus de sujets relatifs à : Changer la couleur d'une cellule lorsqu'on clic