Introduction
An image map is a picture on a webpage that provides various links , called hotspots, to navigate to other web pages , depending on the place where the user click (on single image). Web Designer frequently use image maps in their websites . An image map can be included in your web page by using the ImageMap Control.
An ImageMap control exists within the System.Web.UI.WebControls namespace. Image maps are often real maps; for example , you can display the map of the USA and define hotspot regions for each of its state and then navigate to the corresponding page containing the information for the selected state.
Public Properties of the ImageMap Class
Enable : Obtains or sets a value indicating whether the control can respond to user interaction.
HotSpotMode : Obtains or sets the default behavior for the HotSpot objects of an ImageMap control when the HotSpot objects are clicked.
HotSpots : Obtains or sets a group of HotSpot objects that represents the defined hotspot regions in an ImageMap Control.
Target : Obtains or sets the target window to show the Web page content when the ImageMap control is clicked.
Public Event of the ImageMap Class
Click : Occurs when a HotSpot object in an ImageMap control is clicked.
Output
An image map is a picture on a webpage that provides various links , called hotspots, to navigate to other web pages , depending on the place where the user click (on single image). Web Designer frequently use image maps in their websites . An image map can be included in your web page by using the ImageMap Control.
An ImageMap control exists within the System.Web.UI.WebControls namespace. Image maps are often real maps; for example , you can display the map of the USA and define hotspot regions for each of its state and then navigate to the corresponding page containing the information for the selected state.
Public Properties of the ImageMap Class
Enable : Obtains or sets a value indicating whether the control can respond to user interaction.
HotSpotMode : Obtains or sets the default behavior for the HotSpot objects of an ImageMap control when the HotSpot objects are clicked.
HotSpots : Obtains or sets a group of HotSpot objects that represents the defined hotspot regions in an ImageMap Control.
Target : Obtains or sets the target window to show the Web page content when the ImageMap control is clicked.
Public Event of the ImageMap Class
Click : Occurs when a HotSpot object in an ImageMap control is clicked.
<%@ Page Language="C#" %>
<!DOCTYPE html>
<script runat="server">
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ImageMap ID="ImageMap1" runat="server" Height="227px" HotSpotMode="Navigate" ImageUrl="~/imagemap.jpg" Width="227px">
<asp:RectangleHotSpot HotSpotMode="Navigate" Left="10" NavigateUrl="http://www.google.com" Top="100" />
<asp:RectangleHotSpot HotSpotMode="Navigate" Left="3" NavigateUrl="http://www.microsoft.com" Top="200" />
</asp:ImageMap>
</div>
</form>
</body>
</html>
<!DOCTYPE html>
<script runat="server">
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ImageMap ID="ImageMap1" runat="server" Height="227px" HotSpotMode="Navigate" ImageUrl="~/imagemap.jpg" Width="227px">
<asp:RectangleHotSpot HotSpotMode="Navigate" Left="10" NavigateUrl="http://www.google.com" Top="100" />
<asp:RectangleHotSpot HotSpotMode="Navigate" Left="3" NavigateUrl="http://www.microsoft.com" Top="200" />
</asp:ImageMap>
</div>
</form>
</body>
</html>
