Click here to Skip to main content
14,302,993 members

HtmlMap Web Control

Rate this:
3.71 (4 votes)
Please Sign up or sign in to vote.
3.71 (4 votes)
12 Mar 2007CPOL
This article describes the HtmlMap Web Control. Some description and code realization are provided.

Introduction

The .NET 2.0 class library contains a very helpful Web-control named ImageMap. It can contain an image and an HTML map for it. We can define some areas called HotSpot(s) and assign a shape (circle, rectangle, or polygon) and a corresponding reference for each hotspot. Everything works fine except one thing. We cannot operate with our image in client-side code, because it is hidden and its ID is assigned automatically.

HTML Image Maps

Image 1

Fig. 1. The Solar system Imagemap
MercuryVenusEarthMoonMarsJupiterSaturnUranusNeptune

First of all, let's remember how the image maps are organized in ordinary HTML. We need to include the image (via an <img> tag) and map (via a <map> tag) it in our HTML file. In the <img> tag, we must specify a URL to the image file and the map ID which we will use to map our image:

<img src="planets.jpg" width="513" height="649" border="0" usemap="#PlanetsMap" />

Then, we must specify the areas on the image and the corresponding references for the areas. Note that the ID attribute of the map tag is "PlanetsMap" and not "#PlanetsMap".

<map name="PlanetsMap" id="Map1">
<area shape="poly" coords="139,58,122,66,116,84,121,94,124,101,132,107,
140,110,146,111,138,100,134,88,134,78,137,68" 

  href="http://pds.jpl.nasa.gov/planets/choices/mercury1.htm" alt="Mercury" />
<area shape="poly" coords="176,40,195,44,207,54,217,70,217,
        82,210,91,202,102,197,114,196,119,185,121,169,121,
        158,117,144,108,137,95,136,82,137,67,145,54,158,43" 

    href="http://pds.jpl.nasa.gov/planets/choices/venus1.htm" alt="Venus" />
  <area shape="circle" coords="247,128,50" 

    href="http://pds.jpl.nasa.gov/planets/choices/earth1.htm" alt="Earth" />
  <area shape="circle" coords="340,88,18" 

    href="http://nssdc.gsfc.nasa.gov/planetary/factsheet/moonfact.html" alt="Moon" />  
  <area shape="circle" coords="337,191,36" 

    href="http://pds.jpl.nasa.gov/planets/choices/mars1.htm" alt="Mars" />
<area shape="poly" coords="391,254,438,269,457,285,473,306,
      483,337,483,355,474,383,467,396,456,409,429,428,417,434,400,438,
      383,437,368,437,362,431,359,409,351,390,342,375,328,363,316,358,308,356,301,
      346,302,331,309,306,323,285,342,267,371,257" 

  href="http://pds.jpl.nasa.gov/planets/choices/jupiter1.htm" alt="Jupiter" />  
<area shape="poly" coords="157,331,175,330,201,341,222,350,240,357,
      248,362,263,359,287,355,303,358,331,369,344,384,355,401,359,419,360,432,
      365,438,376,442,388,455,401,464,419,482,429,493,433,509,429,515,414,515,
      385,505,358,494,333,481,324,488,314,490,308,491,303,478,295,466,282,458,
      266,447,257,447,246,445,236,445,229,446,224,434,224,420,223,411,211,400,
      197,392,182,379,171,365,162,353,154,339" 

  href="http://pds.jpl.nasa.gov/planets/choices/saturn1.htm" alt="Saturn" />
  <area shape="poly" coords="207,460,235,446,270,450,297,472,309,500,
       306,537,284,562,262,576,236,575,219,570,213,564,222,538,225,509,219,481" 

   href="http://pds.jpl.nasa.gov/planets/choices/uranus1.htm" alt="Uranus" />
<area shape="circle" coords="123,520,101" 

    href="http://pds.jpl.nasa.gov/planets/choices/neptune1.htm" 

    alt="Neptune" />
</map>

The HtmlMap Web Control

To gain the same functionality in ASPX web-pages, the HtmlMap web-control was developed. It includes two classes and an enum:

public enum AreaShapesEnum
public class MapArea
public class HtmlMap : System.Web.UI.WebControls.WebControl 

AreaShapesEnum is used by the MapArea class, and represents the possible shapes of a given area of the map. It can take the following values:

  • CIRCLE
  • POLY
  • RECTANGLE

The MapArea also includes the following members:

public List<int> CoordsGets or sets a System.Collections.Generic.List of coordinates for a given MapArea object.
public Uri HrefGets or sets the System.Uri for this MapArea object.
public string AltGets or sets the alternate text for this area object.
public Dictionary<string, string> AttributesGets or sets the System.Collections.Generic.Dictionary array of additional attributes of this MapArea object.

Using the last property allows defining a lot of client-side event handlers. For instance, to define the client-side event handler for the mouse-over event, just use the following code:

MapArea map = new MapArea();
map.Attributes.Add("onmouseover", "javascript:alert('mouseover');");

The HtmlMap control includes the following members:

public string NAMEGets or sets the ID and NAME attributes of the generated map tag.
public List<MapArea> AREASGets or sets a list of MapArea objects for this HtmlMap object.

The protected Render method of System.Web.UI.WebControls.WebControl is overridden in order to properly render the HtmlMap control and all its area into the HTML.

Using the HtmlMap Control

To use the HtmlMap control, simply create its instance and set the NAME property. Then, create a number of MapArea objects, fill their properties, and add them into the HtmlMap.AREAS list.

Here is an example of generating an HtmMap object and defining the MapArea for the Mercury planet from the above figure:

HtmlMap planetsMap = new HtmlMap();
planetsMap.NAME = "PlanetsMap";

MapArea mercuryArea = new MapArea();
mercuryArea.Shape = AreaShapesEnum.POLY;
mercuryArea.Href = 
  new Uri(@"http://pds.jpl.nasa.gov/planets/choices/mercury1.htm");
mercuryArea.Alt = "Mercury";
mercuryArea.Coords = new List<int>(new int[] { 139, 58, 122, 66, 
116, 84, 121, 94, 124, 101, 132,
107, 140, 110, 146, 111, 138, 100, 134, 88, 134, 78, 137, 68 });
planetsMap.AREAS.Add(mercuryArea);

After all, add the generated HtmlMap object into the Form's Controls collection.

form1.Controls.Add(planetsMap);

The HTML code of the map generated using the HtmlMap control is similar to the code written manually. But, with the HtmlMap control, we can produce maps even for automatically generated images (for some types of charts, geographical maps, etc.).

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Bashir Magomedov
Software Developer (Senior)
United Kingdom United Kingdom
Work: HSBC (http://www.hsbc.co.uk/).
Regalia: PhD in CS, MCAD, MCPD: Web Developer, MCTS: .Net Framework 2.0., 3.5.
Interests: Programming, artificial intelligence, C#, .NET, HTML5, ASP.NET, SQL, LINQ.
Marital Status: Married, daughter
Blog: http://www.magomedov.co.uk

Comments and Discussions

 
GeneralMy vote of 5 Pin
Manoj Kumar Choubey17-Feb-12 20:53
professionalManoj Kumar Choubey17-Feb-12 20:53 
GeneralHotspot Pin
AQEEL AHMED4-Sep-08 14:15
memberAQEEL AHMED4-Sep-08 14:15 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Article
Posted 12 Mar 2007

Stats

48.1K views
351 downloads
15 bookmarked