Zones hyperliées imbriquées sans éléments de lien imbriqués dans la source HTML

Question

Je voudrais avoir quelque chose qui ressemble et se comporte comme un hyperlien dans un rectangle plus grand (page entière) qui est aussi un lien hypertexte. Ci-dessous une représentation ASCII-art de ce qu'il devrait ressembler à:

 
|-------------------------------------------| 
| Some text [_link_]       | 
|-------------------------------------------| 

Le rectangle extérieur entier (élément de bloc) doit être lien hypertexte. A l'intérieur de ce rectangle il devrait y avoir du texte, et à la fin de ce texte il devrait y avoir un autre lien.

liens Malheureusement imbrication (A éléments) est illégale en (X) HTML:

12.2.2 liens emboîtés sont illégales

Liens et points d'ancrage définis par l'élément A ne doit pas être imbriquées ; an Un élément ne doit pas contenir d'autres éléments A.

(de http://www.w3.org/TR/html401/struct/links.html#h-12.2.2), de sorte que la façon la plus naturelle de la mise en œuvre ci-dessus

<a href="xxx" style="display: block"> 
    Some text 
    <a href="yyy">link</a> 
</a> 

n'est pas valide HTML. Ce qui est encore pire est que certains navigateurs Web dans certains cas imposent cette exigence en déplaçant l'élément de liaison interne juste à l'extérieur de l'élément de fermeture de l'élément de liaison externe. Cela, bien sûr, brise complètement la disposition.

Donc ce que je voudrais vous demander est de savoir comment arriver à la mise en page présenté ci-dessus en utilisant HTML et CSS (mais pas JavaScript), mais sans éléments de liaison imbriqués dans la source HTML. Ce serait bien si le comportement était le plus proche possible de celui avec les éléments de lien imbriqués (pour les navigateurs qui ne sont pas trop stricts dans l'implémentation de la norme HTML).

---

Modifier (16-01-2009)

Précision: Solutions qui utilisent plus de deux éléments de liaison sont parfaitement acceptables

<a href="xxx" ...>Some text</a> 
<a href="yyy" ...>Link</a> 
<a href="xxx" ...>& nbsp;</a> 
... 

Answer 1

Vous pourriez essayer quelque chose comme ceci:

div.a { 
 
    position: relative; 
 
    background-color: #F88; 
 
    z-index: 0; 
 
} 
 
a.b { 
 
    position: relative; 
 
    z-index: 2; 
 
} 
 
a.b:hover { 
 
    background-color: #8F8; 
 
} 
 
a.c { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    z-index: 1; 
 
} 
 
a.c:hover { 
 
    background-color: #88F; 
 
} 
 
a.c span { 
 
    display: none; 
 
}

<div class="a"> 
 
    foo 
 
    <a href="bar" class="b">bar</a> 
 
    <a href="foo" class="c"><span>baz</span></a> 
 
</div>

Answer 2

Ce que je l'ai fait dans le passé est l'utilisation de Javascript pour attacher la fonctionnalité appropriée à la div (en supposant que c'est l'élément parent) de sorte que lorsqu'on clique dessus, window.location est exécuté en ouvrant l'attribut .href du lien enfant.

Quelque chose comme ça peut-être.

// jQuery Code 
$(".parentDivLink").click(function(){ 
    window.location = $(this).find("a.mainLink").attr("href"); 
}); 

<div class="parentDivLink"> 
    <a href="http://www.google.com" title="Google" class="mainLink">Click Me</a> 
</div> 

Answer 3

Peut-être que cela fonctionnerait?

div.parentBox { 
    position:relative; 
    height:100px; 
} 
    a.someLink { 
    position:absolute; 
    top:0; 
    left:0; 
    height:100px; 
    } 

// Now just position the two spans 

<div class="parentBox"> 
    <span class="someText">Some Text</span> 
    <a href="#" class="someLink"> 
    <span class="linkText">Link Text</span> 
    </a> 
</div> 

Answer 4

Il suffit de placer le gestionnaire d'événements onclick sur l'élément extérieur qui lorsque les appels clicked "de window.location = 'yourURLhere';"

Vous pouvez ajouter un attribut de style - "curseur: pointeur" pour obtenir le curseur de la main lorsque vous passez la souris.

Vous pouvez également avoir un bloc de code CSS stationnaire pour obtenir les changements de couleur.

EDIT: vient de réaliser sans javascript, donc dans ce cas, garder la « une » étiquette et définir simplement un style pour en css, de cette façon vous pouvez lui donner la hauteur, la largeur, etc.

Answer 5

Un flotteur avec des marges négatives devrait fonctionner aussi bien.

Testé (IE6 seulement):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head><title>Link within link</title> 
<style type="text/css"> 
.Parent { 
width: 500px; 
background-color: yellow; 
} 
.sub { 
float: left; 
margin-left: -300px; 
} 
.foo { 
display:block; 
float: left; 
text-decoration: none; 
} 
</style> 
</head> 
<body> 
<a href="foo" Class="foo"><div class="Parent">foo </div></a> 
<div class="sub"><a href="bar">Link text</a></div> 
</body> 
</html> 

Vous vous rendez compte du grand potentiel de confusion chez les utilisateurs.