|
|
Auteur
|
Message
|
1
|
|
|
|
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<--
|
|
|
|
|
salut, il faut utiliser les styles CSS
voir le site http://www.gotapi.com/html ou www.editeurjavascript.com
-------
www.roodali.com script gratuits
Dans l'immense univers qu'est le web, dont google est la voie lactée, nous essayons chacun d'être une étoile ou de devenir une constellation
|
|
|
|
|
|
onclick="this.style.background-color='#eeeeee'"
|
|
|
|
|
|
Vu que je suis loin d'étre bon pourrais tu développer Beno@ pour une p'tite cervelle comme la mienne
|
|
|
|
|
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
|
|
|
|
|
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 
|
|
|
|
|
|
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.
|
|
|
|
|
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
|
|
|
|
|
J'ai rééssayer, lorsque je clic sur une cellule elle change bien de couleur ça c'est nickel  mais dés qe je clique sur une deuxiéme, la premiére reste coloré 
|
|
|
|
|
S'il vous plait à l'aide 
|
|
|
|
|
à cause de toi j'ai du apprendre à utiliser les classes en javascript 
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)">
|
|
|
|
|
Merci beaucoup ca marche nickel  Beno@ et en plus grace a moi tu a appris quelque chose
Encore Merci
|
|
|
|
|
Hummm !
juste ce que cherchais
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 
shusssssssssss
|
|
|
|
|
bonjour, je déterre un sujet désolé... 
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  )
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
|
|
|
|
|
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...
|
|
|
|
|
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
EDIT : j'ai trouvé merki ^^
-->Message édité par naheulbeuk le 18/04/2008 16:09:41<--
|
|
|
|
|
|
on peut avoir le code?
|
|
|
|
|
c'est pas très propre, mais pour mon appli ca me suffit donc...
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@) :
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<--
|
|
|
1
|
