Post
Ask Question

Creating Custom HotSpots In ASP.NET

Introduction

In this article we will learn about how to create Custom HotSpots in ASP.NET as well as the usage of JavaScript to highlight the hotspot area on mouseover and mouseleave event.

In the previous article Creating HotSpots in ASP.NET, I had explained about the different ways to create HotSpots. So if you're not aware about the term 'HotSpots' in ASP.NET, you may read more about it from here.
 
Part 1
RECAP

Basically, HotSpot is a part of a single image which may produce some actions when anyone click or move the mouse pointer over that hotspot (area). It's the part of graphics design which is used for complex web page design.

We can create any numbers of hotspots on a image by using HotSpot object inside the ImageMap control. ASP.NET has the following three basic types of HotSpot that correspond to the <area> tag defined by HTML.
  • RectangleHotSpot
  • CircleHotSpot
  • PolygonHotSpot 
Custom Hotspots

Now we're going to learn about Custom HotSpots. As we have read in the recap paragraph, we can create any type of clickable region by using RectangleHotSpot, CircleHotSpot and PolygonHotSpot. In this article we will create a custom hotspot for the following images.
 
 Triangle
 Figure 1 : HotSpot over triangular area 
 
 NewYear
Figure 2 : HotSpot over polygon area  (2016)
 
Note:

Further, we will read how can we create a custom hotspot for triangular and polygon shapes. So I will create custom hotspots to make the triangular area of first image clickable as well the number 2016 as clickable. 

Basically these are the three derived class in ASP.NET which derives from HotSpot base class. We can create a variety of complex multi-sided shapes, such as triangular, octagons, diamonds and so on.

Note

ImageMap control supports any HotSpot- derived class but we cannot do anything that falls outside the HTML standard.
 
Important Points
 
When creating a custom HotSpot 
 
1. Our class must be derived from HotSpot.

Example 

Point1
 2. Override MarkupName.

We must override the 'MarkupName' property to return the type of shape we are creating. We can use circle, rectangle or polygon as a return value. This information is place into 'shape' attribute of <area> tag.

Example:

 Point2
 
3. GetCoordinates()

We need to override the GetCoordinates() method which return the coordinates of hotspot with comma separated. For a polygon, it must be a comma-separated series of points in X,Y pairs.

Example

Point3
 
4. Before using our custom hotspot, we must register it's namespace at page or config file as common custom control of ASP.NET.

Example

Point4
5. After following these 4 steps our custom HotSpot will be ready to use with ImageMap control. Now let's see the practical implementation in a website.
 
Steps to create Custom Hotspots

Step 1: Open your Visual Studio and create a new website. For this article I am using Visual Studio 2012 and going to create an 'Empty Website'.

NewWebsite

Step 2: Now add App_Code folder in your application.

Step 3: Now add a class inside the App_code folder and do the name of class for your custom hotspot and use the ASP.NET HotSpot class as its base class.

Note: It's not mandatory to create your class inside the App_Code.

Firstly, I am going to create a custom hotspot for triangular shape. Let's see the following code snippet.

Code Snippet
  1. namespace MyCustomHotSpot  
  2. {  
  3.     public class TriangleHotSpot : HotSpot  
  4.     {  
  5.       // ...  
  6.     }  
  7. }  
  • HotSpot is the class provided by ASP.NET.
  • TrinagelHotSpot is our custom hotspot class name.
  • MyCustomHotSpot is the name of namespace which I am using for this article.
Note: We need to add the namespace System.Web.UI.WebControls;
 
Step 4: Now we need to define some properties which are necessary to draw a triangle. Let's see the following code snippet in which I have used X, Y, Height and Width properties to get or set the values of X,Y coordinates and height & width.

Code Snippet 
  1. public TriangleHotSpot()  
  2. {  
  3.     X = 0;  
  4.     Y = 0;  
  5.     Height = 0;  
  6.     Width = 0;  
  7. }  
  8.   
  9. public string CssClass { get; set; }  
  10.   
  11. public int X  
  12. {  
  13.     get { return (int)ViewState["X"]; }  
  14.     set { ViewState["X"] = value; }  
  15. }  
  16. public int Y  
  17. {  
  18.     get { return (int)ViewState["Y"]; }  
  19.     set { ViewState["Y"] = value; }  
  20. }  
  21.   
  22. public int Height  
  23. {  
  24.     get { return (int)ViewState["Height"]; }  
  25.     set { ViewState["Height"] = value; }  
  26. }  
  27.   
  28. public int Width  
  29. {  
  30.     get { return (int)ViewState["Width"]; }  
  31.     set { ViewState["Width"] = value; }  
  32. }  
Step 5: Now we need to override the 'MarkupName' property and GetCoordinates() method in this class.

