How to create an HTML imagemap for a Store Map?

wfninpa used Ask the Experts™
What is the best way to create a store map like this one:

I've looked at the code in their page and it has SVG references with what looks like something similar to a normal HTML imagemap.

Please do not suggest Flash, Actionscript, or the like.

How do I do the same thing to get the same result?
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
IT Expert
Top Expert 2009
You can create image maps using shapes. Just create a area and define co-ordinates on image for that area.

Please find below code for same.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Image Map</title>

      <img src="images/Sunset.jpg" border="0" usemap="#Map" />
      <map name="Map" id="Map">
            <area shape="rect" coords="55,27,155,71" href="#" onclick="javascript:alert('Area 1 clicked');return false;" />
            <area shape="rect" coords="239,25,358,72" href="#" onclick="javascript:alert('Area 2 clicked');return false;" />
            <area shape="rect" coords="498,35,594,101" href="#" onclick="javascript:alert('Area 3 clicked');return false;" />
            <area shape="rect" coords="81,167,204,235" href="#" onclick="javascript:alert('Area 4 clicked');return false;" />
            <area shape="rect" coords="467,160,601,252" href="#" onclick="javascript:alert('Area 5 clicked');return false;" />
            <area shape="rect" coords="300,221,367,299" href="#" onclick="javascript:alert('Area 6 clicked');return false;" />
            <area shape="rect" coords="77,308,182,354" href="#" onclick="javascript:alert('Area 7 clicked');return false;" />


Let me know if any queries...
Michel PlungjanIT Expert
Top Expert 2009

Quite a number of browsers would not execute your javascript in the onclick on a map.
Exploring SharePoint 2016

Explore SharePoint 2016, the web-based, collaborative platform that integrates with Microsoft Office to provide intranets, secure document management, and collaboration so you can develop your online and offline capabilities.

I have used this feature in few projects and this works on almost all browsers.
Michel PlungjanIT Expert
Top Expert 2009

Guess I have been around too long. It does indeed work on all the modern browsers I have here.


Excellent.  Thank you.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial