Drongo_III Posted July 9, 2012 Share Posted July 9, 2012 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 Quote Link to comment https://forums.phpfreaks.com/topic/265446-digonal-links/ Share on other sites More sharing options...
haku Posted July 10, 2012 Share Posted July 10, 2012 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. Quote Link to comment https://forums.phpfreaks.com/topic/265446-digonal-links/#findComment-1360449 Share on other sites More sharing options...
Drongo_III Posted July 10, 2012 Author Share Posted July 10, 2012 Wow that sounds complicated. Can I ask why you wouldn't just use an image map? Quote Link to comment https://forums.phpfreaks.com/topic/265446-digonal-links/#findComment-1360649 Share on other sites More sharing options...
haku Posted July 11, 2012 Share Posted July 11, 2012 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. Quote Link to comment https://forums.phpfreaks.com/topic/265446-digonal-links/#findComment-1360681 Share on other sites More sharing options...
Drongo_III Posted July 11, 2012 Author Share Posted July 11, 2012 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. Quote Link to comment https://forums.phpfreaks.com/topic/265446-digonal-links/#findComment-1360929 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.