Image Mapper and Wordpress #2

User 2614204 Photo


Registered User
23 posts

Hi! I would like to use this software which worked great in my previous flat HTML/CSS website. But I have redesigned in WordPress and am having some difficulty with the responsive side of things where the hotspots are not in the correct place cross-device or any device at the moment!

I selected to export a responsive image map, the map itself is displaying with hotspots in the wrong place. To integrate this with WordPress I have installed a plugin that allows the injection of CSS or js into the header or footer, and I have added the HTML to the page using a custom HTML block.

The site is under development so I can't share a public URL.

These are the 2 js files, 1...

jQuery(document).ready(function(e) {$('img[usemap]').rwdImageMaps();});
});

2...

/*
* rwdImageMaps jQuery plugin v1.5
*
* Allows image maps to be used in a responsive design by recalculating the area coordinates to match the actual image size on load and window.resize
*
* Copyright (c) 2013 Matt Stow
* https://github.com/stowball/jQuery-rwdImageMaps
* http://mattstow.com
* Licensed under the MIT license
*/
;(function(a){a.fn.rwdImageMaps=function(){var c=this;var b=function(){c.each(function(){if(typeof(a(this).attr("usemap"))=="undefined"){return}var e=this,d=a(e);a("<img />").load(function(){var g="width",m="height",n=d.attr(g),j=d.attr(m);if(!n||!j){var o=new Image();o.src=d.attr("src");if(!n){n=o.width}if(!j){j=o.height}}var f=d.width()/100,k=d.height()/100,i=d.attr("usemap").replace("#",""),l="coords";a('map[name="'+i+'"]').find("area").each(function(){var r=a(this);if(!r.data(l)){r.data(l,r.attr(l))}var q=r.data(l).split(","),p=new Array(q.length);for(var h=0;h<p.length;++h){if(h%2===0){p[h]=parseInt(((q[h]/n)*100)*f)}else{p[h]=parseInt(((q[h]/j)*100)*k)}}r.attr(l,p.toString())})}).attr("src",d.attr("src"))})};a(window).resize(b).trigger("resize");return this}})(jQuery);

And the html ...

<img src="https://myurl.info/wp-content/uploads/2020/11/Countries-UK-Map.png" usemap="#Countries-map" border=0>
<map name="Countries-map">
<area name="Scotland" shape="rect" coords="280,662,525,724" href="https://www.myurl.info/countryside/scotland/" alt="Discover Scotland" title="Discover Scotland" OnMouseOver="window.status='Discover Scotland'; return true" OnMouseOut="window.status=''; return true">
<area name="Wales" shape="rect" coords="343,1408,512,1473" href="https://www.myurl.info/countryside/wales/" alt="Discover Wales" title="Discover Wales" OnMouseOver="window.status='Discover Wales'; return true" OnMouseOut="window.status=''; return true">
<area name="England" shape="rect" coords="567,1363,789,1435" href="https://www.myurl.info/countryside/england/" alt="Discover England" title="Discover England" OnMouseOver="window.status='Discover England'; return true" OnMouseOut="window.status=''; return true">
</map>

I have changed the URL as it's under construction.

I'm hoping maybe someone can see where I am going wrong? Any pointers, ideas would be very welcome and gratefully received. I'm surprised to see coordinates in the HTML, I wonder if that's relevant to its responsiveness?
User 187934 Photo


Senior Advisor
19,665 posts

Hi Matt,
Can you share a link to the page with the problem? It's much easier to fix problems if we can see them. Other than that make sure Jquery is linked properly.
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 2614204 Photo


Registered User
23 posts

Hi Eric, and thanks for the reply. I've temporarily taken it out of coming soon mode so it can be viewed at https://withnature.info/ . This will be the first of many maps on the site, this one having just the three hotspots over the text for each country.

The plugin I am using to place the js is https://en-gb.wordpress.org/plugins/custom-css-js/

Thank you, I look forward to a reply :)
User 187934 Photo


Senior Advisor
19,665 posts

Replace your responsive map js with this.
<script>
jQuery(document).ready(function(e) {$('img[usemap]').rwdImageMaps();});
</script>
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 2614204 Photo


Registered User
23 posts

Hi Eric, thanks again for your reply :)

I've taken a couple of screenshots to show what I'm working with that I hope may help us.

I can't put the full <script></script> tags in as they are done automatically so I have just pasted the
jQuery(document).ready(function(e) {$('img[usemap]').rwdImageMaps();});
in.

Maybe I'm linking them in wrong but the page content is very narrow now, I'm guessing it's stopping loading the page when it gets to my error?
User 187934 Photo


Senior Advisor
19,665 posts

You have that part correct. It looks like the problem now is that JQuery isn't loaded.
I see it's commented out so it doesn't load.
<!-- <script src='https://withnature.info/wp-includes/js/jquery/jquery.js?ver=1.12.4-wp' id='jquery-core-js'></script> -->

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 2614204 Photo


Registered User
23 posts

Hi! Thanks for your reply Eric.

I've been thinking about this and it's beyond me how jquery is commented out. I've added
<script src='https://withnature.info/wp-includes/js/jquery/jquery.js?ver=1.12.4-wp' id='jquery-core-js'>
and the layout is now as it should be, not narrow, however, the image hotspots are still in the same incorrect fixed places.

I can't understand why jquery which is already installed in wordpress is now commented out though, that's an issue. I wonder Eric if you have any ideas?

User 2614204 Photo


Registered User
23 posts

Update: I've deactivated the code I added
<script src='https://withnature.info/wp-includes/js/jquery/jquery.js?ver=1.12.4-wp' id='jquery-core-js'>
so as to try to find out why core jQuery is commented out.
User 187934 Photo


Senior Advisor
19,665 posts

I see it's still commented out.
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 2614204 Photo


Registered User
23 posts

Hi!

I started a topic to see why that is at https://wordpress.org/support/topic/jqu … mented-out and am informed that is done by cache plugins minimising js. So I have uninstalled the cache plugin, but frustratingly the layout and hotspot problems remain.

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.