1

I need to use image map in my website, to add different links to each part of image.

But I have problems with its responsiveness. I couldn't change map area's size while resizing window.

Can anyone help me with this? The method is not important, I can use either Js or Css.

Update:

I used http://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html for responsiveness, but it affects on map area coords. When I reload the page, map coords are all 0, those are being updated only after resizing the window.

Do anyone have this problem too?

FrontDev
  • 837
  • 5
  • 19
  • Did you try to search at all? There are lots of solutions [on Google](https://www.google.co.uk/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#safe=off&q=responsive%20image%20map) and even here [on SO](http://stackoverflow.com/questions/7844399/responsive-image-map) – Turnip Oct 24 '14 at 16:36

2 Answers2

0

Imagemap is a very Old way to create websites I preffer using photoshop image sílice and save as html maybe you should try it ir you will use non dynamic images that way you can fix width and height and a lot more

0

If you have the image saved as a vector image, you could save it as an SVG and use RaphaelJS. I've only recently picked it up but it is quite easy to use once you get the hang of it.

You can assign links, style and hover events to each node attribute, and Raphael allows you to set the viewBox so that it scales on resize (can't link as rank not high enough - help can easily be found on SO though)

Here are some examples of using RaphaelJS: LINK1 LINK2

And check out jsfiddle.net/AUNwC/294/ for example of each node having a responsive clickable area (resize window to check)

Callum King
  • 3
  • 1