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 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. 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? 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. 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. Link to comment https://forums.phpfreaks.com/topic/265446-digonal-links/#findComment-1360929 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.