Forum d'entraide PHPFrance

Bonjour à toute la communauté,

je cherche désespérement comment créer un lien sur une cellule entière de tableau. Je vois ça de plus en plus sur les site web, avec par exemple la cellule du tableau qui change de couleur au survol de la souris. Est ce possible a réaliser seulement avec du HTML et CSS ?

en html :

Code : Tout sélectionner

<tr onclick="location='xxx.htm'">

ok ça marche, sauf que le curseur reste le meme, il ne se change pas en pointeur de lien. Peut-on regler ce probleme ? Peut-on egalement changer la background-color de la cellule au survol de la souris ?

Môsieur est servi

Code : Tout sélectionner

<tr onmouseover="javascript:this.style.background='#efefef" onmouseout="javascript:this.style.background='#F7F7F7'" bgcolor="#F7F7F7" onclick="location='xxx.htm'" style="cursor:pointer">

ouah extra : ) est-il possible de passer ces 3 commandes javascript dans un css pour la classe td ? j'ai essayé mais le JS ne passait pas, mais peut etre me suis-je trompé de synthaxe en modifiant les lignes. Mais en fait ça m'etonnerais que le JS soit possible ds le CSS. confirmation ?

Je pense que c'est très fortement possible

Je vais voir ça dès que j'aurais le temps. A moins qu'une âme charitable le fasse avant moua

Style :

Code : Tout sélectionner

<style>
  tr:hover, tr.over {
  	background-color: #ffccff;
	cursor:pointer;
	}
</style>

Tableau :

Code : Tout sélectionner

<table>
<tr onmouseover="this.className = 'over';" onmouseout="this.className = this.className.replace('over', '');">
	<td>toto</td>
</tr>
</table>

merci

et comment faire pour que le lien qu'il y a dans la cellule change de couleur en même temps qu'on met le pointeur dans la cellule SANS pointer sur le texte lien ...

et comment faire pour que le lien qu'il y a dans la cellule change de couleur en même temps qu'on met le pointeur dans la cellule SANS pointer sur le texte lien ...

Bonjour ?? merci ??

ça dois certainement etre possible en CSS

Mets le texte contenu dans la cellule dans un élément de type "bloc" : <p></p> par exemple, sinon, pour simplement ton texte entre balises <a></a>, ajoute un style CSS sur les liens avec "display: bloc" et ça devrait résoudre le probleme.

Oui, dsl ... j'ai tapé et envoyé le message un peu vite .. car G T o taff

Bonjour tous les monde

Donc merci pour votre réponse, mais je ne parviens pas a faire ce que vous m'indiquez ... enfin dans quel ordre et quel truc dans l'autre

J'ai cherché sur display ... mais ce n'est pas très concluant.

Pourriez vous m'indiquer les balises ?

Merci !

Si tu as actuellement un code html comme ceci:

//...
  <tr>
    <td><a href="vers/une/page.html" title="titre du lien">toto</a></td>
  </tr>
//...

Avec un style CSS, tu peux faire la chose suivante:

Code : Tout sélectionner

td a {
    display: block;
}

De cette manière, l'effet de survol aura lieu sur toute la largeur de la cellule. Maintenant, il resterait le problème de la hauteur qui ne sera pas forcément bien couverte en haut et en bas. Il faudrait alors uniformiser les dimensions du contenant et du contenu. Première chose, supprimer les marges intérieures de la cellule, et ensuite définition de la hauteur de ligne du contenu. On reprend donc notre style css, voici un exemple complet:

<?xml version="1.0" encoding="iso-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" xml:lang="fr" />
<title>Effets de survol sur des cellules de tableau HTML</title>
<meta http-equiv="Content-language" content="FR-fr" xml:lang="fr" dir="ltr" />
<style type="text/css">
/* <![CDATA[ */
table {
    border-collapse: collapse;
}
td {
    padding: 0;
    height: 24px;
    border: 1px solid #c00;
    color: #000;
    background-color: #ff0;
    width: 250px;
}
td a {
    line-height: 24px;
    margin: 0;
    display: block;
    color: #339;
    background-color: #ccc;
}
td a:hover {
    color: #fff;
    background-color: #933;
}
/* ]]> */
</style>
</head>
<body>
<table summary="">
  <tr>
    <td>Pour voir la page de toto</td>
    <td><a href="#" title=""> toto </a></td>
  </tr>
  <tr>
    <td>Pour voir la page de titi</td>
    <td><a href="#" title=""> titi </a></td>
  </tr>
  <tr>
    <td>Pour voir la page de zaza</td>
    <td><a href="#" title=""> zaza </a></td>
  </tr>
</table>
</body>
</html>

merci c'est bien cette effet, mais là tu as gérénalisé a tous les td ... et j'arrive pas à lle personnaliser et mettreune classe au <td class="lientd"> par exemple

Si tu veux ajouter une classe à une ou plusieurs cellules particulières, alors modifie le CSS comme ceci:

Code : Tout sélectionner

td.lientd a{
    propriété: valeur;
}