ansaurus

Question

HTML - how to make an entire DIV a hyperlink?

Answer 1

+5 A:

You can put an <a> element inside the <div> and set it to display: block and height: 100%.

SLaks 2010-02-02 22:34:50

That won't work because I have a lot of content inside the DIV. I'll update my original post to make it more descriptive

Teddyk 2010-02-02 22:35:46

@Teddy: Adding `position:relative;` to the `div` and then `position: absolute; height: 100%;` to the `a` as well... should make the entire area of the `div` is active.

prodigitalson 2010-02-02 22:37:03

You can put all of that content inside the `<a>`.

SLaks 2010-02-02 22:37:39

Demo: http://jsbin.com/adoka/

SLaks 2010-02-02 22:39:44

That is not true. `<a>` is an inline level element capable of holding only inline level elements. Which means that having `<div>` and/or `<table>` has children of an `<a>` is not valid XHTML. To workaround this limitation, use inline elements and CSS to display them as block level elements. See http://www.cs.sfu.ca/CC/165/common/ref/wdgxhtml10/inline.html for a list of inline elements.

Andrew Moore 2010-02-02 23:09:02

FYI: If the `<a>` were made an overlay, as prodigitalson suggested, then none of the elements "behind" the `<a>` would be selectable.

Christopher Parker 2010-02-03 16:53:16

Answer 2

+4 A:

Add an onclick to your DIV tag.

http://webdevjunk.com/coding/javascript/3/use-onclick-to-make-entire-div-or-other-html-object-into-a-link/

Nissan Fan 2010-02-02 22:35:35

Also, set the div's cursor style to pointer so the whole thing gets the finger.

Michael Itzoe 2010-02-02 22:37:19

The sample at the link shows that setting as well.

Nissan Fan 2010-02-02 22:42:39

Answer 3

+4 A:

You can add the onclick for JavaScript into the div.

<div onclick="location.href='newurl.html';">&nbsp;</div>

EDIT: for new window

<div onclick="window.open('newurl.html','mywindow');" style="cursor: hand;">&nbsp;</div>

Joel Etherton 2010-02-02 22:36:15

When I do that, my mouse cursor doesn't change to a hand like it does when hovering over a link. What am I doing wrong?

Teddyk 2010-02-02 22:42:19

Also, how do I open the link in a new window?

Teddyk 2010-02-02 22:43:59

Nothing, a div does not naturally have the change. You need also to have style="cursor: hand;" as an attribute.

Joel Etherton 2010-02-02 22:43:56

You would need to use window.open. There are many canned scripts that perform this action. http://www.javascript-coder.com/window-popup/javascript-window-open.phtml

Joel Etherton 2010-02-02 22:45:48

@Teddyk: See edit.

Joel Etherton 2010-02-02 22:48:28

if you modified the move to be, cursor:pointer - that works

Teddyk 2010-02-02 22:49:14

Answer 4

A:

alternative would be javascript and forwarding via the onclick event

<div onclick="window.location.href='somewhere...';">...</div>

tDo 2010-02-02 22:36:37

When I do that, my mouse cursor doesn't change to a hand like it does when hovering over a link. What am I doing wrong?

Teddyk 2010-02-02 22:41:53

onclick actually does not make it a link but just clickable.You could use the css cursor attribute to change it likewise.

tDo 2010-02-03 01:39:11

ansaurus

tags:

views:

answers:

HTML - how to make an entire DIV a hyperlink?

related questions