Responsive image map not working on mobile

sarahklass · ‎06-01-2021

I have created a responsive image map using https://image-map.weebly.com/ and all of the embedded links work fine on a desktop computer, however on a phone, the individual links aren't clickable.

I have embedded two different image maps on this page - https://wa.cbca.org.au/calendar.html - one that uses the above website to make it responsive to different platforms, and one that is just a fixed size image map, hence the huge size on mobile devices on the second image, which is what I am trying to get away from.

The generated code that I embedded in the page in the attempt to create the responsive image map is as follows:

<img src="2021-calendar-of-events_orig.png" id="map-image" style="width: 880px; max-width: 100%; height: auto;" alt="" usemap="#map" />
<map name="map">
    <area shape="rect" coords="206, 752, 575, 773" href="https://www.thelitcentre.org.au/teachers-hub/celebrate-reading-national-conference.aspx" target="_blank" alt="TLC conference" title="TLC Conference" />
    <area shape="rect" coords="207, 685, 828, 706" href="https://wa.cbca.org.au/cbca-book-week.html" alt="CBCA Book Week" title="CBCA Book Week" />
    <area shape="rect" coords="206, 622, 620, 642" href="https://wa.cbca.org.au/book-week-opening-and-dinner.html" alt="dinner" title="CBCA Book Week Opening and Dinner" />
    <area shape="rect" coords="207, 494, 705, 513" href="https://www.alia.org.au/nss" target="_blank" alt="NSS" title="National Simultaneous Storytime" />
    <area shape="rect" coords="208, 430, 405, 447" href="https://www.scribblersfestival.com.au/" target="_blank" alt="scribblers" title="Scribblers Festival" />
    <area shape="rect" coords="204, 361, 452, 383" href="https://wa.cbca.org.au/cbca-wa-committee.html" alt="AGM" title="AGM" />
    <area shape="rect" coords="207, 234, 439, 252" href="https://wa.cbca.org.au/a-night-with-our-stars.html" alt="ANWOS" title="A Night with our Stars" />
</map>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="imageMapResizer.min.js"></script>
<script>$(document).ready(function(e){$("map").imageMapResize();});</script>

Is anybody able to advise where I've gone wrong and how to make it work?

PaulMathews · ‎06-03-2021

@sarahklass I'm presuming that your jQuery is intended to make your image map responsive (image maps are not natively responsive entities). Presuming that your jQuery works, your script links are likely incorrect.

Weebly loads the jQuery reference on all of its sites but I think they're at version 1.8.3 (you can see this if you examine the head zone of your page's source code). If your jQuery code works under that version, you may not need to reference the newer version explicitly in your code.
The script reference to "imageMapResizer.min.js" has no path for that file. If you stored that file in the site Assets folder (Theme > Edit HTML/CSS > Assets > upload file or paste the script into a new file you create under the Assets folder), you need to specify the path with the filename: "/files/theme/imageMapResizer.min.js"

Notwithstanding this, I'm wondering why you are using an image map in this particular application. Is this simply a test of the image map code or did you intend to actually display tabular information with linked items as an image map rather than use a standard html table?

sarahklass · ‎06-03-2021

Hi @PaulMathews ,

Thanks for your reply. Yes, a responsive image map is what I was going for and I was hoping that the Weebly image map generator that I used would do everything that I needed it to, as I will admit that I am not super au fait with jQuery. I wanted a nicer layout for the table than I felt I could achieve using a standard table, but I have reverted to a table for now as the other is just too far beyond my current scope.

Thanks again.