CodeBetter.Com
CodeBetter.Com
RSS 2.0 via Feedburner
           Do you Twitter? Follow us @CodeBetter

Darrell Norton's Blog [MVP]

Fill in description here...

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;
  }

Published Jul 15 2005, 06:58 AM by darrell
Filed under:

Comments

Andrew Connell [MVP MCMS] said:

# July 15, 2005 6:01 AM

Derek A said:

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

Thanks,
Derek.
# July 19, 2005 4:17 AM

Jason Row said:

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.
# July 19, 2005 3:54 PM

darrell said:

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.
# July 19, 2005 7:49 PM

Jason Row said:

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.
# July 20, 2005 5:26 AM

Eric said:

The ImageMap control is in the Standard controls. There are three different hotspots:
CircleHotSpot
PolygonHotSpot
RectangleHotSpot
# August 9, 2005 5:03 PM
Check out Devlicio.us!

Our Sponsors