How to create a image map hotspot in a winjs application?

Question

Am working on a windows 8 application using html5/js. Am trying to create clickable hotspots over an image. I tried using image map as how we do in normal html sites as shown in the below video. http://www.youtube.com/watch?v=q45CwyPtd9g.

The code used is as follows:

<img src="sampleimage.png" alt="screen1" width="3836" height="768" usemap="#Map" longdesc="file:///C|/Users/sample.png" border="0" /> <map name="Map" id="Map"> <area shape="rect" coords="1090,176,1636,664" href="www.google.com" alt="imagespot1" /> </map>

It was working when I render it to a browser. But it didn't work for windows 8.

Is there a way to make it work? (or) Are there any other alternative techniques to create a clickable hotspot over an image?

Answer 1

Your image map code works just fine for me if I use a fully-qualified URL for the map area HREF property.

<img src="sampleimage.png" alt="screen1" width="3836" height="768" usemap="#Map" border="0" /> 
<map name="Map" id="Map"> 
    <area shape="rect" coords="1090,176,1636,664" href="http://www.google.com" alt="imagespot1" /> 
</map>