Code Simplified – Viral Sarvaiya

Code Simplified – Viral Sarvaiya, Web Developer Friends, dot net Developer, Sql Server Developer

How to use ImageMap Control

Posted by Viral Sarvaiya on October 3, 2010

ImageMap control is another new server control released in ASP.NET 2.0. It enables you to turn an image into a navigation menu. In the past, developers would break an image into multiple pieces and put it together again in a table, reassembling the pieces into one image.

When the end user clicked a particular piece of the overall image, the application picked out which piece of image was chosen and based actions upon that particular selection.

With the new ImageMap control, you can define images with distinct regions called hot spots which are identified using coordinates. Each hotspot is independent element which can respond to user actions like postback.

Hot spots features

o    There is no limit on number of hotspots each image may contain.

o    Each hotspot is characterized by various attributes like shape, location and size.

o    Overlapping hotspots are perfectly valid.

o    Hot spots are defined using x and y coordinates.

o    Hot spots can be assigned Image URL’s and are capable of postback.

Different types of hot spots

There are three different types of hot spots offered by ImageMap control. They are:

o    CircleHotspot

o    RectangleHotspot

o    PolygonHotspot

CircleHotspot: CircleHotspot defines circle shaped hot spot region in an ImageMap control. To define the region for a circle hot spot, we should define X and Y coordinates for circle as well as radius property which usually is the distance from the center of circle to the edge.

RectangleHotspot: RectangleHotspot defines rectangle shaped hot spot region in an ImageMap control. To define the region for a Rectangle hot spot, we define Top, Bottom, Left and Right coordinates. Similar is the case for the Polygon hot spot.

Overlapping hotspots are treated with extra attribute called z-index value. The hotspot with higher z-index value will be treated as selected hotspot.

With the new ImageMap control, you can take a single image and specify particular hotspots on the image using coordinates. An example is shown below.

<asp:ImageMap ID="imgmap1" runat="server" ImageUrl="~/SimpleDataBindSilverlight.png" onclick="ImageMap1_Click" HotSpotMode="PostBack">
 <asp:RectangleHotSpot Top="0" Bottom="100" Left="0" Right="100" AlternateText="Top Left" PostBackValue="This is Top Left" />
 <asp:RectangleHotSpot Top="100" Bottom="100" Left="100" Right="100" AlternateText="All 100 pixel" PostBackValue="This is at all 100 pixel" />

protected void ImageMap1_Click(object sender, ImageMapEventArgs e)
 Response.Write("Hi," + e.PostBackValue);

Run the code and click to image…

Happy coding….


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: