Ever had a need to make a div clickable? I have. I was searching for a way to do this very thing and came across a couple of different methods to acomplish it.
We can use javascript or apply the a – /a tags.
It’s fairly easy to make any div clickable by adding a bit of JavaScript to the tag. You might be asking … WHY?!
Well you might have a “banner” div that contains an image in the background and you want to make this area link back to the main page of your site.
Here’s how it can be done with some javascript:
<code>
<div onclick=”location.href=’http://www.example.com’;” style=”cursor:pointer;”></div>
<div id=”header” onclick=”location.href=”http://www.example.com”;” style=”cursor:pointer;”>
</div>
</code>
The other way… which may or may not work in some browsers is to add a set of a – /a.
It is my understanding that this will only work if the “div” you are trying to make clickable is nested within another “div” because the “a” link cannot be a block level element. It must be inside a block level element.
So, with that in mind you would need to do something like this:
<code>
<a href=”index.htm” title=”Click Here to get back to the main paige”><div id=”banner”> </div></a>
</code>
There is another method that I was reading about adding a style to the “a” tag in your css.. I’ll post more on that later.
© 2006 – 2009, Robert Owen. All rights reserved.
