معرفی کنترل ImageMap :

از کنترل ImageMap در ASP.Net ، برای ایجاد یک عکس با نواحی مختلف قابل کلیک شدن استفاده می شود . به این نواحی تعیین شده بر روی یک عکس HotSpot می گویند ، که می تواند به صورت مستطیل ( RectangleHotSpot ) ، دایره ( CircleHotSpot ) و یا چند ضلعی ( PolygonHotSpot ) باشد .
شما می توانید برای هر HotSpot بر روی عکس برنامه ریزی کنید تا در صورت کلیک کاربر بر روی آن ، کاربر به یک آدرس بره ( ایجاد یک لینک ) و یا یک رویدادی در برنامه رخ بده .
برای مثال به چند ImageMap که تا حالا باهاشون کار کردید و شاید نمی دونستید چطور کار می کنند اشاره می کنیم . مثلا برنامه GoogleMap از همچین سیستمی استفاده می کنه . یا مثلا می توانید نقشه ایران را در یک عکس قرار داده و کاری کنید که کاربر با کلیک بر روی مختصات هر استان روی عکس ، به صفحه مربوط به آن استان هدایت شود .

شکل کلی تعریف و نمایش کنترل ۶ در صفحه های ASP.Net به صورت زیر است . این کد ، کد مثال یک کنترل ۶ در هنگام تعریف کامل در صفحه است :

<asp:ImageMap ID=”Image_Map” runat=”server” ImageUrl=”~/TagsList.jpg” Height=”200px” Width=”200px”>
<asp:RectangleHotSpot Bottom=”100″ Right=”100″ NavigateUrl=”~/HTML/Table.aspx” />
</asp:ImageMap>

کنترل ImageMap چگونه کار می کند :

کنترل ImageMap از دو بخش تشکیل شده است :

یک عکس که تعیین کننده تصویر کنترل است و توسط خاصیت ImageUrl کنترل تعیین می شود . این عکس می تواند از هر نوع فرمت عکسی باشد ( مثل jpg , gif و یا png و … ) و محدودیتی در این زمینه وجود ندارد .
مجموعه ای از HotSpot ها ، که عکس را به نواحی مختلف قابل کلیک شدن تقسیم می نمایند . برای هر HotSpot باید یک مختصات دقیق و یک اندازه تعیین نمایید .
برای مثال اگر HotSpot یک دایره باشد ، مختصات مرکز آن را بر روی عکس به وسیله دو خاصیت x-coordinates و y-coordinates تعیین می کنیم . همچنین اندازه آن که معادل شعاع دایره است را با خاصیت Circle Radius مشخص می کنیم .

در تعیین HotSpot ها برای کنترل باید به دو نکته دقت نمایید :

اول اینکه شما می توانید به هر اندازه و تعداد که بخواهید HotSpot بر روی عکس ایجاد نمایید .
دوم اینکه حتما لازم نیست تمام عکس خود را با HotSpot بپوشانید . می توانید هر بخشی را که نیاز ندارید ، بدون HotSpot رها نمایید .
سوما اینکه اگر بخشی یا همه دو یا چند HotSpot روی یکدیگر قرار بگیرند ، مشکلی به وجود نمی آد . هر HotSpot یک خاصیت به نام Z-index داره که اگر چند تا از HotSpot ها روی هم قرار بگیرند ، HotSpot ی فعال که Z-index اون از همه مقدارش بیشتر باشد .

در آخر هم این نکته را خاطر نشان می کنیم که تمام برنامه های طراحی وب ( از جمله ویژوال استودیو که برای طراحی صفحات ASP.Net است ) ابزاری برای ایجاد HotSpot ها بر روی عکس ها ، به صورت ویژوال دارند و می توانید به وسیله موس و درگ و دراپ کردن ، نواحی مورد نیازتان را به راحتی ایجاد نمایید . سپس خود برنامه کدهای لازم را ایجاد می نماید . بنابراین توضیح بیشتری راجع به طراحی HotSpot ها دیگه نمی دیم .

ایجاد لینک برای HotSpot ها بر روی کنترل ImageMap :

