Image Map Control In ASP.NET

No.of Views1881
Bookmarked0 times
Downloads 
Votes0
By  NikhilJohari   On  16 Feb 2010 03:02:18
Tag : ASP.NET , ASP.NET Controls
Image Map Control In ASP.NET
emailbookmarkadd commentsprint

Images in this article missing? We recently lost them in a site migration. We're working to restore these as you read this. Should you need an image in an emergency, please contact us at info@codegain.com

 

Introduction

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 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

{codecitation class="brush: html; gutter: true;" width="650px"}







Type your webpage title here




Box, ImageMap etc –>








{/codecitation}

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



6- Drag an ImageMap control, one Label window or in the source window

7-Now set the tags like this in the source window

{codecitation class="brush: html; gutter: true;" width="650px"}









ImageMap Control








Text=”ImageMap Control”>

//Coding for Image Map control…




HotSpotMode=”Navigate” Left=”20? NavigateUrl=”~/Default2.aspx” Right=”50?

Target=”_self” Top=”100? />




{/codecitation}



// 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

 
Sign Up to vote for this article
 
About Author
 
NikhilJohari
Occupation-
Company-
Member Type-Senior
Location-India
Joined date-15 Aug 2009
Home Page-http://fast-get.com
Blog Page-http://dotnetask.blog.co.in
 
 
Other popularSectionarticles
Comments
By:Ashish PandeyDate Of Posted:1/11/2012 6:27:58 AM
ImageMap Control in ASP.Net
Really this is a good article, which helps a lot for beginners as me as well as developer. Check out this link too its also having nice post with wonderful explanation on ImageMap control in asp.net, it helped me lot to complete my task. http://mindstick.com/Articles/1c0dfa8a-1db8-4ae1-8f91-052cc3805674/?ImageMap%20Control%20in%20ASP.Net
Leave a Reply
Title:
Display Name:
Email:
(not display in page for the security purphase)
Website:
Message:
Please refresh your screen using Ctrl+F5
If you can't read this number refresh your screen
Please input the anti-spam code that you can read in the image.
^ Scroll to Top