Diagonal clickable blocks in HTML

Question

I need to have the white blocks respond to click and hover events but as we all know the DOM is all rectangular blocks. So I'm really not sure how to approach this. The diagonal lines make it hard because I can't just put negative margins on the img elements and overlap them because then the clickable areas will overlap.

I'm open to solving with JS/Jquery IF necessary.

EDIT: I can't rely solely on CSS3 unfortunately.

Thanks in advance!

Solution This is just an extract of that I actually did so it's a bit messy code-wise but here you go. As noted below, I decided to go the CSS3 route since it degrades gracefully anyways.

Demo: http://jsfiddle.net/4Vgdu/1/

Answer 1

You could use the skewX attribute of the css3 transform property:

skewX examples

and then just apply a mousemove event on the transformed div