Asp.net programming we consider all important topic for knowledge about controls,web Services, JSON, Ajax, database, and interview related Question. In this Asp.net and sql server tutorial blog we give many examples of jquery as like How Play YouTube Video in Your Asp.net Website by URL, How to Play YouTube Videos in Asp.net by using Jquery , Jquery Change div background on mouseover in asp.net , JQuery UI Datepicker (Calendar) etc.

Wednesday, August 6, 2014

ImageMap Control

How to use ImageMap in asp.net:

The ASP.NET Programming Image Map allows to user to create an image that has different-2 regions  in which user can click, These Image regions  are called hot spots. Each hot spot can be a separate by hyperlink or postback event of asp.net.
It is server side control which is defined in stander control in asp.net toolbox.  This control released in ASP.NET version 2.0. It enables user to turn an image into a navigation menu (Group of links).


ImageMap  on asp.net web page:

Drag and drop  the Image Map  from the Toolbox  to your page.Set properties  and behavior of  ImageMap.
asp.net web controls
asp.net ImageMap Server controls

Define Image hot spots for an Image Map:

In Design view of web page, right-click the ImageMap control and then click Properties on the menu. Click the ellipsis button beside the Hotspots property to open the Hotspot Collection Editor Dialog box. Click the arrow on the right side of the Add button and click the type of Hotspots you want to add: Circle Hotspot, Rectangle Hotspots, or Polygon Hotspot. In the Properties area, set the properties for your Hotspot.

Hot spots features of ImageMap:

There is no limit on number of hotspots each image may contain. You can create as you like.
  • Each hotspot is dividing by various attributes like shape, locations and size.
  • Overlapping hotspots are perfectly valid( refer no action).
  • Hot spots are defined using x-axis and y-axis coordinates.
  • Hot spots assigned Image URL's and are capable of post back.

Different types of hot spots

There are three main different types of hot spots offered by Image Map control. They are:
  • Circle Hotspot
  • Rectangle Hotspot
  • Polygon Hotspot

Suppose you are working on marketing web site which contains whole country recorded. And the user want a map on main page of country And on click state on this map then he move to a particular state page where only state related records are display. Then for solving this type of requirement you need to use ImageMap asp.net control. And create hot spots on the Image map control.

<asp:ImageMap ID="ImageMap2" ImageUrl="~/map.gif" HotSpotMode="Navigate" runat="server">
         <asp:RectangleHotSpot Top="0" Bottom="225" Left="0" Right="300"AlternateText="NorthAmerica" NavigateUrl ="http://www.northamericatravelservice.co.uk/"/>
        <asp:RectangleHotSpot Top="256" Bottom="500" Left="0" Right="300"AlternateText="SouthAmerica" NavigateUrl ="http://www.travel.org/south.html" />
        </asp:ImageMap>


See the Example of Image MapOther Post :



No comments:

Post a Comment