Darrell Norton's Blog [MVP]

Sponsors

The Lounge

News

  • Darrell Norton pic

    MVP logo

    View Darrell Norton's profile on LinkedIn

    Currently Reading:

    weewar.com

Advertisement

Images in this post missing? We recently lost them in a site migration. We're working to restore these as you read this. Should you need an image in an emergency, please contact us at imagehelp@codebetter.com
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;
  }

Posted 07-15-2005 6:58 AM by Darrell Norton
Filed under:

[Advertisement]

Comments

Andrew Connell [MVP MCMS] wrote New ImageMap control in ASP.NET 2.0
on 07-15-2005 6:01 AM
Derek A wrote re: New ImageMap control in ASP.NET 2.0
on 07-19-2005 4:17 AM
Can you post an example for those of us not running .NET 2?

Thanks,
Derek.
Jason Row wrote re: New ImageMap control in ASP.NET 2.0
on 07-19-2005 3:54 PM
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 <asp:circlehotspot> 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.
Darrell Norton wrote re: New ImageMap control in ASP.NET 2.0
on 07-19-2005 7:49 PM
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.
Jason Row wrote re: New ImageMap control in ASP.NET 2.0
on 07-20-2005 5:26 AM
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.
Eric wrote re: New ImageMap control in ASP.NET 2.0
on 08-09-2005 5:03 PM
The ImageMap control is in the Standard controls. There are three different hotspots:
CircleHotSpot
PolygonHotSpot
RectangleHotSpot