Make a Div Into a Link

It’s easy to make a div into a link using a bit of javascript. You can use this technique to make any div “clickable”. For example, you might want your “header” div to link to your home page. Here’s how:

<div onclick="location.href='http://www.example.com';" style="cursor:pointer;"></div>

If you’re using a standard WordPress theme, you can make your header div clickable by doing this:

<div id="header" onclick="location.href='<?php bloginfo('url');?>';" style="cursor:pointer;"></div>

That’s it!

Advertisements

Published by

Trevor Turk

A chess-playing machine of the late 18th century, promoted as an automaton but later proved a hoax.

113 thoughts on “Make a Div Into a Link”

  1. This makes life so much easier. Though.. would there be a way to alter the overstate of a link inside the div. I have a table inside and I can't change that at this time …. the table has a link within to the same page.

    Any thoughts?

  2. This does not *really* make the div into a link. It just makes it clickable. If you right click on the div you do not get the menu options to copy the link target or open the link in a new window/tab that you have for *real* links.

  3. So my DIV responds to clicks now, but how do all the buttons in my DIV from bubbling up their click event to the DIV's handler? I don't want to add "e.stopPropagation()" to all my contained buttons/links…

  4. Great tips thanks!

    @Jake: I know it's an old comment but did you try 'div table a:hover' in your css ?

  5. I think it would be better to put an rel="nofollow" inside of the link and using CSS to set 'display: block;', 'width: 100%;', and 'height: 100%;' on the link. It would be better if you knew the width and height of the containing to set in the CSS instead of using 100%.

    Just my opinion. But, 6% of people who visited w3schools.com didn't use JavaScript.

  6. I used to use this technique.

    I think that changing your <a> tag to display:block; with CSS and assigning a width and height (and any other styling) is a much better solution. This makes the "div" (the <a> is a block element now) clickable and works *exactly* like a link should, no javascript.

  7. I do not believe that the block style will work in my situation. I have a drop down menu over the "div" If the drop down passes over a block container I lose mouse function in the drop down menu.

    Still no solution on making the target="blank" when the div is a link.

  8. Thnx it works πŸ™‚

    I first made in my css file the link with div#name a {}

    but than your class='name' becomes id='name' and you can't use style='left: px; top: px' anymore

    So this is perfect πŸ™‚

  9. So many people, so many wishes…

    Worked for me in the first try. Flawless, Effortless.

    Great! πŸ˜€

  10. Oops! looks like the comments are html sensitive. Again:

    Accessibility, diasabled javascript, context menu behaviour and lack of status bar feedback be partially resolved this way:

    Inside the <div> make sure you also have an <a> with the same link as the javascript. So, enclose the main image or text line in that anchor. At least over that anchor, all standard behaviours work and this method then takes care to fill all visual gaps around that main link.

  11. Three years later, and this article is still helping people. Thanks a lot, this was just what I needed.

  12. How's about:

    <code>

    </code>

    Will it ever stop working?

    XHTML 2 has *all* elements linkable (the anchor tag is no more)… 'tis the way of the future.

  13. I'm pretty sure you can implement this same thing just with CSS, right? I found something awhile ago that showed how to do it, but I can't remember now…

  14. Not a good idea, it won't work without javascript.

    Use CSS instead:

    HTML:

    CSS:

    div#button a {

    display:block

    }

    Never use javascript for layout unless absolutely necessary (and make sure all javascript functionality has a fallback for users with javascript disabled)

  15. Excellent. You just saved my life. Works in all browsers combined with the dropdown divs I'm using. Thank you!

  16. I dont understand can you explain -using wordpress if you are creating a new div or copying the code – inside the picture header div – thanks

  17. This is great and a nice easy clean tip thanks heaps

    BUT…

    I can't seem to get it to work in IE7 when it is a nested div in a containing div. Works fine in FF.

    Any ideas?

  18. If you want to make a div transparent, this is a very nice solution.

    But if you want another one, a bit more to write in codeway, but imho better is like i have done on my site.

    1: Create a file, 1×1 px. Call it transparent.gif

    2: Add this to your div:

    That way you make a transparent picture inside the div that you can make as big/small you want. The tranpsarent picture is then linked.. Easy and xhtml fine.

    For wordpress you can use this (makes your header pic linkable to the startpage) (Put your transparent.gif inside your images folder in your templade folder)

    <img src="/images/transparent.gif" width="988" height="300" alt="Header" />

    Obviously, change the width and height to whatever suits you.

  19. Well…so simple and effective. This kind of stuff(simple and effective) is quite difficult to find in the internet. Normally there's a big explanation saying nothing..

    Very nice:)

  20. OK I'm a html noob… but does this work for AP Div tags in which the info is in another CSS file? cos its not working for me

  21. psuodo classes-

    #divid:hover {css stuff here}
    #divid:active {css for click state here}

  22. This is a good tip BUT – why not just wrap it in an <a> tag? That's what I do and it means no JS! Like <div></div>? Or is that onyl available in certain conditions or to certain browsers?

  23. Please do not do this as it prevents cross-browser testing using Selenium. IE cannot handle this properly and it assumes that a link is an <a>. To all appearences it will link but please don't do it, just remove the href if you don't need it.

  24. Actually, I used this tip because a recent IE update made "Curvy Corners" break when trying to wrap a rounded DIV or SPAN with an anchor tag. It definitely works, and saved my butt and our corporate website.

Comments are closed.