Image Mapper on page only showing...

User 2850706 Photo

Registered User
2 posts

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.
<!-- Beginning of CoffeeCup Image Map -->
<img src="" 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="" 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="" 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="" 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="" alt="Victoria" title="Victoria" OnMouseOver="window.status='Victoria'; return true" OnMouseOut="window.status=''; return true">
<area shape="default" href="" target="">
<!-- End of CoffeeCup Image Map -->

User 187934 Photo

Senior Advisor
20,002 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.

This is a site I built for my work.(RSD)
This is a site I built for use in my job.(HTML Editor)
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
User 2850706 Photo

Registered User
2 posts

Of course. The first map is on this page:

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.