ایجاد HotSpot (نقاط) سفارشی در ASP.NET

در این مقاله چگونگی ایجاد نقاط سفارشی در ASP.NET و همچنین استفاده آن در جاوا اسکریپت برای برجسته و های لایت کردن نقاط در محیط با رویداد mouseover و mouseleave آموزش داده میشود.

ایجاد HotSpot (نقاط) سفارشی در ASP.NET

در واقع، HotSpot  بخشی از یک تصویر واحد است که برخی اکشن ها را با  کلیک کردن  و یا حرکت دادن اشاره گر ماوس روی نقاط مختلف (area) تولید میکند. HotSpot بخشی از طراحی گرافیک است که برای طراحی صفحات وب پیچیده استفاده می شود.
 می توانیم  تعدادی نقاط مهم در تصویر را با استفاده از شی HotSpotداخل کنترل ImageMap ایجاد کنیم. ASP.NET دارای سه نوع اساسی از نقاط تعریف شده که با برچسب <area> در HTML مطابقت دارد.
RectangleHotSpot .1
2. CircleHotSpot
PolygonHotSpot .3

نقاط سفارشی
همانطور که در پاراگراف قبلی بررسی شد ، ما می توانیم با استفاده از RectangleHotSpot، CircleHotSpot و PolygonHotSpot، مناطق قابل کلیک ایجاد کنیم. در این مقاله  قصد داریم برای تصاویر زیر  نقاط سفارشی ایجاد کنیم.

شکل 1: نقاط در منطقه مثلثی

شکل 2: نقاط در منطقه چند ضلعی (2016)

نکته :

در تصاویر بالا ،نقاط سفارشی را با کلیک در منطقه مثلثی و با کلیک روی شماره های  2016ایجاد می کنیم.

در واقع این سه کلاس مشتق شده ،در ASP.NET  میباشند که از کلاس پایه HotSpot  مشتق میشوند. ما می توانیم انواع اشکال پیچیده ی چند طرفه ، مانند مثلث، octagons، الماس و غیره ایجاد کنیم.

توجه داشته باشید:کنترل ImageMap هر کلاس مشتق شده از HotSpot  را پشتیبانی میکند،  اما  نمی توانیم  چیزی را که خارج از استاندارد HTML  است، انجام دهیم.

نکات مهم
در صورت ایجاد یک HotSpot  سفارشی:
 
1. کلاس ما باید از HotSpot  مشتق شود.
مثال:

Override MarkupName.2

 ما باید  خاصیت MarkupName  را برای بازگشت(return ) نوع شکلی که در حال ایجاد آن هستیم ،(override ) باز نویسی کنیم . می توانیم از دایره، مستطیل یا چند ضلعی به عنوان یک مقدار بازگشتی استفاده کنیم.  اطلاعات مکان در ویژگی 'shape'در تگ <area> می باشد.

مثال:

GetCoordinates() .3

ما نیاز به بازنویسی متد () GetCoordinates برای بازگشت (return) مختصات hotspot (که با کاما از هم جدا میشوند)  داریم .برای چند ضلعی ،باید نقاط X ,Y  را با کاما از هم جدا  و جفت کنیم.

مثال:

Point3

 4.  قبل از استفاده از نقاط سفارشی ، باید namespace خود را در  بالای صفحه یا فایل پیکربندی برای اشتراک کنترل سفارشی در  ASP.NET ، ریجستر کنید.
مثال: 

Point4
5. پس از مرحله 4 ، کانون های سفارشی ما آماده استفاده با کنترل ImageMap خواهد شد. حالا اجازه دهید اجرای عملی در یک وب سایت را مشاهده کنیم.

مراحل ایجاد نقاط سفارشی

مرحله 1: ویژوال استدیو خود را باز کرده و یک وبسایت جدید ایجاد کنید.

NewWebsite

مرحله 2 : پوشه App_Code را به برنامه خود اضافه کنید.

مرحله 3 : یک کلاس در پوشه App_Code اضافه کنید و کلاسی برای سفارشی کردن نقاط ، نام گذاری کنید و از کلاس HotSpot به عنوان کلاس پایه ASP.NET استفاده کنید.

 توجه داشته باشید: ایجاد کلاس در داخل  پوشه ی App_Code اجباری نیست.

در مرحله اول ،میخواهیم یک نقطه سفارشی برای مثلث ایجاد کنیم. تکه کد زیر را مشاهده کنید.

    namespace MyCustomHotSpot  
    {  
        public class TriangleHotSpot : HotSpot  
        {  
          // ...  
        }  
    }  

HotSpotکلاس ارائه شده توسط ASP. NET است.

TrinagelHotSpot نام کلاس کانون سفارشی ما است.

MyCustomHotSpot  نام namespace استفاده شده در این مقاله است.

 توجه :ما نیاز به اضافه کردن namespace  (فضای نامی) ، System.Web.UI.WebControls داریم.

