Jump to content

Digonal links


Recommended Posts

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 :)



Link to comment
Share on other sites

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.


Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.