شما می توانید تعیین کنید هنگامی که کاربر بر روی یک HotSpot کلیک می کند چه اتفاقی بیفتد .
می توانید تعیین نمایید که صفحه با کلیک کاربر بر روی هر HotSpot به یک آدرس Url تعیین شده برای آن HotSpot برود . در این حالت شما از هر HotSpot یک لینک در صفحه ایجاد می نمایید .
یا اینکه می توانید تعیین کنید تا پس از کلیک کاربر بر روی یک HotSpot ، صفحه Postback شود . در این حالت می توانید به وسیله خاصیت PostBackValue هر HotSpot یک مقدار منحصر به فرد برای آن HotSpot تعیین نمایید ، تا پس از Postback شدن صفحه ، آن مقدار به صفحه ارسال شده و بر اساس مقدار ارسالی ، دستورات مورد نظر خود را اجرا نمایید .

دو مورد توضیح داده شده را در قالب مثال های عملی به شما نمایش می دهیم .

مثال های عملی کار با ImageMap :

در مثال های عملی زیر سعی می کنیم تا کار با کنترل ImageMap را در عمل به شما نمایش دهیم :

مثال ۱ :   ایجاد لینک به وسیله HotSpot ها:
در مثال اول یک عکس داریم که دارای ۴ بخش مختلف است و هر بخش مربوط به یک تگ HTML . بر روی تصویر ۴ عدد HotSpot  تعیین کرده ایم که در صورت کلیک کاربر بر روی هر کدام از آنها در تصویر ، مرورگر به صفحه آموزش آن تگ در HTML می رود . دقت کنید که آدرس Url مقصد هر HotSpot توسط خاصیت NavigateUrl آن تعیین شده است :

<asp:ImageMap ID=”Image_Map” runat=”server” ImageUrl=”~/TagsList.jpg” Height=”200px” Width=”200px”>
<asp:RectangleHotSpot Bottom=”100″ Right=”100″ NavigateUrl=”~/HTML/Table.aspx” />
<asp:RectangleHotSpot Bottom=”100″ Left=”100″ Right=”200″ NavigateUrl=”~/HTML/base_tag1.aspx” />
<asp:RectangleHotSpot Bottom=”200″ Right=”100″ NavigateUrl=”~/HTML/Link.aspx” />
<asp:RectangleHotSpot Bottom=”200″ Left=”200″ Right=”100″ NavigateUrl=”~/HTML/textformat1.aspx” />
</asp:ImageMap>

 

مثال ۲ :   تعیین یک مقدار منحصر به فرد برای هر HotSpot و برنامه نویسی با آن :
در مثال دوم همان مثال و کد بالا را استفاده نموده ایم . با این تفاوت که اولا برای هر HotSpot توسط خاصیت PostBackValue یک مقدار منحصر به فرد تعیین کرده ایم .
دوما اینکه به جای قرار دادن یک آدرس برای هر HotSpot ، به وسیله خاصیت HotSpotMode کنترل ImageMap و تعیین مقدار آن را بر روی PostBack به برنامه گفته ایم که با کلیک بر روی هر HotSpot صفحه PostBack شود .
پس از PostBack شدن صفحه رویداد کلیک کنترل ImageMap فعال شده و بنا بر HotSpot یی که بر روی آن کلیک شده است ، توسط کنترل Label یک پیام متن به کاربر نمایش داده می شود :

<asp:ImageMap ID=”ImageMap1″ runat=”server” ImageUrl=”~/TagsList.jpg” Height=”200px” Width=”200px”   HotSpotMode=”PostBack”   onclick=”ImageMap1_Click” >
<asp:RectangleHotSpot Bottom=”100″ Right=”100″   PostBackValue=”1″ />
<asp:RectangleHotSpot Bottom=”100″ Left=”100″ Right=”200″   PostBackValue=”2″ />
<asp:RectangleHotSpot Bottom=”200″ Right=”100″   PostBackValue=”3″ />
<asp:RectangleHotSpot Bottom=”200″ Left=”200″ Right=”100″   PostBackValue=”4″ />
</asp:ImageMap><asp:Label ID=”Label1″ runat=”server” />

همچنین کد برنامه در فایل کد صفحه aps.net برای رویداد کلیک کنترل ۶ به صورت زیر است :
کد برنامه

protected void ImageMap1_Click(object sender, ImageMapEventArgs e)
{
switch (e.PostBackValue)
{
case “1”:
lblMassage.Text = “را انتخاب کردید Table شما تگ”;
break;
case “2”:
lblMassage.Text = “را انتخاب کردید Body شما تگ”;
break;
case “3”:
lblMassage.Text = “را انتخاب کردید Link شما تگ”;
break;
case “4”:
lblMassage.Text = “را انتخاب کردید P شما تگ”;
break;
}}