mouselistener in asp.net-mvc

Question

Is it possible to add a mouselistener to a asp.net MVC image?

<img src="@Url.Action("Image")" alt="" />

I want to track where my users have clicked in my image. (In the image there is a grid of rectangles)

Answer 1

Use the ajax request when you click the item of the map.

<img src="@Url.Content("~/Content/img/image.jpg")" usemap="myMap"/>
<map name="myMap">       
    <area shape="circle" coords="0,5,300" onclick="javascript:SendCoords(0,5,300)"/>
    <area shape="circle" coords="50,5,300" onclick="javascript:SendCoords(50,5,300)"/>
</map>

<script type="text/javascript">
   function SendCoords(a,b,c){
       $.get("/Controller/Action", {A:a,B:b,C:c}, function(result){
          alert('I have sended the coordinates! Yeah. The result-'+result);
       });

   }
</script>

Hope this one helps.

Answer 2

Try This :

<img src="@Url.Content("~/Content/images/minasmapa.png")" usemap="minasMap"/>
<map name="minasMap">       
    <area shape="circle" href="" coords="249,346,9" />
    <area shape="circle" href="http://" coords="433,392,8" />
</map>