تماس با ما

موبایل: 2565 038 0912

دفتر تهران: 2565 2842 021

دفتر گرگان: 2565 3233 017


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

Syntax     <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 را در عمل به شما نمایش دهیم :
مثال 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>


خروجی

کنترل 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" />


خروجی

کنترل ImageMap - قسمت هفدهم

همچنین کد برنامه در فایل کد صفحه 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;
        }
 
    }


     منبع خبر         


سفارش طراحی سایت

سفارش طراحی سایت

google
yahoo
alexa
ebook
Baidu.com
Wikipedia
Blogger.com
Windows Live
Amazon.com
eBay
Bing
Ask
استانداری گلستان
f shdj, sefaresh, sefaresh .net, sefaresh.net, sthva, sthva nhj kj, sthva.kj, stthva.kj, xvhpd, آیفون, استفاده, اندروید, اپل, اپلیکیشن, اینترنت, باتری, بازار, بازی, دستگاه, دوربین, سامسونگ, سفارش, سفارش دات نت, سفارش دات نت sefaresh.net, سفارش.نت, سیستم, طراح وب, طراحي وب سايت, طراحی, طراحی وب سایت, فناوری, مایکروسافت, موبایل, هوشمند, کاربران, کمپانی, گلکسی, گوشی, گوشی هوشمند, گوگل

نمایش تمامی تگ ها
بسته ویژه مدارس مدارس
بسته ویژه پزشکان پزشکان
بسته ویژه مهندسین مهندسین