almost effortless

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.