Hello all!
What best practice do you recommend, to insert an image in a main page of my site, and then map some areas of the image to especific links?
I know I can use pure html, tags, etc. This is the best way?
Thanks in advance,
RFGouveiaS
Hi. You could use an image map (an <img> tag and a <map> tag defining clickable regions and their destination). But it’s fallen out of fashion, mostly because it’s not responsive and visual effects (on hover/focus) are near impossible to do.
Depending on your design, using SVG might be a better option.
Or maybe your design doesn’t really call for an image, and should be broken down into more HTML elements.
It really depends on your design, and how it’s supposed to respond to different screen dimensions.
this might help. even if they create a real map. but the technique can be applied to any vector graphic.
using svg, raphaeljs and css…
http://stackoverflow.com/questions/24069901/interactivity-on-map-using-svg-and-raphaeljs-with-links
you could add a bitmaps as background using svg pattern.