ایجاد HotSpot (نقاط) سفارشی در ASP.NET
چهارشنبه 30 دی 1394در این مقاله چگونگی ایجاد نقاط سفارشی در ASP.NET و همچنین استفاده آن در جاوا اسکریپت برای برجسته و های لایت کردن نقاط در محیط با رویداد mouseover و mouseleave آموزش داده میشود.
در واقع، 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 را با کاما از هم جدا و جفت کنیم.
مثال:
4. قبل از استفاده از نقاط سفارشی ، باید namespace خود را در بالای صفحه یا فایل پیکربندی برای اشتراک کنترل سفارشی در ASP.NET ، ریجستر کنید.
مثال:
5. پس از مرحله 4 ، کانون های سفارشی ما آماده استفاده با کنترل ImageMap خواهد شد. حالا اجازه دهید اجرای عملی در یک وب سایت را مشاهده کنیم.
مراحل ایجاد نقاط سفارشی
مرحله 1: ویژوال استدیو خود را باز کرده و یک وبسایت جدید ایجاد کنید.
مرحله 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
سپس فایل مرجع جی کوئری را در صفحه 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 را برای دیدن خروجی اجرا میکنیم.
خروجی:
به طور مشابه، 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
فایل ضمیمه شده را در مرورگرChrome اجرا کنید
- ASP.net
- 1k بازدید
- 4 تشکر