Aller au contenu

Lien hypertexte sur toute une ligne de tableau


Raoulmapoule

Sujets conseillés

Bonjour,

Comment faire un lien hypertexte sur toute une ligne dans un tableau HTML ?

Je voudrais que toutes les cellules de la ligne réagissent en même temps lors du passage de la souris.

Moi je n'ai réussi qu'à mettre un lien par cellule, ce qui n'est pas très esthétique pour ce que je veux faire.

Merci pour vos suggestions

Lien vers le commentaire
Partager sur d’autres sites

Bonjour,

J'ai une mauvaise nouvelle... ce n'est pas possible :(

Un élément de type en-ligne (inline element) comme la balise a ne peut pas contenir d'élément de type blocs (block-level element)

Si tu essaies de passer un bout de code comme celui-ci

<table>
<tr><a href="fichier.htlm"><td>un</td><td>deux</td></a></tr>
<tr><td>trois</td><td>quatre</td></tr>
</table>

au validateur WDG tu obtiens ce message d'erreur :

Error: element A not allowed here; possible cause is an inline element containing a block-level element
Lien vers le commentaire
Partager sur d’autres sites

Le petit exemple de Monique resume très bien ce que je voudrais faire.

Oui... hélas, tel quel, ce n'est pas possible.

Peut-être y a-t-il moyen de contourner le problème, je ne sais pas :unsure:

Lien vers le commentaire
Partager sur d’autres sites

Salut Raoulmapoule,

En mettant la balise <a> de manière à ce qu'elle englobe la balise <tr>, ça fonctionne sur IE.

<table>
<a href="fichier.htlm"><tr><td>un</td><td>deux</td></tr></a>
</table>

Par contre, cela ne valide pas, et il faudra essayer avec d'autres navigateurs. C'est une utilisation un peu "à contre-courant W3C".

Dan

Lien vers le commentaire
Partager sur d’autres sites

Pour ma part j'ai fait l'essai sous IE6 et c'est bcp dire que ça marche.

En fait ça rend bien le texte cliquable, mais le hover ne marche pas.

De plus le style du texte ne change pas, autrement dit il n'est pas reconnu comme lien et garde le style par defaut.

De toute façon ça ne marche pas sous netscape :nono:

J'explore à nouveau la piste javascript car j'ai trouvé un script avec onMouseover qui semble fonctionner sous netscape, a suivre... ;)

Lien vers le commentaire
Partager sur d’autres sites

Comment as-tu fais Dan ?

Je viens de faire un essai avec IE6 et Mozilla 1.3.1

... sans succès  :huh:

Monique,

Ca ne change pas le curseur de la souris, mais le texte est cliquable. Je n'ai essayé que sur IE, comme j'étais sur mon portable. Mais je reconnais volontiers que c'est de la "bidouille"... comme je mentionne plus haut (utilisation à contre-courant).

Le mieux serait de faire un rollover déporté pur CSS comme expliqué sur le site d'Eric Meyer, à moins que tu ne nous sortes quelque chose de ton chapeau de magicienne ;)

A mon avis, garder la compatibilité Netscape 4 est aussi une navigation à contre courant. Si on continue à "bricoler" pour moins d'1% d'irréductibles, on en sera toujours là quand CSS3 sera sorti et supporté par -presque- tout le monde.

J'explique en général à mes clients qu'un développement de site compatible NN4 me demande 50% de temps en plus et impose pas mal de limitations sur le plan du rendu visuel, et qu'au final ce temps sera porté sur la facture. Aucun n'a à ce jour jugé ce surcoût utile vu la faible part de marché de NN4. A ce stade là, pourquoi on ne fait pas des sites pour Mosaïc ? :lol:

Les irréductibles de Netscape ont quelques autres versions plus récentes à se mettre sous la dent...

Dan

Lien vers le commentaire
Partager sur d’autres sites

Salut Raoulmapoule,

Je n'ai pas trouvé de solution valable en CSS, mais avec un peu de javascript, on arrive à faire ce que tu cherches.

<table border="1">
<tr  onclick="location.href='index.php', target='_blank'; " onMouseOver="this.style.cursor='hand'; this.bgColor = 'orange'; " onMouseOut ="this.bgColor = 'FFFFFF'">
<td>cellule 1</td><td>cellule 2</td>
</tr>
<tr  onclick="location.href='page2.html', target='_blank'; " onMouseOver="this.style.cursor='hand'; this.bgColor = 'orange'; " onMouseOut ="this.bgColor = 'FFFFFF'">
<td>cellule 3</TD><td>cellule 4</td>
</tr>
</table>

Dan

Lien vers le commentaire
Partager sur d’autres sites

Merci Dan,

Je pense que ta solution est la bonne :D

Les utilisateurs de netscape auront quand même le lien dans la collone "Voir"

et vu que la page initiale fonctionnait comme ça pour tout le monde, ils ne veront aucune différence ! ;)

Bon il n'y a plus qu'à !!

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...