ansaurus

Question

Nested hyperlinked areas without nested link elements in HTML source

Answer 1

A:

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");
});

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

Jonathan Sampson 2009-01-16 00:27:07

He said no Javascript.

Paolo Bergantino 2009-01-16 00:29:41

You're right. Perhaps my second response will suffice.

Jonathan Sampson 2009-01-16 00:38:33

Answer 2

+1 A:

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

Jonathan Sampson 2009-01-16 00:32:07

Smashing Magazine recently suggested something similar, but using padding rather than width and height since block will already fill up the available area. http://www.smashingmagazine.com/2008/12/15/10-useful-techniques-to-improve-your-user-interface-designs/

DavGarcia 2009-01-16 00:38:18

Thanks for the link - this response was ad-hoc, so I will enjoy reading what SM has to say on the technique.

Jonathan Sampson 2009-01-16 00:42:33

I'm confused.. where is the outer link?

Paolo Bergantino 2009-01-16 00:50:14

@Paolo, There is no "outer link." Visually, there is, but semantically there isn't. Instead, the inner link is 100% the width of the parent, and 100% the height too. No matter where you click on the parent, you will be clicking on the inner link.

Jonathan Sampson 2009-01-16 00:56:09

Answer 3

A:

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.

Jobo 2009-01-16 00:34:18

Answer 4

+1 A:

You could try something like this:

<style type="text/css" media="screen">
    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;
    }
</style>

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

Gumbo 2009-01-16 00:40:42

Answer 5

A:

A float with negative margins should work as well.

Tested (in IE6 only):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
<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>

You do realize the great potential for user confusion.

Traingamer 2009-01-16 15:14:30

ansaurus

tags:

views:

answers:

Nested hyperlinked areas without nested link elements in HTML source

related questions