-1

I have an image and would like to make several areas inside it clickable links, to lead to other pages on my site. After browsing for solutions, it looks like image maps are the way forward. The problem is, these rely on specific coordinates, so this wouldn't be responsive.

I had hoped that I could use percentages to get around this, but it seems that this isn't an option.

I'm not familiar with PHP coding or javascript, but I understand CSS/XHTML.

If anyone can help me with this, this would be much appreciated!

Thanks :)

Smilealways83
  • 1
  • 1
  • 1
  • If you don’t need “irregular” link shapes, but can do with standard rectangles, then I would simply absolutely position links over the image, using percentages for the coordinates and width/height. Adding `transform` you can rotate those rectangles, or even squish them into more trapezoid-y shapes, if necessary. I usually give the links an rgba background or an outline during development, so that I can see where they are, and then play around with the position values and dimensions using dev tools. – CBroe Aug 08 '17 at 10:31
  • Can you give us more information how it is now or how you want it to look ( images would be very helpful ) ? – kastriotcunaku Aug 08 '17 at 10:47
  • You can use a jQuery plugin: https://stackoverflow.com/questions/7844399/responsive-image-map – Gerard Aug 08 '17 at 10:47
  • Nah..use an SVG it's much simpler... – Paulie_D Aug 08 '17 at 11:27

1 Answers1

-1

You can use image and can add absolute links using css relative to the image outer division by positioning them using percentage from top, left, right and bottom whatever you want. In this case it would be responsive as per image get resized in smaller resolution

Anmol Sandal
  • 1,468
  • 1
  • 9
  • 16