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?

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.

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

Replace your responsive map js with this.

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 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?

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.

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 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?

Update: I've deactivated the code I added so as to try to find out why core jQuery is commented out.

I see it's still commented out.

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.