Tableau HTML

Fermé
Seyki - 26 juin 2004 à 15:39
 seyki - 30 juin 2004 à 20:48
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
A voir également:

13 réponses

GallyNet Messages postés 434 Date d'inscription mardi 1 juin 2004 Statut Membre Dernière intervention 15 décembre 2008 386
26 juin 2004 à 17:37
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.
0
Aoui !? Et bien il se trouve que je travail en php, que me conseille tu ?
0
GallyNet Messages postés 434 Date d'inscription mardi 1 juin 2004 Statut Membre Dernière intervention 15 décembre 2008 386
27 juin 2004 à 11:22
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 )
0
Je n'ai pas trés bien compris ta condition, quand tu met if(action="lien"), action correspond à quoi exactement ?
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Marden Messages postés 1072 Date d'inscription dimanche 11 février 2001 Statut Membre Dernière intervention 29 janvier 2006 208
27 juin 2004 à 16:16
Changer la couleur des cellules au passage de la souris :
http://www.editeurjavascript.com/tips/tips_autres_06.php
0
GallyNet Messages postés 434 Date d'inscription mardi 1 juin 2004 Statut Membre Dernière intervention 15 décembre 2008 386
27 juin 2004 à 16:26
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>
0
SirHill Messages postés 4060 Date d'inscription vendredi 19 mars 2004 Statut Contributeur Dernière intervention 19 avril 2020 542
27 juin 2004 à 19:25
Salut,

Jette également un oeil ici :
http://www.commentcamarche.net/forum/affich-667150#2

A+
0
Utilisateur anonyme
28 juin 2004 à 09:23
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>



;-)
0
Jean-François Pillou Messages postés 18707 Date d'inscription lundi 15 février 1999 Statut Webmaster Dernière intervention 16 février 2023 63 270
30 juin 2004 à 09:38


                                   
Jeff  \--WM@CCM--/ 
0
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+
0
SirHill Messages postés 4060 Date d'inscription vendredi 19 mars 2004 Statut Contributeur Dernière intervention 19 avril 2020 542
29 juin 2004 à 01:27
Souhaites-tu garder le changement de couleur des cellules lors du passage de la souris ?
0
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.
0
SirHill Messages postés 4060 Date d'inscription vendredi 19 mars 2004 Statut Contributeur Dernière intervention 19 avril 2020 542
30 juin 2004 à 01:33
Voici le code, à optimiser :o)

<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+
0
jte remercie bocoup ut ma vachement aider merci a+
0