New ImageMap control in ASP.NET 2.0

Here’s a cool new control in ASP.NET 2.0, the ImageMap.  You use it like this:

      <asp:imagemap id=”Shop”
imageurl=”Images/ShopChoice.jpg”
width=”150″
height=”360″
alternatetext=”Shopping choices”
runat=”Server”>

<asp:circlehotspot
navigateurl=”http://www.tailspintoys.com”
x=”75″
y=”290″
radius=”75″
hotspotmode=”Navigate”
alternatetext=”Shop for toys”>
</asp:circlehotspot>

<asp:circlehotspot
navigateurl=”http://www.cohowinery.com”
x=”75″
y=”120″
radius=”75″
hotspotmode=”Navigate”
alternatetext=”Shop for wine”>
</asp:circlehotspot>

</asp:imagemap>


And the code-behind looks like this:

  void VoteMap_Clicked (Object sender, ImageMapEventArgs e)
{
string coordinates;
string hotSpotType;
int yescount = ((ViewState["yescount"] != null)? (int)ViewState["yescount"] : 0);
int nocount = ((ViewState["yescount"] != null)? (int)ViewState["nocount"] : 0);

// When a user clicks the “Yes” hot spot,
// display the hot spot’s name and coordinates.
if (e.PostBackValue.Contains(“Yes”))
{
yescount += 1;
coordinates = Vote.HotSpots[0].GetCoordinates();
hotSpotType = Vote.HotSpots[0].ToString ();
Message1.Text = “You selected ” + hotSpotType + ” ” + e.PostBackValue + “.<br>” +
“The coordinates are ” + coordinates + “.<br>” +
“The current vote count is ” + yescount.ToString() +
” yes votes and ” + nocount.ToString() + ” no votes.”;
}

// When a user clicks the “No” hot spot,
// display the hot spot’s name and coordinates.
else if (e.PostBackValue.Contains(“No”))
{
nocount += 1;
coordinates = Vote.HotSpots[1].GetCoordinates();
hotSpotType = Vote.HotSpots[1].ToString ();
Message1.Text = “You selected ” + hotSpotType + ” ” + e.PostBackValue + “.<br>” +
“The coordinates are ” + coordinates + “.<br>” +
“The current vote count is ” + yescount.ToString() +
” yes votes and ” + nocount.ToString() + ” no votes.”;
}

else
{
Message1.Text = “You did not click a valid hot spot region.”;
}

ViewState["yescount"] = yescount;
ViewState["nocount"] = nocount;
}

This entry was posted in .NET. Bookmark the permalink. Follow any comments here with the RSS feed for this post.

5 Responses to New ImageMap control in ASP.NET 2.0

  1. Eric says:

    The ImageMap control is in the Standard controls. There are three different hotspots:
    CircleHotSpot
    PolygonHotSpot
    RectangleHotSpot

  2. Jason Row says:

    One would think that MS would offer such a feature since other products have had it. I’m only using Beta 2 and after a very quick look I didn’t see anything but maybe it’s buried somewhere or will make the final release.

  3. Jason – I’m not sure. (Which would also be why I don’t have a sample yet Derek! :)

    Dreamweaver and Adobe have had image map tools for years. I’ll dig into this and see what Visual Studio 2005′s support for this control is.

  4. Jason Row says:

    Am I correct in stating that you cannot drag and drop that actual hotspots on top of the imagemap control in the Design window. You’ll have to add the element manually along with all the co-ords?

    No big deal if this is how it works. I just thought there might be a quicker way as I think I’ve been able to draw hotspots in Dreamweaver.

  5. Derek A says:

    Can you post an example for those of us not running .NET 2?

    Thanks,
    Derek.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>