Image Mapper on page only showing...

User 2850706 Photo


Registered User
2 posts

Hi,
Building a number of image maps for our site (using an older Drupal CMS). I've made the image maps, uploaded the image to the site and pasted the HTML code into the page. The image displays but none of the mapped area's show and the image only clicks through to the default URL. I've tired both normal and responsive image maps (with and without the jquery file) but cannot seem to get it to work.
I'm probably missing something really obvious here, but would appreciate any advice. It works fine in Chrome and IE preview.
Thanks
html:
<!-- Beginning of CoffeeCup Image Map -->
<img src="https://www.autismspectrum.org.au/sites/default/files/Aspect-NDIS-Australia-map.jpg" usemap="#aspect-ndis-vic-metro" border=0>
<map name="aspect-ndis-vic-metro">
<area name="Queensland" shape="poly" coords="1106,284,1174,348,1222,348,1286,206,1278,146,1284,86,1324,12,1386,206,1414,196,1446,230,1440,260,1470,330,1488,440,1516,454,1532,472,1580,506,1618,634,1666,626,1668,690,1728,774,1728,794,1736,800,1746,932,1690,936,1646,966,1618,934,1582,918,1544,932,1200,906,1210,758,1088,756,1106,288" href="https://www.autismspectrum.org.au/content/queensland" alt="Queensland" title="Queensland" OnMouseOver="window.status='Queensland'; return true" OnMouseOut="window.status=''; return true">
<area name="New South Wales" shape="poly" coords="1202,918,1542,946,1578,930,1608,938,1640,968,1668,970,1706,940,1752,950,1732,1010,1678,1124,1608,1188,1610,1196,1598,1228,1540,1308,1534,1360,1464,1314,1464,1290,1326,1276,1268,1224,1268,1196,1234,1200,1216,1172,1186,1166,1200,912" href="https://www.autismspectrum.org.au/content/new-south-wales" alt="New South Wales" title="New South Wales" OnMouseOver="window.status='New South Wales'; return true" OnMouseOut="window.status=''; return true">
<area name="South Australia" shape="poly" coords="688,760,1202,770,1166,1368,1130,1326,1134,1276,1118,1260,1118,1224,1104,1218,1068,1232,1080,1186,1056,1154,1016,1216,1040,1158,1062,1094,1042,1066,1030,1112,970,1180,970,1204,954,1196,942,1134,906,1090,906,1070,870,1048,808,1040,776,1018,698,1030,686,758" href="https://www.autismspectrum.org.au/content/south-australia" alt="South Australia" title="South Australia" OnMouseOver="window.status='South Australia'; return true" OnMouseOut="window.status=''; return true">
<area name="Victoria" shape="poly" coords="1190,1174,1200,1176,1224,1202,1262,1214,1262,1240,1330,1288,1456,1296,1456,1320,1520,1362,1478,1372,1450,1382,1424,1378,1376,1432,1322,1398,1336,1378,1316,1356,1314,1376,1266,1408,1170,1362,1186,1174" href="https://www.autismspectrum.org.au/content/victoria" alt="Victoria" title="Victoria" OnMouseOver="window.status='Victoria'; return true" OnMouseOut="window.status=''; return true">
<area shape="default" href="https://www.autismspectrum.org.au/content/national-disability-insurance-scheme-ndis-0" target="">
</map>
<!-- End of CoffeeCup Image Map -->

User 187934 Photo


Senior Advisor
18,127 posts

Hi Joshua,
Can you share a link to your page? It's easier to help if we can see the issue our selves.
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.
http://progrower.coffeecup.com/
Here's my CoffeeCup SCCP Shop with examples of what can be done.
http://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 personnel site used for testing and as an easy way to share photos.(RLM imported to RSD)
http://ericrohloff.com
http://ericrohloff.com/property/
User 2850706 Photo


Registered User
2 posts

Of course. The first map is on this page:
https://www.autismspectrum.org.au/content/ndis-step-3

Additional state and regional maps will be loaded on subsequent pages if I can get the image map to work.
User 103173 Photo


VP of Software Development
0 posts

If you view the source of that page, there is no reference this markup:

<script src="jquery.rwdImageMaps.min.js"></script>

Make sure to add that to your page and upload the file as well.

Learn the essentials with these quick tips for Responsive Site Designer, Responsive Email Designer, Foundation Framer, and the new Bootstrap Builder. You'll be making awesome, code-free responsive websites and newsletters like a boss.

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.