Nested Hyperlinked Areas Without Nested Link Elements In Html Source

May 30, 2023 Post a Comment

I'd like to have something that looks and behaves as hyperlink inside larger rectangle (full page wide) which is also hyperlink. Below there is ASCII-art representation of what it

Solution 1:

You could try something like this:

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.cspan {
  display: none;
}

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

Solution 2:

Perhaps this would work?

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">
  <spanclass="someText">Some Text</span><ahref="#"class="someLink"><spanclass="linkText">Link Text</span></a>
</div>

Solution 3:

What I have done in the past is use Javascript to attach the proper functionality to the div (assuming that is the parent element) so that when it is clicked, window.location is ran opening the .href attribute of the child link.

Something like this perhaps.

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

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

Solution 4:

Just place on onclick event handler on the outer element which when clicked calls "window.location ='yourURLhere';"

You could add a style attribute - "cursor:pointer" to get the hand cursor when mouse over.

You could also have a css hover code block to get the colour changes.

EDIT: just realised no javascript, so in that case, keep the 'a' tag and simply define a style for it in css, that way you can give it height, width, etc.

Solution 5:

A float with negative margins should work as well.

Tested (in IE6 only):

<!DOCTYPE htmlPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><title>Link within link</title><styletype="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><ahref="foo"Class="foo"><divclass="Parent">foo </div></a><divclass="sub"><ahref="bar">Link text</a></div></body></html>

You do realize the great potential for user confusion.

Html5 Development