Make a Div Into a Link

May 25th, 2006 by Trevor

It's easy to make any div into a link by 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 it's done (Via):

<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 using this code:

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

Comments

Posting code? Please use Pastie.

Have a question? Please visit the Forum.

16 Comments

  1. Nice idea! (I just wish it didn’t rely on Javascript…)

    Comment by Pete Prodoehl on October 27, 2006

  2. 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?

    Comment by jake on November 16, 2006

  3. Why does the first method (the one with Javascript) not work in IE? Anyone know of any IE browser hacks I could use? Thanks!

    Comment by Gloria on December 7, 2006

  4. So good! Thanks!

    Comment by Darthur on February 27, 2007

  5. Excellent technique!

    We have used it in a nice new design on our site.

    Thanks!

    Comment by Nick on March 29, 2007

  6. Great, I’ve been wanting to do this for a while.

    Thanks

    Comment by Mike Toews on March 31, 2007

  7. You helped me tremendously. Thanks!

    Comment by Steve Castaneda on May 9, 2007

  8. nice. thanks.

    Comment by jmetcalf27 on July 1, 2007

  9. i got my links problem solved. thank you.

    Comment by blogging tips on August 9, 2007

  10. 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.

    Comment by anonymous on August 21, 2007

  11. 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…

    Comment by anonymous on August 31, 2007

  12. Thanks for the help — simple and effective.

    Comment by Sky on September 4, 2007

  13. [...] Few days ago, I was looking for the best way to make a DIV into a link when I came across this website: Almost Effortless!. The author showed how to make a div a link with a little bit of Javascript (see article). It is actually pretty simple: [...]

    Pingback by ::: Web-Kreation.com ::: Freelance Web Designer on October 13, 2007

  14. thanks for this post! Nice clean and easy.

    Comment by Bingeboy on April 15, 2008

  15. Great tips thanks!

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

    Comment by GaB on April 22, 2008

  16. tank you

    Comment by Raphael Fagundes on June 18, 2008