How to create an HTML imagemap for a Store Map?

wfninpa
wfninpa used Ask the Experts™
on
What is the best way to create a store map like this one:  http://shopwyomingvalleymall.com/directory/17-main-level/8248

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?
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
IT Expert
Top Expert 2009
Commented:
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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Image Map</title>
</head>

<body>
      
      <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;" />
      </map>

      
</body>
</html>

Let me know if any queries...
image-map.php
Sunset.jpg
Michel PlungjanIT Expert
Top Expert 2009

Commented:
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

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

Author

Commented:
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