Digonal links

[Drongo_III]

This is probably a really dumb question.

 

I need to make an image link, that's part of a bigger image, a diagonal link. What do you think is the best way to do this? Image map? Or is there a better way?

 

Incidentally I'm reluctant to use css transform because the site needs to cater for at least IE7-IE8 and this is just intended to be a temporary holding page so don't want to create multiple style sheets etc.

 

Any suggested techniques would be welcome

 

 

[haku]

HTML doesn't really do diagonals. I did this recently on a site, where the image was split diagonally with the top-left linking being one link, and the bottom-right being another. To make it work, I create canvas elements on the fly, masking half the image, then I looped through each pixel to see if it was transparent or not, storing the value in an array. Then, as the image was hovered over, I checked to see if the current pixel was transparent or not, and if it was, it was one half the image, if it wasn't it was the other half. I then had to use javascript to fire the link for this. As well, since IE6-8 do not support canvas, I had to use VML to create the same effect for these browsers.

 

[Drongo_III]

Wow that sounds complicated. Can I ask why you wouldn't just use an image map?

[haku]

It was part of a slideshow, where the images themselves needed to be split in half on the fly, as they were being animated diagonally.

[Drongo_III]

Ahh i see. Very interesting technique. I think for my simplistic purpose i shall use a map but it's really interesting to hear about more complex ways of doing it - in the right scenario.