ImageMap control in Asp.Net
The ImageMap control consists primarily of two pieces.
The first is an image, which can be a graphic in any standard web graphic format, such as a .gif, .jpg, or .png file.
The second element is a collection of hotspot controls. Each hotspot control is a different element. For each hotspot control, you define its shape — a circle, rectangle, or polygon — and the coordinates that specify the location and size of the hot spot.
For example, if you create a circle hot spot, you define the x and y coordinates of the circle's centre and the circle's radius.
You can define as many or as few hot spots for the image as you require. You do not need to define hot spots to cover the graphic entirely.
Note:
You can define overlapping hot spots. Each hot spot has a z-index value, and if a user clicks an area that is defined by two or more overlapping hot spots, the hot spot with the highest z-order is the hot spot that is selected.
To define hot spots for an ImageMap control
1. In Design view, right-click the ImageMap control and click Properties on the shortcut menu.
2. Click the ellipsis button beside the HotSpots property to open the HotSpot Collection Editor Dialog box.
3. Click the arrow on the right side of the Add button and click the type of HotSpot you want to add: CircleHotSpot, RectangleHotSpot, or PolygonHotSpot.
4. In the Properties area, set the properties for your HotSpot.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ImageMap.aspx.cs" Inherits="ImageMap" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>::MBOX-TUTS::</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ImageMap ID="ImageMap1" runat="server" ImageUrl="~/Images/ImageMap1.jpg" HotSpotMode="Navigate">
<asp:RectangleHotSpot Left="49" Top="36" Right="216" Bottom="148" NavigateUrl="http://mboxtuts.blogspot.com" Target="_blank" />
<asp:CircleHotSpot X="368" Y="200" Radius="76" NavigateUrl="http://mboxtuts.blogspot.com" Target="_blank" />
<asp:PolygonHotSpot Coordinates="143,187, 237,249, 222,333,107,333,76,254" NavigateUrl="http://mboxtuts.blogspot.com" Target="_blank" />
</asp:ImageMap>
</div>
</form>
</body>
</html>
The ImageMap control consists primarily of two pieces.
The first is an image, which can be a graphic in any standard web graphic format, such as a .gif, .jpg, or .png file.
The second element is a collection of hotspot controls. Each hotspot control is a different element. For each hotspot control, you define its shape — a circle, rectangle, or polygon — and the coordinates that specify the location and size of the hot spot.
For example, if you create a circle hot spot, you define the x and y coordinates of the circle's centre and the circle's radius.
You can define as many or as few hot spots for the image as you require. You do not need to define hot spots to cover the graphic entirely.
Note:
You can define overlapping hot spots. Each hot spot has a z-index value, and if a user clicks an area that is defined by two or more overlapping hot spots, the hot spot with the highest z-order is the hot spot that is selected.
To define hot spots for an ImageMap control
1. In Design view, right-click the ImageMap control and click Properties on the shortcut menu.
2. Click the ellipsis button beside the HotSpots property to open the HotSpot Collection Editor Dialog box.
3. Click the arrow on the right side of the Add button and click the type of HotSpot you want to add: CircleHotSpot, RectangleHotSpot, or PolygonHotSpot.
4. In the Properties area, set the properties for your HotSpot.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ImageMap.aspx.cs" Inherits="ImageMap" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>::MBOX-TUTS::</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ImageMap ID="ImageMap1" runat="server" ImageUrl="~/Images/ImageMap1.jpg" HotSpotMode="Navigate">
<asp:RectangleHotSpot Left="49" Top="36" Right="216" Bottom="148" NavigateUrl="http://mboxtuts.blogspot.com" Target="_blank" />
<asp:CircleHotSpot X="368" Y="200" Radius="76" NavigateUrl="http://mboxtuts.blogspot.com" Target="_blank" />
<asp:PolygonHotSpot Coordinates="143,187, 237,249, 222,333,107,333,76,254" NavigateUrl="http://mboxtuts.blogspot.com" Target="_blank" />
</asp:ImageMap>
</div>
</form>
</body>
</html>
0 comments:
Post a Comment