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
Michael Bowater
Registered User
2 posts
Eric Rohloff
Senior Advisor
20,245 posts
Take a look at this.
http://mattstow.com/experiment/responsi … -maps.html
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.
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
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
Michael Bowater
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
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
Eric Rohloff
Senior Advisor
20,245 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.
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
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
Stacy Springer
Registered User
1 post
I just found this and am going to investigate further:
https://github.com/stowball/jQuery-rwdImageMaps
Hope it helps!
https://github.com/stowball/jQuery-rwdImageMaps
Hope it helps!
Brian Smith
Registered User
2 posts
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."
B.
iGateway MS
http://www.igatewayms.com
iGateway MS
http://www.igatewayms.com
Eric Rohloff
Senior Advisor
20,245 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.
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
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
Steve
Senior Advisor
3,106 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.
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
Steve Kolish
www.misterwebguy.com
YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
Eric Rohloff
Senior Advisor
20,245 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.
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
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
Steve
Senior Advisor
3,106 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
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.
