Christian Heilmann

Q&A: Linking a whole DIV

Monday, April 2nd, 2007 at 5:11 pm

Q: 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.

Share on Twitter