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!
Nice idea! (I just wish it didn’t rely on Javascript…)
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?
Why does the first method (the one with Javascript) not work in IE? Anyone know of any IE browser hacks I could use? Thanks!
So good! Thanks!
Excellent technique!
We have used it in a nice new design on our site.
Thanks!
Great, I’ve been wanting to do this for a while.
Thanks
You helped me tremendously. Thanks!
nice. thanks.
i got my links problem solved. thank you.
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.
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…
Thanks for the help — simple and effective.
[...] 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: [...]
thanks for this post! Nice clean and easy.
Great tips thanks!
@Jake: I know it’s an old comment but did you try ‘div table a:hover’ in your css ?
tank you
Wow, that helped alot. Thank you!
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.
thank u Devin S. for making this page worth loading up ;)
Good good tnx :D
This is brilliant, thanks very much!
Any one know how to make it highlight when hovering with a mouse?
this is definitely not accessible, intrusive et generally …not very clean. :/
You shouldn’t use it.
simple, elegant and so useful.
thanks for sharing.
SWEET! Thanks.
awesome, thanks.
great, I didn’t know I could do that. Will use it right away
Screw people who don’t use JavaScript! This works perfectly!
exactly what i needed.. thanks!
Ok this works but I can not figure out where to place the target=”blank”
I used to use this technique.
I think that changing your 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 is a block element now) clickable and works *exactly* like a link should, no javascript.
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.
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 :)
target=”blank” can be done with:
onClick=”window.open(‘http://www.cnn.com/’,'cnnWindow’)”
The above opens in a new tab in Firefox, the following opens in a new window:
onClick=”window.open(‘http://www.cnn.com/’,'cnnWindow’,'width=400,height=200′)”
Still no solution on making the target=”blank” when the div is a link.
oooohhh man its times like you think whish more people used javascript : (
i still dont get it, how can you link a div? : (
So many people, so many wishes…
Worked for me in the first try. Flawless, Effortless.
Great! :D
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.
Three years later, and this article is still helping people. Thanks a lot, this was just what I needed.
Love it. An effortless solution to my prob!!!
Effortlessssss ……………..very good yar
wow thank you for this…exactly what i was looking for, first in google search!!!
Ah damnit.. div script disappeared.. try this..
onclick=”window.open(‘http://www.mysite.com’,'_blank’);” style=”cursor:pointer;
thanks it worked!
sweet, I can even do it. Thanks!
How’s about:
Will it ever stop working?
XHTML 2 has *all* elements linkable (the anchor tag is no more)… ’tis the way of the future.
Cheers worked a treat
I use and it works with IE, Opera and Firefox.
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…
Nice. Thanks! Worked on first try.
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)
Excellent. You just saved my life. Works in all browsers combined with the dropdown divs I’m using. Thank you!
Thanks; great reminder!
This was simply outstanding. Works beautifully in firefox and ie.
Thanks buddy :-)
Great, G R E A T, thank you
search on google on redirect to this page, it’s work… three years later :D
but there is a problem if i wanna open the link as a ‘new tab’
Thanks, I really needed that.
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
Worked a treat. Thanks!
You beauty! thanks for this you are a life saver.
R
Perfect! Thanks for posting this.
Thanks, i have been searching for this for a while.
Thanks, this help me lot.
Awesome little technique, thanks for sharing it! – Dave
worked perfectly and still kept my code valid. thanks!
Thanks… a heck of a lot easier than tracking down an image unnecessarily!
can’t believe it. great little ace in the hole. how’s the usability in 2009?
Thanks for your great help!
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?
Thanks for your helpp. It helped me
Thanks a lot….
It really helps
how do I get the link to open in a new window.
Thanks great help just what i needed!
THANK YOU!!!!!!!!
Worked 100%, simple and easy. Thanks again
Worked like a charm! Many Thanks.
lifesaver, thanks!
Thanks !
worked for me! thanks
working good:)
Its great!
Thanks!
Almost 4 years later and this snippet is still helping people.
Thanks!
Simple and elegant what more could you ask for
works great! but wont validate for me :(
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)
<a href="”><img src="/images/transparent.gif” width=”988″ height=”300″ alt=”Header” />
Obviously, change the width and height to whatever suits you.