Making only part of an image a hot spot link.

Question

I have a large image and only want a rectangle portion of it to be a hot spot link that goes "Home". Here is my code that is not working. Any help on what I am missing or have done wrong? Thanks!

<div id="defaultPic" runat="server">
        <img src="Images/boardwise-home.jpg" alt="Boardwise Home" usemap="#map"  />
        <map name="map" id="boardwise-home">
            <area shape="rect" coords="32,23,32,105,275,105,275,23" href="~/default.aspx" 
      title="Boardwise Home" alt="Home" />      
</map>

Answer 1

Your rectangle has too many coordinates. Should just be topleft x,y and bottom right x,y ( ie coords="32,23,32,105" )

Answer 2

I think for shape=rect the coords should be four values, like for instance coords="32,23,32,105"

Answer 3

You are trying to get your URL rewritten here with the '~' you will need ot use something like this:

<area shape="rect" coords="32,23,275,105" href="<%= ResolveUrl("~/default.aspx")"  
  title="Home" alt="Home" />