Inserting HTML from Image Map 5.0...

User 432255 Photo


Registered User
9 posts

Hello,
I'm having a bit of trouble with an image map inserted into SD 4 from Image Map 5.0. On a laptop, desktop, it's fine, ie clickable logos within the map takes me to the linked websites. However on my phone, the clickable areas are too big and overflow one into another.
I have exported the correct responsive map etc. Could it be that I'm putting the markup in the wrong places in SD? I am putting them together in an HTML element, that is together in one element. Is there a way to separate them as suggested in the Image Map dialogue?
Thanks,
Barry
User 187934 Photo


Senior Advisor
18,800 posts
Online Now

Hi Barry,
Can you share a link so we can take a look at it?
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.
https://progrower.coffeecup.com/
Here's my CoffeeCup SCCP Shop with examples of what can be done.
https://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 personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 432255 Photo


Registered User
9 posts

Hello,
It's at

http://www.oncccs.org.uk/links.html

Thanks,
Barry
User 187934 Photo


Senior Advisor
18,800 posts
Online Now

Move this to the footer of the page.
<!-- Beginning of CoffeeCup Image Map Responsive Scripts -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.rwdImageMaps.min.js"></script>
<script>$(document).ready(function(e) {$('img[usemap]').rwdImageMaps();});</script>
<!-- End of CoffeeCup Image Map Responsive Scripts -->

You can probably drop this line.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
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.
https://progrower.coffeecup.com/
Here's my CoffeeCup SCCP Shop with examples of what can be done.
https://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 personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 432255 Photo


Registered User
9 posts

Hello
When I go to the html element properties in SD, if I go to the footer dropdown and place the html as you recommend, I can still see it when I change the dropdown to Div or Main. How do I get it to "swallow" the footer so I can enter the rest to the body?
(bit of a newbie with SD as am used to the RSD setup, sorry)
Thanks,
Barry
User 187934 Photo


Senior Advisor
18,800 posts
Online Now

Select Pages at the top.
Then select Manage Project.
Make sure the manage Page is highlighted and Scroll down to Footer.
Paste the code in there.
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.
https://progrower.coffeecup.com/
Here's my CoffeeCup SCCP Shop with examples of what can be done.
https://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 personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 432255 Photo


Registered User
9 posts

Hello,

Thanks.

Still the same problem, though.
On a normal PC monitor or a laptop, all is well, and all the links work as they should.
On anything smaller, say a tablet or phone, it's as if the defined button area is the same size as the laptop etc and overlaps the defined area, or what should be the defined area - as if the size of the 'push' area has not responsibly re-sized to the now smaller icon - though the png picture has...
User 187934 Photo


Senior Advisor
18,800 posts
Online Now

Links all work fine on my laptop, even when I squeeze the screen size, but not on my iphone
Try putting the complete code in the footer.
<!-- Beginning of CoffeeCup Image Map Responsive Scripts -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.rwdImageMaps.min.js"></script>
<script>$(document).ready(function(e) {$('img[usemap]').rwdImageMaps();});</script>
<!-- End of CoffeeCup Image Map Responsive Scripts -->
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.
https://progrower.coffeecup.com/
Here's my CoffeeCup SCCP Shop with examples of what can be done.
https://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 personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 432255 Photo


Registered User
9 posts

Hello Eric,

Many thanks - it works!
Very much appreciate your effort,

All the best,
Barry

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.