Code Snippet  
  1. protected override string MarkupName  
  2. {  
  3.            get { return "polygon"; }  
  4. }  
  5.   
  6. public override string GetCoordinates()  
  7. {  
  8.     //Top coordinates  
  9.     int topXvalue = X;  
  10.     int topYvalue = Y - Height / 2;  
  11.  
  12.     //Bottom-Left Cordinates  
  13.     int bottomLeftXvalue = X - Width / 2;  
  14.     int bottomLeftYvalue = Y + Height / 2;  
  15.   
  16.    //Bottom-Right coordinates  
  17.    int bottomRightXvalue = X + Width / 2;  
  18.    int bottomRightYvalue = Y + Height / 2;  
  19.   
  20.    var coordinateValues = @"" + topXvalue + "," + topYvalue + "," +  
  21.        bottomLeftXvalue + "," + bottomLeftYvalue + "," +  
  22.        bottomRightXvalue + "," + bottomRightYvalue;  
  23.   
  24.        return coordinateValues;  

The following is the complete code snippet for custom hotspot class "TriangleHotSpot".
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5.   
  6. using System.Web.UI.WebControls;  
  7.   
  8. namespace MyCustomHotSpots  
  9. {  
  10.     public class TriangleHotSpot: HotSpot  
  11.     {  
  12.         public TriangleHotSpot()  
  13.         {  
  14.             X = 0;  
  15.             Y = 0;  
  16.             Height = 0;  
  17.             Width = 0;  
  18.         }  
  19.   
  20.         public string CssClass { get; set; }  
  21.   
  22.         public int X  
  23.         {  
  24.             get { return (int)ViewState["X"]; }  
  25.             set { ViewState["X"] = value; }  
  26.         }  
  27.         public int Y  
  28.         {  
  29.             get { return (int)ViewState["Y"]; }  
  30.             set { ViewState["Y"] = value; }  
  31.         }  
  32.   
  33.         public int Height  
  34.         {  
  35.             get { return (int)ViewState["Height"]; }  
  36.             set { ViewState["Height"] = value; }  
  37.         }  
  38.   
  39.         public int Width  
  40.         {  
  41.             get { return (int)ViewState["Width"]; }  
  42.             set { ViewState["Width"] = value; }  
  43.         }  
  44.   
  45.         protected override string MarkupName  
  46.         {  
  47.             get { return "polygon"; }  
  48.         }  
  49.   
  50.         public override string GetCoordinates()  
  51.         {  
  52.             //Top coordinates  
  53.             int topXvalue = X;  
  54.             int topYvalue = Y - Height / 2;  
  55.   
  56.             //Bottom-Left Cordinates  
  57.             int bottomLeftXvalue = X - Width / 2;  
  58.             int bottomLeftYvalue = Y + Height / 2;  
  59.   
  60.             //Bottom-Right coordinates  
  61.             int bottomRightXvalue = X + Width / 2;  
  62.             int bottomRightYvalue = Y + Height / 2;  
  63.   
  64.             var coordinateValues = @"" + topXvalue + "," + topYvalue + "," +  
  65.                                    bottomLeftXvalue + "," + bottomLeftYvalue + "," +  
  66.                                    bottomRightXvalue + "," + bottomRightYvalue;  
  67.   
  68.             return coordinateValues;  
  69.   
  70.         }  
  71.     }  
  72. }  
Step 6: Our custom hotspot 'TriangleHotSpot' is ready. Now we will use it inside the ImageMap control. So let’s add a web page in your application. For this article I am going to add a new web page with name: Triangle.aspx
 
Step 7: Now we need to register the namespace of custom hotspot 'TriangleHotSpot'. We can register it on TRiangle.aspx page or configuration file web.config). For this article I am going to register on page directly.
  1. <%@ Register Namespace="MyCustomHotSpot" TagPrefix="myHotSpot" %>  
Step 8: Now add an ImageMap control on this page and refer the image on which you want to create hotspots. (For this article I am going to refer an image which has a shape of triangle. Here we will create a hotspot over triangular area only.)

Triangle.aspx 
  1. <asp:ImageMap ID="ImageMap1" runat="server" ImageUrl="~/Images/Triangle.png">  
  2.             <myHotSpot:TriangleHotSpot X="265" Y="125" Height="155" Width="185"   
  3.                 AlternateText="triangle" />              
  4. </asp:ImageMap>   
Note

In this article I am going to use JavaScript to change the image state on mouseover, but if you want use click event then you may use HotSpotMode="PostBack" with PostBackValue="your value" Click here to know about HotSpotMode.
 
Step 9: Now add JQuery file in your solution, For this article I am going to create a folder with name JavaScript where I will put the jQuery
file jquery-1.7.1.js. 

JqueryFile

