Before you start this tutorial, you need to make sure that you have an image ready which you want to use as ImageMap. It can be a toolbar image created in any graphic tool such as Photoshop, or it can be a map of your or home or country. I have created the following image, especially for this tutorial to show you all types of hotspots ASP.NET ImageMap control supports. You can save this image on your desktop and use it for playing with ASP.NET ImageMap control.
To get started, create an ASP.NET website project in Visual Studio and add the image in your project root or images sub directory. Next, drag theImageMap control on the page from the left hand side toolbox. Set the ImageUrl property of the control and you will be able to see your image appear on the designer area of the page. If you see the properties of this control in the properties window, you will notice that all the basic properties like BackColor, BorderColor, etc. are available along with ImageAlign and AlternateText properties to fine tune your image look and feel on the page. The properties which need more explanations are HotSpotMode and HotSpots.
HotSpotMode property let you specify the default click behavior of the hotspot inside the ImageMap control. It can be set to one of the followings:
Inactive: This value means that HotSpots does not have any behavior so nothing will happen if the user will click on image.
Navigate: This value allows you to navigate user to any URL.
PostBack: This property allows you to generate post back behavior on user clicks and very useful if you want to execute code on the server side based on the user clicks.
NotSet: This property checks the behavior set by the HotSpotMode property and if none of the above three values are set then all HotSpots navigate to a URL.
Next you need to define the hotspots to divide your image into clickable areas. If you will click the ellipse next to the HotSpots property in the properties window you will see the following HotSpot Collection Editor dialog appear on the screen that lets you specify different types of hotspots. You can add Rectangle, Circle or Polygon hotspots to your image depending upon your image and requirement.
All these hotspots types have some properties to customize the hotspot region and behavior. You can specify Left, Top, Right and Bottom for Rectangle hotspot and X, Y and Radius properties for Circle hotspot. The Polygon hotspot requires a serious of X and Y coordinates to create a free form hotspot. All these hotspots types also have HotSpotMode property available to specify their click behavior individually so you can have one hotspot that navigates the user to another page and other hotspot which generate postback to the server and yet another hotspot which does nothing when user click on it. You also have PostBackValue property to send different values to the server on postback. You also haveTarget property to open the URL in a new window if you want and other basic properties such as NavigateUrl to specify the URL to navigate to on user click and AlternateText that will show a nice tool tip when the user will move the mouse over that particular hotspot.
In the sample image I used in this tutorial, the facebook and twitter logos will use navigate behavior while the other four will generate postback to the server. The facebook and twitter logos will use Rectangle hotspots, Wordpress, BMW and Windows logos will use Circle hotspots and the star will show you how to use Polygon hotspot. Following is the complete HTML markup used in this tutorial.
|<asp:ImageMap ID="ImageMap1" runat="server" ImageUrl="~/images/aspnet_imagemap.jpg"|
<asp:RectangleHotSpot AlternateText="Facebook" Bottom="62"
HotSpotMode="Navigate" Left="14" NavigateUrl="http://www.facebook.com"
Right="152" Target="_blank" Top="11" />
<asp:RectangleHotSpot AlternateText="Twitter" Bottom="61"
HotSpotMode="Navigate" Left="156" NavigateUrl="http://www.twitter.com"
Right="306" Target="_blank" Top="11" />
<asp:CircleHotSpot AlternateText="WordPress" HotSpotMode="PostBack"
PostBackValue="WordPress" Radius="41" X="50" Y="118" />
<asp:CircleHotSpot AlternateText="BMW" HotSpotMode="PostBack"
PostBackValue="BMW" Radius="41" X="155" Y="121" />
<asp:CircleHotSpot AlternateText="Windows" HotSpotMode="PostBack"
PostBackValue="Windows" Radius="44" X="266" Y="122" />
<asp:PolygonHotSpot AlternateText="Star" HotSpotMode="PostBack"
PostBackValue="Star" Coordinates="108,217, 141,210, 157,181, 173,210, 207,217, 184,242, 188,276, 158,261, 127,275, 131,243" />
<asp:Label ID="Label1" runat="server" Width="322px" BackColor="#FFFFCC" BorderColor="Black"
Note, I have also added a Label control at the bottom that will be used to display hotspots PostBackValue on user clicks. The ImageMap control supports click event that allows you to capture the user clicks on different hotspot areas in a single place. It gets the ImageMapEventArgs type object as one of its argument that has PostBackValue property which you can use in the server side code on postback. The following code shows the ImageMap click event handler used in this tutorial.
|protected void ImageMap1_Click(object sender, ImageMapEventArgs e)|
Label1.Text = e.PostBackValue.ToString();
Now, It’s the time to test our ImageMap control in the browser, press F5 and try to click different logo hotspots and you will see the Label control showing you the PostBackValue as you will click the logo that has PostBack behavior defined.
If you are a regular internet user and specially visit sites like Facebook, Twitter, Yahoo Mail, I am sure you are familiar with the popup dialog windows appears on the screen asking you different options or display information or warning messages. Popup dialog windows are child windows and commonly used in GUI systems and User Interface designs to interact with the user without disturbing the main application or window workflow. In this tutorial, I will show you how you can create simple and modal popup dialog windows using JQuery.
The first thing you need is the basic HTML code to create a popup dialog box. Most developers normally use HTML div element to create floating dialog windows. Following is the HTML code I have used in this tutorial to create buttons and popup dialog windows shown in the above figure.
<h3>JQuery Popup Dialogs</h3>
In the above HTML code, there are two important elements. The first element is the div tag with the id "overlay". This div will cover the entire page width and height to create a semi-transparent background when the popup dialog window will appear on the screen.
The second important element is the div tag with the id "dialog". This div will be used as popup dialog and can contain any type of HTML inside. I put an HTML table and created a simple online survey for this tutorial.
<div id="dialog" class="web_dialog">
You may have noticed that the HTML code shown above is using the CSS classes web_dialog_overlay, web_dialog, web_dialog_title etc. Following is the CSS code for all the classes I used in this tutorial.
There are few important things to explain in the above CSS code. Note how the .web_dialog_overlay class top, right, bottom, left, height and width properties are set to make sure it covers the entire browser display area. Furthermore, notice how the transparency is set using opacity, -moz-opacity and filter properties. In the .web_dialog class the important properties are width, height, top, left, margin-left and margin-top which are set appropriately to make sure the popup dialog appears in the center of the screen. You can play with these properties to display popup dialog anywhere you want. The display property for both classes is set to none to keep both div elements hidden. Another important property is the z-index which sets the stack order of different elements on the screen. The element with the greater stack order will always be in front of the elements with the lower stack order.