ImageMap Control in ASP.NET
Hi!
Here i will show you step by step procedure how to use
ImageMap Control in ASP.NET in visual studio 2005 / 2008
ImageMap control is very
important control in asp.net the basic use of image control is to
giving the links on any image after dividing the part of images, as the
name suggest image “map” is to display a image as a dividing part… …__________________________________________________
Here I am using Visual Studio 2008 but there is no condition you can use Visual Studio 2005 also.
So follow these steps to create State Implementation
The Steps are:
1- Start -> All Programs -> Visual Studio 2005 or Visual Studio 2008
2- Now go to File Menu -> New -> Web Site
3- Under Visual Studio Installed Template-> Choose ASP.NET WEB
SITE -> Choose File System from the location combo box -> Set the
path by the browse button - > Choose the language from the Language
ComboBox (Visual C# , Visual Basic , J #)
Choose Visual C#
4 - Click on the OK Button:-
First you have to learn XML and HTML to work with ASP .NET_
I have used <!– text –> to make the text as comment this is the way to make comment in this code …
This is the Source Code window and in this page you will se this code…
<%@ Page Language=”C#” AutoEventWireup=”true” CodeFile=”Default.aspx.cs” Inherits=”_Default” %>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head runat=”server”>
<title>Type your webpage title here</title> <!– Here you can specify your page title in between title tag
</head>
<body>
<form id=”form1? runat=”server”>
<div>
<!– In between div tags you can manage your web controls like buttons, labels, picture
Box, ImageMap etc –>
</div>
</form>
</body>
</html>
See here is a tab named Design in the bottom of this page
5- Click on this tab and you will see a blank web page where you can
drag any control from the toolbox (which is in the left side of this
window)
Open Web.config file and write true in place of false, See
<compilation debug=”true”>
6- Drag an ImageMap control, one Label window or in the source window
7-Now set the tags like this in the source window…
<%@ Page Language=”C#” AutoEventWireup=”true” CodeFile=”Default.aspx.cs” Inherits=”_Default” %>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head runat=”server”>
<title>ImageMap Control</title>
</head><body>
<form id=”Form” runat=”server”>
<div>
<asp:Label ID=”Label1? runat=”server” Font-Bold=”True” Font-Underline=”True”
Text=”ImageMap Control”></asp:Label>
//Coding for Image Map control…
<asp:ImageMap ID=”ImageMap1? runat=”server” ImageUrl=”~/SampleImageMap.jpg”>
<asp:RectangleHotSpot AlternateText=”HOTSPOT 1? Bottom=”10?
HotSpotMode=”Navigate” Left=”20? NavigateUrl=”~/Default2.aspx” Right=”50?
Target=”_self” Top=”100? />
</asp:ImageMap>
// Here I have given the url of the image for this you have to do one thing
just copy an image from your hard drive and paste it in the folder named App_Data which is in solution explorer…
8 - Now run your web site by Ctrl + F5
OUT PUT
9-Now when you move the cursor on the image HOTSPOT1 will disappear
there click there and you have to moved on default2.aspx page…
10- Close web browser
11-Close visual studio
Thanks!
–Nikhil Kumar
![]()
Visit my site and leave your precious comments please...
www.dotnetask.blog.co.in