Now add the reference of this jQuery file on Triangle.aspx page and write the following JavaScript code snippet inside the <head> tag of web page like the following,
  1. <script src="JavaScript/jquery-1.7.1.js"></script>  
  2.       
  3. <script type="text/javascript">  
  4.         jQuery(document).ready(function () {  
  5.             //On mouseover : change the image  
  6.             jQuery("area[shape='polygon']").mouseover(function () {                 
  7.                 jQuery("img").attr('src', 'Images/HoverImages/TriangleHover.png');  
  8.             });  
  9.   
  10.             // On mouseleave set the default image  
  11.             jQuery("area[shape='polygon']").mouseleave(function () {  
  12.                 jQuery("img").attr('src', 'Images/Triangle.png');  
  13.             });  
  14.         });  
  15.   
  16. </script>  
Now execute / run the Triangle.aspx page to see the output.

Output

Output1 
Similarly, I am going to create another HotSpot for the Figure 2 image (2016), Add another class inside the App_Code with name CustomPolygon.cs.

Code Snippet
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.UI.WebControls;  
  6.   
  7. namespace MyCustomHotSpots  
  8. {  
  9.     public class CustomPolygon : HotSpot  
  10.     {  
  11.         public CustomPolygon()  
  12.         {  
  13.             //Do here  
  14.         }  
  15.   
  16.         //Property  
  17.         public string CoordinateValues  
  18.         {  
  19.             get { return (string)ViewState["value"]; }  
  20.             set { ViewState["value"] = value; }  
  21.         }  
  22.   
  23.         //Overridden Property  
  24.         protected override string MarkupName  
  25.         {  
  26.             get { return "Polygon"; }  
  27.         }  
  28.   
  29.         //Overridden Method  
  30.         public override string GetCoordinates()  
  31.         {  
  32.             return CoordinateValues;  
  33.         }  
  34.     }  
  35. }  
Now add another web page with name "Polygon.aspx" and register the control.
  1. <%@ Register Namespace="MyCustomHotSpots" TagPrefix="myHotSpot" %>  
Now add ImageMap control with Custom Polygon object. 
  1. <form id="form1" runat="server">  
  2.   
  3.     <asp:ImageMap ID="ImageMap1" runat="server" ImageUrl="~/Images/2016.png">  
  4.         <myHotSpot:CustomPolygon AlternateText="Two"  
  5.             CoordinateValues="51,102;52,55;57,47,129,45;137,53;138,100;81,204;137,204;137,226;49,226;49,216;111,102;110,66;77,68;77,100;51,102" />  
  6.   
  7.         <myHotSpot:CustomPolygon AlternateText="Zero"  
  8.             CoordinateValues="218,225;206,217;206,57;217,46;287,46;295,57;295,215;285,226;218,225;231,204;231,68;268,68;268,204;232,204" />  
  9.   
  10.         <myHotSpot:CustomPolygon AlternateText="One"  
  11.             CoordinateValues="375,228;401,228;401,46;378,46;363,96;375,96;375,228" />  
  12.   
  13.         <myHotSpot:CustomPolygon AlternateText="Six"  
  14.             CoordinateValues="473,217;473,56;482,46;549,45;560,57;560,99;535,99;535,68;499,68;499,123;552,124;560,131;560,219;548,226;484,227;473,219;498,205;500,146;535,146;535,204;499,205" />  
  15.     </asp:ImageMap>  
  16.   
  17. /form>  
In the above code snippet I have used four CustomPolygon object for the numbers 2 ,0, 1 and 6.

Now add the following JavaScript code inside the <head> of  Polygon.aspx.
  1. <script src="JavaScript/jquery-1.7.1.js"></script>  
  2. <script type="text/javascript">  
  3.         jQuery(document).ready(function () {  
  4.             //Set Hover image for 2 as highlighted  
  5.             jQuery("area[title='Two']").mouseover(function () {  
  6.                 jQuery("img").attr('src', 'Images/HoverImages/Two.png');  
  7.             });  
  8.   
  9.             //Set Hover image for 0 as highlighted  
  10.             jQuery("area[title='Zero']").mouseover(function () {  
  11.                 jQuery("img").attr('src', 'Images/HoverImages/Zero.png');  
  12.             });  
  13.   
  14.             //Set Hover image for 1 as highlighted  
  15.             jQuery("area[title='One']").mouseover(function () {  
  16.                 jQuery("img").attr('src', 'Images/HoverImages/One.png');  
  17.             });  
  18.   
  19.             //Set Hover image for 6 as highlighted  
  20.             jQuery("area[title='Six']").mouseover(function () {  
  21.                 jQuery("img").attr('src', 'Images/HoverImages/Six.png');  
  22.             });  
  23.   
  24.             //To Set Default Image  
  25.             jQuery("area").mouseleave(function () {  
  26.                 jQuery("img").attr('src', 'Images/2016.png');  
  27.             });  
  28.         });  
  29.   
  30. </script>  
Output for CustomPolygon HotSpot.

Output2For2016 

Summary 

I this article we read about how to create custom HotSpots as well as how to use JavaScript to set some actions over the hotspot areas.
In the previous article I had explained about the HotSpotMode to make the HotSpot area as clickable so if you're not aware about it visit here.


Similar Articles