Aller au contenu

Lien hypertexte sur toute une ligne de tableau


Sujets conseillés

Posté

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

Posté

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
Posté

Salut, si tu nous donnais une url pour voir la page, ça pourrait aider ... ;)

ou bien tu nous montre le code...

Parce que j'ai pas bien compris ce que tu veux faire?

Posté (modifié)
<table>
<tr><a href="fichier.htlm"><td>un</td><td>deux</td></a></tr>
</table>

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

Modifié par Raoulmapoule
Posté
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:

Posté

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

Posté

Comment as-tu fais Dan ?

Je viens de faire un essai avec IE6 et Mozilla 1.3.1

... sans succès :huh:

Posté

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... ;)

Posté

Pour info :

En fait le onMouseover fonctionne correctemet sous netscape à partir du moment ou il y a appel de fonction.

Il ne semble pas accepter qu'on lui donne dirrectement du code. ;)

Posté
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

Posté

Raoulmapoule (m'y f'rais jamais, à ton pseudo... :1eye: )

cette page est-elle en ligne, que je puisse voir l'entièreté du code ?

Posté

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

Posté

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'à !!

Posté

Bonjour Raoul,

Je viens de regarder le code de ta page.

Effectivement, la solution de Dan me semble la meilleure.

Veuillez vous connecter pour commenter

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



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