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;
}
The ImageMap control is in the Standard controls. There are three different hotspots:
CircleHotSpot
PolygonHotSpot
RectangleHotSpot
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.
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.
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.
Can you post an example for those of us not running .NET 2?
Thanks,
Derek.