Posts
ImageMap is a server side control, which allows you to display an image and take an action when a particular part of the image is clicked. Think about that; you are working on a Car sales website for a reputed car manufacturing company. And, your client asks to display a nice picture of your car model in one page and when the user clicks the parts of it (the car), the details about the part is displayed on the next page. ImageMap will fulfill this need.
In the First Page that is in the default page, we will display the Map of India. When you click inside theAndhraPradesh state, we will navigate to a separate page that talks about Andhra. Similarly, when we click inside the TamilNadu state, we will navigate to a separate page that talks about TamilNadu. Each of these pages have a normal image that highlights the state you clicked. Also each page has the Go Back link to navigate to the Main Map page.
OK. Let us start our example.
2. Start a web site
1) First start a File System based website with Visual C# as the Language. (Actually we are not going to write any code here. But you can extend your learning if you need to.)
2) Right click your website on the solution explorer, select Add New Item.
3) From the Displayed dialog select WebForm and Name the form Andhra.aspx
4) Add one more Web Form and Name it TamilNadu.aspx
5) Go to Windows explorer and Browse to the Web Site Folder and create directory called Images.
6) Open the Attached solution, copy the content (Images! What else? ) of the Images folder to your newly created Images folder.
The copied Images are Shown Below:
The Solution Explorer now looks like below (refresh the Explorer, if the Images folder is not displayed):
(Forget about web.config if it is not there)
3. Image Map Button on Default page
In the default page we are going to place the ImageMap control. So, when the website is accessed the initial page called default.aspx will display thisImagemap control. The outline of India will be loaded into this Imagemap control. Let us see how we can do it.
1) First open the Default.aspx page and go to the design view.
2) Drag and drop the ImageMap control on the Page.
3) Once it is done, set the Image URL Property. Click on the small button at the end of the property value. From the displayed dialog, select Image Wmap.Jpgas shown in the picture below:
4) Click OK.
Now the ImageMap control displays the Outline of the India Map.
4. Set the Images for Other Pages
Now we will set the Images for other two pages. This time we will use Normal Image controls. When we click the particular state; that is TamilNadu or Andhra in the ImageMap control on the Default.aspx page, we will move to the corresponding pages.
1) Open the design view of the Andhra.aspx page.
2) Drag and Drop the Image control on the design surface
3) Set the Image URL property to the image WMapAP.JPG as you already did it for the ImageMap control
4) Add a label control below the Image and set the following Text property: Andhra Pradesh. The language used here is Telugu
6) Add a Hyperlink control below the Image. Set the Navigate property to: Default.aspx. Now, when the link is clicked you will move to default.aspx page.
5) Open the TamilNadu.aspx page, Place an Image control and set the URL image to WMapTN.JPG. Add a label and set it's text property to The State of TamilNadu. Language used is Tamil. Add a Hyperlink control to navigate back to the Default.aspx as you did for the Andhra.aspx
5. Set the HotSpots for ImageMap control
Now it is time to set the HotSpot for the ImageMap control. A HotSpot is a portion of the image, which will produce some action when it is clicked. There are three different ways to define the hotspot for an Image. The hotspot can be defined as Circle or Rectangle or Polygon. In our case even though the polygon is the best fit, define rectangle hot spots for the State of Andhra and Polygon hot spot for the State of TamilNadu.
For the state of Andhra, two rectangles are specified as the hotspot. You can use paintbrush to do this. Take a copy of the Image and Follow the instructions below:
READ MORE >>
0 comments:
Post a Comment