I am Raghuveer

In my opinion programming means thinking, and it is fun. My vision is to teach programming in more understandable manner to the students from rural background. I support programming for everyone

Showing posts with label HTML. Show all posts
Showing posts with label HTML. Show all posts

Using ASP.NET ImageMap Control

Many web designers try to impress their website visitors with animated flash buttons or crazy JavaScript navigation menus, but they forget the old HTML Image maps. Image maps are images with clickable areas called hotspots, which allow a user to navigate to another page or website. Following the same old HTML concept of image maps, Microsoft introduced the server side ImageMap control for ASP.NET developers that let you convert any image into a navigation menu by just setting few properties. In this tutorial, I will show you how to use ASP.NET server side ImageMap control with Rectangular, Circular or even free form Polygon style hotspots.

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.

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.

ASP.NET ImageMap Controls Hotspots

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"
OnClick="ImageMap1_Click">
<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:ImageMap>
<br />
<asp:Label ID="Label1" runat="server" Width="322px" BackColor="#FFFFCC" BorderColor="Black"
BorderStyle="Solid" BorderWidth="1px"></asp:Label>

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.

ASP.NET Image Map with Postback

SourceCode             Demo

Creating Popup Dialog Windows using JQuery

source: ezzylearning

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.

JQuery Modal Popup Dialog

 

Before I start this tutorial, I assume that you are familiar with HTML, CSS and JavaScript, and if you are not then please visitwww.w3schools.com for some easy tutorials. I also assume that you know what JQuery is and how to use it in your web pages. I will recommend you to read my other JQuery tutorials on this website to learn the basics of JQuery. You can also visit www.jquery.com to learn and download the latest version of 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>
<input type="button" id="btnShowSimple" value="Simple Dialog" />
<input type="button" id="btnShowModal" value="Modal Dialog" />
<br /><br />
<div id="output"></div>
<div id="overlay" class="web_dialog_overlay"></div>
<div id="dialog" class="web_dialog">
<table style="width: 100%; border: 0px;" cellpadding="3" cellspacing="0">
<tr>
<td class="web_dialog_title">Online Survey</td>
<td class="web_dialog_title align_right">
<a href="#" id="btnClose">Close</a>
</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td colspan="2" style="padding-left: 15px;">
<b>Choose your favorite mobile brand? </b>
</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td colspan="2" style="padding-left: 15px;">
<div id="brands">
<input id="brand1" name="brand" type="radio" checked="checked" value="Nokia" /> Nokia
<input id="brand2" name="brand" type="radio" value="Sony" /> Sony
<input id="brand3" name="brand" type="radio" value="Motorola" /> Motorola
</div>
</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td colspan="2" style="text-align: center;">
<input id="btnSubmit" type="button" value="Submit" />
</td>
</tr>
</table>
</div>

 

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">
...
</div>

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.

<style type="text/css">
.web_dialog_overlay
{
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   height: 100%;
   width: 100%;
   margin: 0;
   padding: 0;
   background: #000000;
   opacity: .15;
   filter: alpha(opacity=15);
   -moz-opacity: .15;
   z-index: 101;
   display: none;
}
.web_dialog
{
   display: none;
   position: fixed;
   width: 380px;
   height: 200px;
   top: 50%;
   left: 50%;
   margin-left: -190px;
   margin-top: -100px;
   background-color: #ffffff;
   border: 2px solid #336699;
   padding: 0px;
   z-index: 102;
   font-family: Verdana;
   font-size: 10pt;
}
.web_dialog_title
{
   border-bottom: solid 2px #336699;
   background-color: #336699;
   padding: 4px;
   color: White;
   font-weight:bold;
}
.web_dialog_title a
{
   color: White;
   text-decoration: none;
}
.align_right
{
   text-align: right;
}
</style>

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.

Now I am moving to the important JQuery and JavaScript code which will show you how to show/hide popup dialog windows using JavaScript and JQuery. You make sure you have included the required JQuery library reference in the head element of your page.

<script src="scripts/jquery-1.4.3.min.js" type="text/javascript"></script>

<script type="text/javascript">
   $(document).ready(function ()
   {
      $("#btnShowSimple").click(function (e)
      {
ShowDialog(false);
         e.preventDefault();
      });
      $("#btnShowModal").click(function (e)
      {
ShowDialog(true);
         e.preventDefault();
      });
      $("#btnClose").click(function (e)
      {
HideDialog();
         e.preventDefault();
      });
      $("#btnSubmit").click(function (e)
      {
         var brand = $("#brands input:radio:checked").val();
         $("#output").html("<b>Your favorite mobile brand: </b>" + brand);
HideDialog();
         e.preventDefault();
      });
   });
function ShowDialog(modal)
   {
      $("#overlay").show();
      $("#dialog").fadeIn(300);
      if (modal)
      {
         $("#overlay").unbind("click");
      }
      else
      {
         $("#overlay").click(function (e)
         {
            HideDialog();
         });
      }
   }
   function HideDialog()
   {
      $("#overlay").hide();
      $("#dialog").fadeOut(300);
   }

</script>

In the above code, there are two JavaScript functions ShowDialog() and HideDialog() defined to show/hide both transparent overlay div and dialog window. The ShowDialog function also has conditional code to implement simple or modal dialog windows. If you are displaying the modal window then clicking the overlay div will not hide the dialog box, and user has to close the popup window using the Submit button or Close link on top. These two functions are called from different button click events in the JQuery ready method. Finally there is a click event handler forbtnSubmit which display the user favorite mobile brand in output div element.

LIVE DEMO