Tableau HTML
Seyki
-
seyki -
seyki -
Bonjour tout le monde, j'ai un petit probleme pourriez vous m'aider svp ?
J'ai crée un tableau d'une seule ligne horizontal, et chaque cellule du tableau correspond à lien. Et je voudrais savoir comment est ce que jpourrais changer la couleur d'une des cellules lorque je clique dessus ? Quelqu'un aurait une petite idée ?
Merci
J'ai crée un tableau d'une seule ligne horizontal, et chaque cellule du tableau correspond à lien. Et je voudrais savoir comment est ce que jpourrais changer la couleur d'une des cellules lorque je clique dessus ? Quelqu'un aurait une petite idée ?
Merci
A voir également:
- Tableau HTML
- Tableau word - Guide
- Tableau ascii - Guide
- Trier un tableau excel - Guide
- Tableau croisé dynamique - Guide
- Editeur html - Télécharger - HTML
13 réponses
Est-ce quand utilisant la method javascript OnClick tu pourais pas y arriver ?
du style :
<tr>
<td id="case01" bgcolor="#FFFFF">
<a onClick="javascript:case01.bgcolor='#FF00FF'"></a>
</td>
</tr>
bien sur ce n'est qu'un exemple qui (j'en suis sur) ne marche pas mais l'idée est là.
Sinon, si tu travail en PHP le probleme devrait être encore plus simple à résoudre.
du style :
<tr>
<td id="case01" bgcolor="#FFFFF">
<a onClick="javascript:case01.bgcolor='#FF00FF'"></a>
</td>
</tr>
bien sur ce n'est qu'un exemple qui (j'en suis sur) ne marche pas mais l'idée est là.
Sinon, si tu travail en PHP le probleme devrait être encore plus simple à résoudre.
Et ben si tu rtavail en PHP, et que tu recharche tout à chaque fois (pas d'utilisation de frame) tu fais changer la couleur de ton tableau par le script.
Si tu a cliquer sur un lien, la page se recharge et avant chaque case du tableau tu test si c'est ce lien qui à été cliqué:
if(action="lien"){
echo "<td bgcolor='#ff55ff'>";
} else {
echo"<td bgcolor='#ffffff'>";
}
(j'espére que tu as compris ce que j'ai essayer d'expliquer )
Si tu a cliquer sur un lien, la page se recharge et avant chaque case du tableau tu test si c'est ce lien qui à été cliqué:
if(action="lien"){
echo "<td bgcolor='#ff55ff'>";
} else {
echo"<td bgcolor='#ffffff'>";
}
(j'espére que tu as compris ce que j'ai essayer d'expliquer )
Je n'ai pas trés bien compris ta condition, quand tu met if(action="lien"), action correspond à quoi exactement ?
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Changer la couleur des cellules au passage de la souris :
http://www.editeurjavascript.com/tips/tips_autres_06.php
http://www.editeurjavascript.com/tips/tips_autres_06.php
Ce que je voulait dire avec (action="lien") c'est si t'est lien sont du style:
<a href="index.php?action=accueil>...</a>
<a href="index.php?action=forum>...</a>
<a href="index.php?action=gallerie>...</a>
<a href="index.php?action=accueil>...</a>
<a href="index.php?action=forum>...</a>
<a href="index.php?action=gallerie>...</a>
Voici une solution possible qui mêle CSS et Javascript:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<style>
table, tr{
background-color: #4444ff;
}
#tdHover{
background-color:#8888ff;
color: #eeeeee;
}
a{
text-decoration: none;
}
a:hover{
color: #ffffff;
}
</style>
<script>
function initHover(){
hoverList = document.getElementsByName("tdHover");
for(i=0 ; i<hoverList.length ; i++){
hoverList[i].onmouseover=tdOnMouseOver;
hoverList[i].onmouseout=tdOnMouseOut;
}
}
function tdOnMouseOver(){
this.style.backgroundColor="#ff0000";
this.style.color="#ffffff";
}
function tdOnMouseOut(){
this.style.backgroundColor="#8888ff";
this.style.color="#eeeeee";
}
</script>
</head>
<body onload="initHover();">
<table>
<tr>
<td name="tdHover" id="tdHover"><a href="https://www.commentcamarche.net/" target="_blank">CCM</a></td>
<td name="tdHover" id="tdHover"><a href="https://www.google.be/?gws_rd=ssl" target="_blank">Google</a></td>
<td name="tdHover" id="tdHover"><a href="https://www.viamichelin.com/" target="_blank">Michelin</a></td>
</tr>
</table>
</body>
</html>
;-)
Merci tous le monde pour l'aide.
SIRHILL c'est le code inscrit ici "http://www.commentcamarche.net/forum/affich-667150#2 "
correspond à ce que je recherche une petite chose près lol.
J'aimerais savoir comment est ce que jpourrais faire pour que lorsque je clique sur l'une des cellules les autre reprennent la couleur par defaut qu'elle avaient avant le clique.
J'ai essayé de faire quelque modif sur ce que tu m'a passé mais bon c pas trop ca, alors si tu as une petite ou idée ou si quelqu'un d'autre a une idée faite le moi savoir.
Merci a+
SIRHILL c'est le code inscrit ici "http://www.commentcamarche.net/forum/affich-667150#2 "
correspond à ce que je recherche une petite chose près lol.
J'aimerais savoir comment est ce que jpourrais faire pour que lorsque je clique sur l'une des cellules les autre reprennent la couleur par defaut qu'elle avaient avant le clique.
J'ai essayé de faire quelque modif sur ce que tu m'a passé mais bon c pas trop ca, alors si tu as une petite ou idée ou si quelqu'un d'autre a une idée faite le moi savoir.
Merci a+
Nan je voudrais juste que lorsqu'on clik sur une cellule celle ci change de couleur et dés que je clik sur une autre lotre cellule reprend sa premièere couleur et la seconde change de couleur.
Voici le code, à optimiser :o)
A+
<html>
<head>
<title>Exemple bis à optimiser :)</title>
<style type="text/css">
<!--
.TR_Normal { background-color: #0099FF}
.TR_Clique { background-color: #FFCC00}
//-->
</style>
<script language="JavaScript">
<!--
function Change(id) {
if(id==1) {
document.getElementById("TR1").className="TR_Clique";
document.getElementById("TR2").className="TR_Normal";
document.getElementById("TR3").className="TR_Normal";
}
if(id==2) {
document.getElementById("TR2").className="TR_Clique";
document.getElementById("TR1").className="TR_Normal";
document.getElementById("TR3").className="TR_Normal";
}
if(id==3) {
document.getElementById("TR3").className="TR_Clique";
document.getElementById("TR1").className="TR_Normal";
document.getElementById("TR2").className="TR_Normal";
}
}
//-->
</script>
</head>
<body>
<div align="center">
<TABLE>
<TR id="TR1" class="TR_Normal" onClick="Change(1);">
<TD width="200" height="100"> </TD>
</TR>
<TR id="TR2" class="TR_Normal" onClick="Change(2);">
<TD width="200" height="100"> </TD>
</TR>
<TR id="TR3" class="TR_Normal" onClick="Change(3);">
<TD width="200" height="100"> </TD>
</TR>
</TABLE>
</div>
</body>
</html>
A+
