Make Image Map Responsive

User 2343672 Photo


Registered User
2 posts

Hi Just wondered if anyone had worked out how to make the hot spot responsive.
I tried making the coord figures a % but that didn't work.
I'm sure it's just a simple matter of adding the correct values to the responsive css but haven't managed to figure it out yet.
Just wondered if someone else had?
Thank You
User 187934 Photo


Senior Advisor
18,132 posts

Take a look at this.
http://mattstow.com/experiment/responsi … -maps.html
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

Here's my S-Drive site with
examples of what can be accomplished in VSD.
http://progrower.coffeecup.com/
Here's my CoffeeCup SCCP Shop with examples of what can be done.
http://progrower.coffeecup.com/shop/
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 personnel site used for testing and as an easy way to share photos.(RLM imported to RSD)
http://ericrohloff.com
http://ericrohloff.com/property/
User 2343672 Photo


Registered User
2 posts

Thanks Eric, I tried this but for some reason couldn't get it to work.
In his notes he says "If possible, add correct, unitless width and height attributes to your image map images. You can override these in CSS to make them responsive."

I think this might be the easiest solution to override the coord values in css. I've tried to rewrite the image map html coords in css but can't seem to get the format right.

Does anyone know how to do that?

Thanks
User 187934 Photo


Senior Advisor
18,132 posts

The unit less width and height they are talking about is for your actual image not the coordinates.:)
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

Here's my S-Drive site with
examples of what can be accomplished in VSD.
http://progrower.coffeecup.com/
Here's my CoffeeCup SCCP Shop with examples of what can be done.
http://progrower.coffeecup.com/shop/
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 personnel site used for testing and as an easy way to share photos.(RLM imported to RSD)
http://ericrohloff.com
http://ericrohloff.com/property/
User 2516306 Photo


Registered User
1 post

I just found this and am going to investigate further:
https://github.com/stowball/jQuery-rwdImageMaps
Hope it helps!
Attachments:
User 1815167 Photo


Registered User
2 posts

Eric Rohloff wrote:
Take a look at this.
http://mattstow.com/experiment/responsi … -maps.html


Tried it and failed.... However, setting the area shape default just above the closing map tag at least allows the image to be click-able no matter what the image size is -

<area shape="default" href="https://www.igatewayms.com/gateaccess/index.php" target="">
</map>


Eric, have you tried to implement https://github.com/stowball/jQuery-rwdImageMaps with any success? If so, please explain...

"Inquiring minds want to know."
User 187934 Photo


Senior Advisor
18,132 posts

I haven't yet as I have a few bigger projects sitting in my lap at the moment. I have a site with a very complex image map that I will be trying to make responsive but I think I'm just going to end up serving up alternate content for the links to mobile users and have an option to view the full site.:)
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

Here's my S-Drive site with
examples of what can be accomplished in VSD.
http://progrower.coffeecup.com/
Here's my CoffeeCup SCCP Shop with examples of what can be done.
http://progrower.coffeecup.com/shop/
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 personnel site used for testing and as an easy way to share photos.(RLM imported to RSD)
http://ericrohloff.com
http://ericrohloff.com/property/
User 2088758 Photo


Senior Advisor
2,634 posts

Eric Rohloff wrote:
I haven't yet as I have a few bigger projects sitting in my lap at the moment. I have a site with a very complex image map that I will be trying to make responsive but I think I'm just going to end up serving up alternate content for the links to mobile users and have an option to view the full site.:)

Hey Eric are you actually building two websites in this case?
Taking over the world one website at a time!

Steve Kolish
www.misterwebguy.com

YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
User 187934 Photo


Senior Advisor
18,132 posts

No, I will do it all on the same page.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

Here's my S-Drive site with
examples of what can be accomplished in VSD.
http://progrower.coffeecup.com/
Here's my CoffeeCup SCCP Shop with examples of what can be done.
http://progrower.coffeecup.com/shop/
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 personnel site used for testing and as an easy way to share photos.(RLM imported to RSD)
http://ericrohloff.com
http://ericrohloff.com/property/
User 2088758 Photo


Senior Advisor
2,634 posts

Oh Ok because I to have a client with an image map and he wants to go responsive. It's extremely tough because of the nature of Image maps being absolute positioning and all. Was just curious when you said you will give them a link to the full website.
Taking over the world one website at a time!

Steve Kolish
www.misterwebguy.com

YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA

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.