از کنترل ImageMap در ASP.Net ، برای ایجاد یک عکس با نواحی مختلف قابل کلیک شدن استفاده می شود . به این نواحی تعیین شده بر روی یک عکس HotSpot می گویند ، که می تواند به صورت مستطیل ( RectangleHotSpot ) ، دایره ( CircleHotSpot ) و یا چند ضلعی ( PolygonHotSpot ) باشد .
شما می توانید برای هر HotSpot بر روی عکس برنامه ریزی کنید تا در صورت کلیک کاربر بر روی آن ، کاربر به یک آدرس بره ( ایجاد یک لینک ) و یا یک رویدادی در برنامه رخ بده .
برای مثال به چند ImageMap که تا حالا باهاشون کار کردید و شاید نمی دونستید چطور کار می کنند اشاره می کنیم . مثلا برنامه GoogleMap از همچین سیستمی استفاده می کنه . یا مثلا می توانید نقشه ایران را در یک عکس قرار داده و کاری کنید که کاربر با کلیک بر روی مختصات هر استان روی عکس ، به صفحه مربوط به آن استان هدایت شود .
کنترل 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 ها بر روی کنترل ImageMap :
شما می توانید تعیین کنید هنگامی که کاربر بر روی یک HotSpot کلیک می کند چه اتفاقی بیفتد .
می توانید تعیین نمایید که صفحه با کلیک کاربر بر روی هر HotSpot به یک آدرس Url تعیین شده برای آن HotSpot برود . در این حالت شما از هر HotSpot یک لینک در صفحه ایجاد می نمایید .
یا اینکه می توانید تعیین کنید تا پس از کلیک کاربر بر روی یک HotSpot ، صفحه Postback شود . در این حالت می توانید به وسیله خاصیت PostBackValue هر HotSpot یک مقدار منحصر به فرد برای آن HotSpot تعیین نمایید ، تا پس از Postback شدن صفحه ، آن مقدار به صفحه ارسال شده و بر اساس مقدار ارسالی ، دستورات مورد نظر خود را اجرا نمایید .
[ چهارشنبه 92/12/7 ] [ 7:54 عصر ] [ مریم زارع احتشامی ]
[ نظر ]