مرحله 4:حالا ما نیاز به تعریف برخی از خواص برای کشیدن مثلث داریم.در تکه کد زیر از X , Y ، برای بدست اوردن ارتفاع و عرض  و یا مجموعه ای از مختصات استفاده میشود.

قطعه کد:

    public TriangleHotSpot()  
    {  
        X = 0;  
        Y = 0;  
        Height = 0;  
        Width = 0;  
    }  
      
    public string CssClass { get; set; }  
      
    public int X  
    {  
        get { return (int)ViewState["X"]; }  
        set { ViewState["X"] = value; }  
    }  
    public int Y  
    {  
        get { return (int)ViewState["Y"]; }  
        set { ViewState["Y"] = value; }  
    }  
      
    public int Height  
    {  
        get { return (int)ViewState["Height"]; }  
        set { ViewState["Height"] = value; }  
    }  
      
    public int Width  
    {  
        get { return (int)ViewState["Width"]; }  
        set { ViewState["Width"] = value; }  
    }  

 

مرحله 5 : ما نیاز به بازنویسی ،خصوصیت 'MarkupName' و متد GetCoordinates() در این کلاس داریم.

قطعه کد

    protected override string MarkupName  
    {  
               get { return "polygon"; }  
    }  
      
    public override string GetCoordinates()  
    {  
        //Top coordinates  
        int topXvalue = X;  
        int topYvalue = Y - Height / 2;  
     
        //Bottom-Left Cordinates  
        int bottomLeftXvalue = X - Width / 2;  
        int bottomLeftYvalue = Y + Height / 2;  
      
       //Bottom-Right coordinates  
       int bottomRightXvalue = X + Width / 2;  
       int bottomRightYvalue = Y + Height / 2;  
      
       var coordinateValues = @"" + topXvalue + "," + topYvalue + "," +  
           bottomLeftXvalue + "," + bottomLeftYvalue + "," +  
           bottomRightXvalue + "," + bottomRightYvalue;  
      
           return coordinateValues;  

کد کامل کلاس نقاط سفارشی"TriangleHotSpot " در زیر موجود است.

    using System;  
    using System.Collections.Generic;  
    using System.Linq;  
    using System.Web;  
      
    using System.Web.UI.WebControls;  
      
    namespace MyCustomHotSpots  
    {  
        public class TriangleHotSpot: HotSpot  
        {  
            public TriangleHotSpot()  
            {  
                X = 0;  
                Y = 0;  
                Height = 0;  
                Width = 0;  
            }  
      
            public string CssClass { get; set; }  
      
            public int X  
            {  
                get { return (int)ViewState["X"]; }  
                set { ViewState["X"] = value; }  
            }  
            public int Y  
            {  
                get { return (int)ViewState["Y"]; }  
                set { ViewState["Y"] = value; }  
            }  
      
            public int Height  
            {  
                get { return (int)ViewState["Height"]; }  
                set { ViewState["Height"] = value; }  
            }  
      
            public int Width  
            {  
                get { return (int)ViewState["Width"]; }  
                set { ViewState["Width"] = value; }  
            }  
      
            protected override string MarkupName  
            {  
                get { return "polygon"; }  
            }  
      
            public override string GetCoordinates()  
            {  
                //Top coordinates  
                int topXvalue = X;  
                int topYvalue = Y - Height / 2;  
      
                //Bottom-Left Cordinates  
                int bottomLeftXvalue = X - Width / 2;  
                int bottomLeftYvalue = Y + Height / 2;  
      
                //Bottom-Right coordinates  
                int bottomRightXvalue = X + Width / 2;  
                int bottomRightYvalue = Y + Height / 2;  
      
                var coordinateValues = @"" + topXvalue + "," + topYvalue + "," +  
                                       bottomLeftXvalue + "," + bottomLeftYvalue + "," +  
                                       bottomRightXvalue + "," + bottomRightYvalue;  
      
                return coordinateValues;  
      
            }  
        }  
    }  

مرحله 6: کانون سفارشی 'TriangleHotSpot' آماده است . و در حال حاظر آن را داخل ImageMap استفاده خواهیم کرد. بنابراین یک صفحه وب  جدید با نام Triangle.aspx اضافه کنید.

مرحله 7: اکنون ما نیاز به ریجستر کردن فضای نامی در نقاط سفارشی TRiangle.aspx داریم . ما میتوانیم آن را در بالای صفحه TRiangle.aspx و یا فایل پیکربندی (web.config) ریجستر کنیم. در این مقاله ما به طور مستقیم در صفحه ریجستر میکنیم.

<%@ Register Namespace="MyCustomHotSpot" TagPrefix="myHotSpot" %>

مرحله 8: کنترل ImageMap  را در صفحه ایجاد میکنیم وبه  تصویر مورد نظر  برای ایجاد نقطه رجوع میکنیم.(در این مقاله میخواهیم از تصویر مثلث استفاده میکنیم.)

Triangle.aspx :

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

نکته:

در این مقاله میخواهیم با استفاده از جاوا اسکریپت وضعیت تصویر  را با  mouseover تغییر دهیم و اگر شما میخواهید از رویداد کلیک استفاده کنید باید HotSpotMode="PostBack   و PostBackValue="مقدار مورد نظر"  قرار دهید.

مرحله 9: فایل جی کوئری را در solution خود اضافه کنید . و یک پوشه بنام JavaScript  که جی کوئری در آن قرار دارد ،اضافه میکنیم .

فایل jquery-1.7.1.js

JqueryFile

سپس  فایل مرجع جی کوئری  را در صفحه Triangle.aspx  اضافه کنید و کد جاوا اسکریپت  زیر را داخل تگ <head>  صفحه وب بنویسید.

    <script src="JavaScript/jquery-1.7.1.js"></script>  
          
    <script type="text/javascript">  
            jQuery(document).ready(function () {  
                //On mouseover : change the image  
                jQuery("area[shape='polygon']").mouseover(function () {                 
                    jQuery("img").attr('src', 'Images/HoverImages/TriangleHover.png');  
                });  
      
                // On mouseleave set the default image  
                jQuery("area[shape='polygon']").mouseleave(function () {  
                    jQuery("img").attr('src', 'Images/Triangle.png');  
                });  
            });  
      
    </script>  

اجرا / صفحه Triangle.aspx  را برای دیدن خروجی اجرا میکنیم.

 خروجی:

Output1

به طور مشابه، HotSpotدیگری برای شکل 2 (2016) ایجاد کنیم ،کلاس دیگری با نام CustomPolygon.cs داخل پوشه ی App_Code  اضافه میکنیم.

 قطعه کد:

    using System;  
    using System.Collections.Generic;  
    using System.Linq;  
    using System.Web;  
    using System.Web.UI.WebControls;  
      
    namespace MyCustomHotSpots  
    {  
        public class CustomPolygon : HotSpot  
        {  
            public CustomPolygon()  
            {  
                //Do here  
            }  
      
            //Property  
            public string CoordinateValues  
            {  
                get { return (string)ViewState["value"]; }  
                set { ViewState["value"] = value; }  
            }  
      
            //Overridden Property  
            protected override string MarkupName  
            {  
                get { return "Polygon"; }  
            }  
      
            //Overridden Method  
            public override string GetCoordinates()  
            {  
                return CoordinateValues;  
            }  
        }  
    }  

 یک صفحه وب با نام "Polygon.aspx" اضافه  و در کنترل ریجستر کنید.

<%@ Register Namespace="MyCustomHotSpots" TagPrefix="myHotSpot" %> 

 کنترل ImageMap را به شی Custom Polygon اضافه کنید.

    <form id="form1" runat="server">  
      
        <asp:ImageMap ID="ImageMap1" runat="server" ImageUrl="~/Images/2016.png">  
            <myHotSpot:CustomPolygon AlternateText="Two"  
                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" />  
      
            <myHotSpot:CustomPolygon AlternateText="Zero"  
                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" />  
      
            <myHotSpot:CustomPolygon AlternateText="One"  
                CoordinateValues="375,228;401,228;401,46;378,46;363,96;375,96;375,228" />  
      
            <myHotSpot:CustomPolygon AlternateText="Six"  
                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" />  
        </asp:ImageMap>  
      
    /form>  

در قطعه کد بالااز چهار شی CustomPolygon برای اعداد 2، 0، 1 و 6 استفاده شده است.

حالا کد جاوا اسکریپت زیر را در داخل قسمت <head> از Polygon.aspx اضافه کنید.

    <script src="JavaScript/jquery-1.7.1.js"></script>  
    <script type="text/javascript">  
            jQuery(document).ready(function () {  
                //Set Hover image for 2 as highlighted  
                jQuery("area[title='Two']").mouseover(function () {  
                    jQuery("img").attr('src', 'Images/HoverImages/Two.png');  
                });  
      
                //Set Hover image for 0 as highlighted  
                jQuery("area[title='Zero']").mouseover(function () {  
                    jQuery("img").attr('src', 'Images/HoverImages/Zero.png');  
                });  
      
                //Set Hover image for 1 as highlighted  
                jQuery("area[title='One']").mouseover(function () {  
                    jQuery("img").attr('src', 'Images/HoverImages/One.png');  
                });  
      
                //Set Hover image for 6 as highlighted  
                jQuery("area[title='Six']").mouseover(function () {  
                    jQuery("img").attr('src', 'Images/HoverImages/Six.png');  
                });  
      
                //To Set Default Image  
                jQuery("area").mouseleave(function () {  
                    jQuery("img").attr('src', 'Images/2016.png');  
                });  
            });  
      
    </script>  

خروجی  CustomPolygon HotSpot

 

Output2For2016

 

فایل ضمیمه شده را در مرورگرChrome  اجرا کنید

فایل های ضمیمه
دانلود نسخه ی PDF این مطلب