S'abonner :  Newsletters    Magazines
Avis sur les produits Avis sur les logiciels Avis sur les jeux Actualités Blog 01 A propos des forums
185 utilisateurs connectés
Forum de 01net / Développement / [RESOLU] Changer la couleur d'une cellule lorsqu'on clic

[RESOLU] Changer la couleur d'une cellule lorsqu'on clic

madmat5 le 10 juillet 2007 à 10h52
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 madmat5 le 12/07/2007 16:10:32<--
répondre
superted97 le 10 juillet 2007 à 11h54
salut, il faut utiliser les styles CSS
voir le site http://www.gotapi.com/html ou www.editeurjavascript.com
-------
www.roodali.com script gratuits
répondre
Beno@ le 10 juillet 2007 à 12h00
onclick="this.style.background-color='#eeeeee'"
répondre
madmat5 le 10 juillet 2007 à 14h21
Vu que je suis loin d'étre bon pourrais tu développer Beno@ pour une p'tite cervelle comme la mienne
répondre
madmat5 le 10 juillet 2007 à 14h26
Voici en gros ma page :

<html>

<head>

</head>

<body>



<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#00FF00" width="100%" id="AutoNumber4" height="25">
<tr>
<td width="16%" height="25" align="center">
<a href="bureau.htm" style="text-decoration: none; color: #000000; font-family: 'Times New Roman', Arial; font-size: 12pt">Bureau</a></td>
<td width="16%" height="25" align="center">
<a style="text-decoration: none; color: #000000; font-family: 'Times New Roman', Arial; font-size: 12pt" href="agenda.htm">Agenda</a></td>
<td width="17%" height="25" align="center">
<a href="membres.htm" style="text-decoration: none; color: #000000; font-family: 'Times New Roman', Arial; font-size: 12pt">Membres</a></td>
<td width="17%" height="25" align="center">
<a href="partenaire.htm" style="text-decoration: none; color: #000000; font-family: 'Times New Roman', Arial; font-size: 12pt">Partenaires</a></td>
<td width="17%" height="25" align="center">
<a href="forum.htm" style="text-decoration: none; color: #000000; font-family: 'Times New Roman', Arial; font-size: 12pt">Forum</a></td>
<td width="17%" height="25" align="center">
<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></td>
</tr>
</table>



</body>

</html>

Merci
répondre
Beno@ le 10 juillet 2007 à 15h07
je m'etait trompé, c'est:
onclick="this.style.background='#eeeeee'"

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

ici <td> donc ca ferait

<td width="17%" height="25" align="center" onclick="this.style.background='#eeeeee'" >

;)

