Q&A: Linking a whole DIV
Monday, April 2nd, 2007 at 5:11 pmQ: I have a DIV with some text, an image and a link and I was asked by our designer to make the whole thing a link. I cannot use an image, so I tried nesting all in a link and making the real link text a SPAN with a style that makes it look like a link, which seemed dirty and I used a link around a DIV which is invalid HTML. How can you link a whole DIV?
A: This is a classic example where a small JavaScript makes a lot more sense than trying to misuse HTML or make non-semantic HTML mimic the proper element with CSS. If your construct is something like ... foo
you can write a JavaScript that assigns a click handler on every DIV that changes the document location to the href attribute of the first link:
window.onload = function(){
var divs = document.getElementsByTagName(‘div’);
for(var i=0,j=divs.length;i
if(divs[i].className === ‘clickbox’){
divs[i].onclick = function(){
window.location = this.getElementsByTagName(‘a’)[0].href;
}
}
}
}
This is a rather obtrusive example when it comes to event handling, but it should get you on your way.