Responsiveness and ImageMaps

User 10077 Photo


Senior Advisor
1,096 posts

I suddenly had a thought today. Will imagemaps work with a responsive site?

For example, a 4:3 image scales down as the width decreases. It seems to me that it would change the pixel positions of the links in the map. Has anyone dealt with this?
ASK ME ANYTHING
I provide personalized help for Coffeecup Users including personal or group training for Site Designer, Web Form Builder and more via Zoom.
Email me at support@uscni.org or call 865-687-7698.

Did you know that Web Form Builder can be used for both simple and complicated forms and that it's not limited to the default fonts and buttons? Take a look at a form we developed for WindowTinting.com.
https://forms.windowtinting.com/forms/w … ppingcart/
User 603315 Photo


Registered User
938 posts

Brian Durfee wrote:
I suddenly had a thought today. Will imagemaps work with a responsive site?

For example, a 4:3 image scales down as the width decreases. It seems to me that it would change the pixel positions of the links in the map. Has anyone dealt with this?


Yeah logic would dictate that and that the more it moves etc then the links would stay where they are, so they aren't responsive in themselves, but used wisely I still love em.
User 2484360 Photo


Registered User
3,293 posts

Brian Durfee wrote:
I suddenly had a thought today. Will imagemaps work with a responsive site?

For example, a 4:3 image scales down as the width decreases. It seems to me that it would change the pixel positions of the links in the map. Has anyone dealt with this?


No, Image maps normally use absolute positioning of the links on an image. When scaled the absolute position would stay the same however the image would decrease in size.

It can be done, but would be a difficult task. :P
User 603315 Photo


Registered User
938 posts

Adam East wrote:
Brian Durfee wrote:
I suddenly had a thought today. Will imagemaps work with a responsive site?

For example, a 4:3 image scales down as the width decreases. It seems to me that it would change the pixel positions of the links in the map. Has anyone dealt with this?


No, Image maps normally use absolute positioning of the links on an image. When scaled the absolute position would stay the same however the image would decrease in size.

It can be done, but would be a difficult task. :P


Are you a Javascript coder? I think it could be done with scripting with if else statements but I haven't tried it on Image Maps but it might work.
User 2484360 Photo


Registered User
3,293 posts

G'kar wrote:
Adam East wrote:
Brian Durfee wrote:
I suddenly had a thought today. Will imagemaps work with a responsive site?

For example, a 4:3 image scales down as the width decreases. It seems to me that it would change the pixel positions of the links in the map. Has anyone dealt with this?


No, Image maps normally use absolute positioning of the links on an image. When scaled the absolute position would stay the same however the image would decrease in size.

It can be done, but would be a difficult task. :P


Are you a Javascript coder? I think it could be done with scripting with if else statements but I haven't tried it on Image Maps but it might work.


It can be done, but it would take a lot to do. :P
User 187934 Photo


Senior Advisor
20,245 posts

Yes it can be done.. It's easier to swap the the whole image map to a new one at the new screen size.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 603315 Photo


Registered User
938 posts

Eric Rohloff wrote:
Yes it can be done.. It's easier to swap the the whole image map to a new one at the new screen size.

If it's on the same lines as your thinking, I did this just as a test. So I designed a site for mobile about 380px across and did the image map for that and a one for larger sites. Interesting it was, I think it's very doable, well...I did do it to a degree but it works good for menus and stuff as long as you don't want drop downs, now that does pose a problem. I've always classed myself more of web programmer rather than designer, but I've never done much coding apart from CSS over the last 3 yrs so it's a bit of a case of use it or lose it, but there's a few ways that I think these type of things can be done, although I've had so much experience of failure that I know theory is just a theory.

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.