ImageMap Server Control

ImageMap control is introduced to get Navigation property to Image control as you see image control is missing Navigationurl property. You can have group of images in one image and we can navigate to one or more different url’s. As I mentioned to different url’s I will show you with an example before goin to the example stuff lets see imagemap properties.

Hot spots features:
• Each hot spots is characterized by various attributes like shape, location and size.
• Overlapping hotspots are perfectly valid.
• Hotspots are defined using x and y coordinates.

Types of hot spots
• CircleHotSpot
• RectangleHotSpot
• PolygonHotSpot

CircleHotSpot
We should define X, Y and radius to get this property.

RectangleHotSpot
We should defne Top,Buttom,Left and Right coordinates to get this property.



I got four images in one image and maping images using imagemap to navigation property. when the user clicks on circle or rectangle images I used navigation property to redirect to different urls. As shown above figure the code looks like this.

<asp:ImageMap ID="ImageMap1" runat="server" Height="300px" ImageUrl="~/Images/ImageMap.JPG" Width="300px">
<asp:CircleHotSpot Radius="40" AlternateText="Go to CoolTuts" X="50" Y="218" Target="_blank" NavigateUrl="http://www.cooltuts.com/" />
<asp:RectangleHotSpot AlternateText="Go to Bing" Left="17" Right="85" Top="27" Target="_blank" Bottom="110" NavigateUrl="http://www.bing.com/" />
<asp:RectangleHotSpot AlternateText="Go to Google" Left="140" Right="290" Top="27" Target="_blank" Bottom="110" NavigateUrl="http://www.google.com/" />
<asp:RectangleHotSpot AlternateText="Go to Yahoo" Left="185" Right="255" Top="140" Target="_blank" Bottom="287" NavigateUrl="http://www.Yahoo.com/" />
</asp:ImageMap>


That’s it, test it and let me know if any Questions?
Thanks,
Emmaneale Mendu
Web Developer