html - Selecting points of an image in MVC HTML5

Question

I have an image on a webpage (It's an MVC4 web app with HTML5 markup). The image is of a map, I want to make it so when I click on a certain area of the map I send back to the controller that its been clicked on. What's the best way to go about this? Thanks

Answer 1

see http://www.javascriptkit.com/howto/imagemap.shtml Sample HTML : -

<img src="a.jpg" width="300" height="100" alt="Planets" usemap="#planetmap">
<!-- "rect" coords Top right and bottom left -->
<map name="planetmap">
  <area shape="rect" coords="0,0,100,100" href="javascript:a(1)" alt="Sun">
  <area shape="rect" coords="100,0,200,100" href="javascript:a(2)" alt="Mercury">
  <area shape="rect" coords="200,0,300,100" href="javascript:a(3)" alt="Venus">
</map>

<script>
function a(i){
    alert(i)
}
</script>

Inside the javascript you can do ajax or submit a form or goto a page ...