Making a DIV a link with Javascript

October 12, 2007

AJAX / Javascript, All, HTML / CSS, Tutorials

Making DIV a Link - Javascript Vs CSS?

Article written by Jeeremie

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:

The Javascript Technique:

?View Code HTML4STRICT
1
<div id="header" onclick="location.href='index.php';"  style="cursor:pointer;"><a href="#"></a></div>

By this method, the whole block is clickable with just a single line of code while, with CSS, you will need to set few parameters to get the same result. Pretty cool, no?

Here is the CSS technique:

Now, let s see how it works with CSS.

First, put a link inside your div:

?View Code HTML4STRICT
1
<div id="header"><a href="#"></a></div>

…and now set the link s display property to 100% to fill the DIV in your stylesheet:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
#header {
  width: 300px;
  height: 100px;
  border: solid #EEE;
}
 
#header a {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  cursor: pointer; 
}
 
#header a:hover {
  text-decoration: none;
  background-color: #EFEFEF;
}

Conclusion:

As you can see, the Javascript technique is faster than the CSS one but keep in mind that some people might disable Javascript in their browser and won t see the link.
[tags]javascript, css, links, html, tutorial, technology, webdesign[/tags]

The Author

Article written by Jeeremie:

Hi, My Name is Jeremie Tisseau. I am a French UI/UX Designer, Event Organizer and Web Entrepreneur based in Bangkok, Thailand, since January 2009. I design beautiful and functional web and mobile apps for early stage startups.

Tweet

Want to become a guest author on this blog?

11 Comments

  1. ext237 says:

    5 Mar, 2008

    Seeing developers use a div as a hyperlink drives me nuts.  Unwillingness to adhere to standards renders my screen reader useless.Then again, when their clients fail usability/accessibility testing or can t get 508 compliance … they keep us developers who maintain standards  compliance employed.  Guess its a sliver-lining kinda thing, right?

  2. Craig Francis says:

    6 Mar, 2008

    Just to point out, as this method works solely though JavaScript, it
    will not work with browsers (User Agents) that do not support
    JavaScript… for example search engine spiders.

    A better solution is to add one (and only one) link in a <div> as normal, then get
    some JavaScript to find the link, look for the parent element (i.e. the
    div) make that “click able”, and then off-screen the link, so users who cannot use a mouse (screen readers, keyboard navigation) can still use the link.Have a look at:http://www.craigfrancis.co.uk/features/code/jsLinkedHolder/ Also, can you remove this text editing box, and just use a simple <textarea>… when writing this comment it changed to a read-only mode, where I had to copy the text and reload the page.

  3. Jeremie Tisseau says:

    6 Mar, 2008

    @Craig: Weird, I have tried the text editing area as admin and as a guest. I have never had any problem.

  4. Jeremie Tisseau says:

    6 Mar, 2008

    This is just a test as a guest. I don t see any problem. What browser do you use, Craig?

  5. Ken Kolano says:

    6 Mar, 2008

    The CSS method has some other significant advantages over the JS method, mainly related to the CSS method using a real link:-It will work just like every other link (i.e. have right click options to bookmark it, open in new window, etc).-Outside scripts (Greasemonkey, etc.) will recognize it as a link.-CSS applies across the site in a standard manner, but maintaining the described JS method needs custom edits across a site. The JS method probably should pull it s URL from a DOM lookup to an embedded link tag, but that still seems more fiddley than the CSS method.

  6. Bryan Migliorisi says:

    6 Mar, 2008

    When I need something similar, I find the best thing to do is to add a link with a specific class to a div (or whatever element you want to be clickable).  In this case lets say we named the class divLink.  Use JS to find each child link element with a class of divLink and apply its hRef attribute as the location.href in an onClick even of the parent element (ex. div).If they have JS on, it will work as you intend it to. If they do not have JS on, they see a normal link and that is fine for most people, search engines, and screen readers.  If they have CSS off it will not affect this technique. 

  7. Craig Francis says:

    9 Mar, 2008

    @Jeremie TisseauI m using FireFox 2.0.0.12 on a mac… not too sure how I managed it, but I think I was switching tabs at the time, and I think I might have increased the font size… but cannot replicate now unfortunately.Although, another feature… in my last post, I split that second paragraph into multiple paragraphs (line breaks before and after the link).

  8. Silver Firefly says:

    16 Apr, 2009

    I would just use CSS for this. I never use Javascript unless it degrades fully.

  9. Montana Flynn says:

    18 Apr, 2009

    great ways to do it, but their are a few caveats.

    1) The javascript way will not be spidered by search engines (bad seo)

    2) The CSS way cannot be used if you have any header tags in the div.

    How can one get around these issues?

  10. dan says:

    3 Aug, 2010

    For example I used js when div doesn t have any importance (eg. voting)and css on the navigation. I like your site.

  11. Minh Vuong Nguyen says:

    2 Feb, 2012

    Thanks very much.
    But…i ve a question about “onclick”
    May it d open new windows when i d click on div Tag? Like “target= _blank'”?
    Thanks!

Leave a Reply

Sorry, comments are closed