página - Áreas hipervinculadas anidadas sin elementos de enlace anidados en fuente HTML
hipervinculo html5 (5)
Lo que he hecho en el pasado es usar Javascript para adjuntar la funcionalidad adecuada al div (suponiendo que sea el elemento padre) para que cuando se haga clic en él, se ejecute window.location abriendo el atributo .href del enlace secundario.
Algo como esto tal vez.
// 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>
Me gustaría tener algo que se vea y se comporte como hipervínculo dentro de un rectángulo más grande (de página completa) que también es hipervínculo. A continuación hay una representación de arte ASCII de lo que debería ser:
|-------------------------------------------| | Some text [_link_] | |-------------------------------------------|
Todo el rectángulo externo (elemento de bloque) debe ser hipervínculo. Dentro de este rectángulo debe haber algo de texto, y al final de este texto debe haber otro enlace.
Lamentablemente, los enlaces de anidamiento (elementos A) son ilegales en (X) HTML:
12.2.2 Los enlaces anidados son ilegales
Los enlaces y anclas definidos por el elemento A no deben estar anidados; un elemento A no debe contener ningún otro elemento A.
(de http://www.w3.org/TR/html401/struct/links.html#h-12.2.2 ), por lo que la forma más natural de implementación anterior
<a href="xxx" style="display: block">
Some text
<a href="yyy">link</a>
</a>
no es HTML válido Lo que es aún peor es que algunos navegadores web en algunos casos hacen cumplir este requisito moviendo el elemento de enlace interno justo afuera del elemento de cierre del elemento de enlace externo. Esto, por supuesto, rompe completamente el diseño.
Entonces, lo que me gustaría preguntar es cómo llegar al diseño presentado anteriormente utilizando HTML y CSS (pero no JavaScript), pero sin elementos de enlace anidados en el código fuente HTML. Sería bueno si el comportamiento fuera lo más parecido posible al que tiene elementos de enlace anidados (para los navegadores que no son demasiado estrictos al implementar el estándar HTML).
Editar (16-01-2009)
Aclaración: las soluciones que usan más de dos elementos de enlace son perfectamente aceptables
<a href="xxx" ...>Some text</a>
<a href="yyy" ...>Link</a>
<a href="xxx" ...>& nbsp;</a>
...
Quizás esto funcionaría?
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>
Simplemente coloque el controlador de eventos onclick en el elemento externo que al hacer clic en llamadas "window.location = ''yourURLhere'';"
Podría agregar un atributo de estilo - "cursor: puntero" para obtener el cursor de la mano cuando el mouse pase.
También puede tener un bloque de código css hover para obtener los cambios de color.
EDITAR: simplemente no se ha realizado javascript, así que en ese caso, conserve la etiqueta ''a'' y simplemente defina un estilo para ella en css, de esa manera puede darle altura, ancho, etc.
Un flotador con márgenes negativos debería funcionar también.
Probado (solo en IE6):
<!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>
Te das cuenta del gran potencial de confusión del usuario.
Podrías probar algo como esto:
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>