j'espere que ca marche :D
répondre
madmat5 le 11 juillet 2007 à 08h50
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.
répondre
Beno@ le 11 juillet 2007 à 10h57
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 :/
répondre
madmat5 le 11 juillet 2007 à 14h45
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é :(
répondre
madmat5 le 12 juillet 2007 à 11h42
S'il vous plait à l'aide :pleure:
répondre
Beno@ le 12 juillet 2007 à 15h55
à 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:

<script type="text/javascript">
function Couleur (id)
{

/* ---
- rien, on clic -> on surligne
- case deja surlignée, clic sur autre -> on enleve la 1ere, met la 2e
- case déjà surlignée, clic sur même -> on enleve la 1ere */

// ici on configure la couleur au clic:
this.couleur = '#eeffee';

this.id=id;

if (typeof this.highlighted=='undefined' || this.highlighted=='')
{
document.getElementById(this.id).style.background = this.couleur;
this.highlighted=this.id;
}
else
{
if (this.id!=this.highlighted)
{
document.getElementById(this.id).style.background = this.couleur;
document.getElementById(this.highlighted).style.background = 'transparent';
this.highlighted = this.id;
}
else
{
document.getElementById(this.id).style.background = 'transparent';
this.highlighted = '';
}
}
}
</script>


et le code html d'une cellule:

<td id="c1" onclick="Couleur(this.id)">
répondre
madmat5 le 12 juillet 2007 à 16h08
Merci beaucoup ca marche nickel :super: Beno@ et en plus grace a moi tu a appris quelque chose :D

Encore Merci
répondre
ParMesSoins le 01 avril 2008 à 16h55
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
répondre
naheulbeuk le 18 avril 2008 à 11h46
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
Et son forum : http://www.site-naheulbeuk.com/forum/
répondre
Beno@ le 18 avril 2008 à 14h12
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...
répondre
naheulbeuk le 18 avril 2008 à 15h03
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 ^^
-->Message édité par naheulbeuk le 18/04/2008 16:09:41<--
-------
Visitez mon site sur la sécurité informatique : http://www.site-naheulbeuk.com
Et son forum : http://www.site-naheulbeuk.com/forum/
répondre
Beno@ le 18 avril 2008 à 17h59
on peut avoir le code? :D
répondre
naheulbeuk le 21 avril 2008 à 09h18
c'est pas très propre, mais pour mon appli ca me suffit donc... :whistle:

tableau html :

<table border="1">
<tr id="a">
<td id="infrastructures" class="titre">Infrastructures</td>
<td id="a5" onclick="Couleur(this.id)">-10 m</td>
<td id="a4" onclick="Couleur(this.id)">-50 m</td>
<td id="a3" onclick="Couleur(this.id)">-200 m</td>
<td id="a2" onclick="Couleur(this.id)">-500 m</td>
<td id="a1" onclick="Couleur(this.id)">+500 m</td>
</tr>
<tr id="b">
<td id="activites" class="titre">Activités</td>
<td id="b5" onclick="Couleur(this.id)">-10 m</td>
<td id="b4" onclick="Couleur(this.id)">-50 m</td>
<td id="b3" onclick="Couleur(this.id)">-200 m</td>
<td id="b2" onclick="Couleur(this.id)">-500 m</td>
<td id="b1" onclick="Couleur(this.id)">+500 m</td>
</tr>
</table>


javascript (merci Beno@) :D :

function Couleur (id)
{
/* ---
- rien, on clic -> on surligne
- case deja surlignée, clic sur autre -> on enleve la 1ere, met la 2e
- case déjà surlignée, clic sur même -> on enleve la 1ere */

// ici on configure la couleur au clic:
var couleur = '#eeffee';

var res = document.getElementById(id);
var row=id.charAt(0);

var trouve=0;
var indice=-1;
for (var i=0; i<tab.length; i++){
if(tab==row){
trouve=1;
indice=i;
break;
}
}

if (res.style.background == '' || res.style.background == 'transparent none repeat scroll 0% 0%') // pas coloriée
{
if(trouve == 1){ // déjà une case colorée dans la ligne
for (var j=1; j<=5; j++){ // 5 est "en dur" car j'ai 5 colonnes dans mon tableau
cell = document.getElementById(row+j);
cell.style.background = 'transparent';
}
res.style.background = couleur;
}else{ // ligne vierge
res.style.background = couleur;
tab.push(row);
}
}
else // déjà coloriée
{
res.style.background = 'transparent';
tab[indice]=''; // enlève de la liste
for (var j=indice+1; j<tab.length; j++){
tab[j-1]=tab[j];
}
}
}

-->Message édité par naheulbeuk le 21/04/2008 09:19:22<--
-------
Visitez mon site sur la sécurité informatique : http://www.site-naheulbeuk.com
Et son forum : http://www.site-naheulbeuk.com/forum/
répondre
Elana le 07 juillet 2009 à 10h26
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 !




<script type="text/javascript">
function Couleur (id)
{

/* ---
- rien, on clic -> on surligne
- case deja surlignée, clic sur autre -> on enleve la 1ere, met la 2e
- case déjà surlignée, clic sur même -> on enleve la 1ere */

// ici on configure la couleur au clic:
this.couleur = '#FFFFFF';

this.id=id;

if (typeof this.highlighted=='undefined' || this.highlighted=='')
{
document.getElementById(this.id).style.background = this.couleur;
this.highlighted=this.id;
}
else
{
if (this.id!=this.highlighted)
{
document.getElementById(this.id).style.background = this.couleur;
document.getElementById(this.highlighted).style.background = 'transparent';
this.highlighted = this.id;
}
else
{
document.getElementById(this.id).style.background = 'transparent';
this.highlighted = '';
}
}
}
</script>



<dl class="nav3-grid">


<dt id="c1" onclick="Couleur(this.id)"><a href="refIndex.jsp">Index</a></dt>
<dt id="c2" onclick="Couleur(this.id)><a href="blabla.jsp">blabla</a></dt>


</dl>




répondre
paulwayne le 27 aout 2009 à 15h29
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.
répondre


PRODUITS

TÉLÉCHARGER - LOGICIELS

JEUX VIDÉOS

LOISIRS

01NET PRO

AVIS ET COMMENTAIRES

A PROPOS DE 01NET

Forum de 01net / Développement / [RESOLU] Changer la couleur d'une cellule lorsqu'on clic
publicité
> Logiciel : Kaspersky Internet Security 2010
la solution de sécurité la plus complète du marché.

Service 01net
Newsletters 01net
abonnez vous gratuitement !
Actus
Voir le dernier numéro
Entreprise
Voir le dernier numéro
  
01Informatique
01 INFORMATIQUE
L'hebdo de référence des décideurs informatiques.
Micro Hebdo
MICRO HEBDO
L'hebdo qui vous simplifie la micro
et Internet.
L'Ordinateur Individuel
L'ORDINATEUR INDIVIDUEL
Le mensuel informatique qui vous informe et vous conseille.
Tous droits réservés © 1999 - 2009 Groupe 01 - 01net.