ایجاد یک عکس با نواحی قابل کلیک شدن کنترل ImageMap

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

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

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

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

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

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

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

1. اول اینکه شما می توانید به هر اندازه و تعداد که بخواهید HotSpot بر روی عکس ایجاد نمایید .
2. دوم اینکه حتما لازم نیست تمام عکس خود را با HotSpot بپوشانید . می توانید هر بخشی را که نیاز ندارید ، بدون HotSpot رها نمایید .
3. سوما اینکه اگر بخشی یا همه دو یا چند 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 را در عمل به شما نمایش دهیم :

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

Example
<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>	کد
	خروجی

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

Example
<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 برای رویداد کلیک کنترل 6 به صورت زیر است :

     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;
        }

    }