عکس محدوده ای Map , Area

تگ map در HTML برای تعریف یک نقشه تصویری سمت سرویس گیرنده یا client-side image map استفاده می شود. این قابلیت به شما اجازه می دهد ناحیه های مختلف یک تصویر را به نقاط تعاملی تبدیل کنید؛ به این ترتیب کاربر با کلیک روی هر بخش، به صفحه یا مقصد مشخصی هدایت می شود.

در یک تصویر معمولی، کل تصویر می تواند به یک پیوند تبدیل شود؛ اما با نقشه تصویری، بخش های متفاوت تصویر مقصدهای جداگانه دارند. برای نمونه، در تصویر منظومه شمسی می توان ناحیه خورشید، عطارد و زهره را به پیوندهای مستقل متصل کرد. بنابراین، تصویر فقط یک عنصر تزئینی نیست و می تواند نقش یک رابط کاربری قابل استفاده را نیز داشته باشد.

برای ساخت این قابلیت، تگ تگ map را همراه با یک یا چند تگ تگ area به کار می بریم. تگ map محدوده نقشه را مشخص می کند و هر تگ area شکل، مختصات و مقصد یکی از ناحیه های قابل کلیک را تعیین می کند.

برای آنکه مرورگر بداند کدام نقشه به تصویر مربوط است، ویژگی usemap را به تگ img اضافه می کنیم. مقدار این ویژگی باید با نام نقشه در تگ map تطابق داشته باشد و در ابتدای نام نقشه علامت # قرار بگیرد. در مقابل، ویژگی name در تگ map همان شناسه ای است که تصویر به آن ارجاع می دهد.

برای مثال، اگر نام نقشه planetmap باشد، مقدار usemap باید #planetmap نوشته شود. تفاوت کوچک در املای نام یا حذف علامت # می تواند باعث شود ناحیه های تعریف شده با تصویر ارتباط پیدا نکنند. پس از نوشتن کد، صفحه را در مرورگر باز کنید و هر بخش را جداگانه آزمایش کنید.

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
  <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
  <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>

در این نمونه، ویژگی usemap تصویر را به نقشه ای به نام planetmap متصل می کند. سه تگ area نیز ناحیه خورشید، عطارد و زهره را تعریف می کنند و هر کدام با ویژگی href به یک مقصد جداگانه می روند.

ویژگی shape مشخص می کند محدوده قابل کلیک چه هندسه ای داشته باشد. مقدار rect برای مستطیل، circle برای دایره و poly برای چندضلعی به کار می رود. اگر محدوده مورد نظر شکل ساده ای ندارد، چندضلعی امکان تعیین گوشه های بیشتری را فراهم می کند.

انتخاب شکل باید با خود تصویر هماهنگ باشد. برای نمونه، اگر در یک نقشه آموزشی، استان یا کشور نامنظمی را به پیوند تبدیل می کنید، استفاده از چندضلعی معمولاً دقیق تر از قرار دادن یک مستطیل بزرگ روی آن است. مستطیل بزرگ ممکن است بخش های کناری تصویر را نیز قابل کلیک کند و تجربه کاربر را مختل سازد.

ویژگی coords مختصات ناحیه قابل کلیک را مشخص می کند. ترتیب و تعداد مقادیر این ویژگی به شکل انتخاب شده وابسته است. برای مستطیل، مختصات گوشه بالا و چپ و گوشه پایین و راست وارد می شود؛ برای دایره، مختصات مرکز و شعاع نوشته می شود؛ و برای چندضلعی، مختصات نقاط مرزی به ترتیب قرار می گیرند.

مختصات از گوشه بالا و چپ تصویر محاسبه می شوند و اندازه تصویر در تعیین آن ها اهمیت دارد. اگر تصویر اصلی را با ابعاد متفاوت نمایش دهید، ممکن است محدوده های کلیک با شکل های داخل تصویر هم راستا نباشند. برای مثال، اگر یک نقشه با ابعاد طراحی شده کوچک تر یا بزرگ تر نمایش داده شود، ناحیه انتخاب شده ممکن است روی نقطه نادرستی قرار بگیرد.

بهتر است پس از هر تغییر در تصویر، محدوده های کلیک را دوباره بررسی کنید. برای پیدا کردن مختصات می توانید از ابزارهای ویرایش تصویر یا ابزارهای تولید image map کمک بگیرید؛ با این حال، نتیجه تولیدشده را حتماً در صفحه واقعی آزمایش کنید. بررسی با ماوس به تنهایی کافی نیست و نمایش در صفحه های باریک را نیز باید در نظر بگیرید.

برای هر ناحیه، ویژگی alt را با عبارتی روشن و مرتبط با مقصد پر کنید. این متن می تواند در شرایطی که تصویر نمایش داده نمی شود یا کاربر از فناوری های کمکی استفاده می کند، اطلاعات مفیدی ارائه دهد. عبارت هایی مانند «مشاهده اطلاعات عطارد» از متن های مبهمی مانند «اینجا کلیک کنید» گویاتر هستند.

ویژگی href نیز باید به صفحه ای برسد که با محتوای ناحیه ارتباط دارد. اگر بخشی از تصویر به معرفی یک محصول، مکان یا موضوع آموزشی اشاره می کند، مقصد پیوند باید همان اطلاعات را توضیح دهد. پیوندهای آزمایشی یا مقصدهای نامعتبر را پیش از انتشار اصلاح کنید تا کاربر پس از کلیک با صفحه خطا روبه رو نشود.

نقشه تصویری زمانی مفید است که همه کاربران بتوانند مفهوم ناحیه ها و مقصد آن ها را درک کنند. متن alt باید به اندازه کافی توصیفی باشد و نام گذاری مقصدها نیز با محتوای پیوند هماهنگ بماند. همچنین، اگر اطلاعات مهمی فقط با رنگ یا جایگاه در تصویر منتقل می شود، یک راه جایگزین متنی در همان صفحه فراهم کنید.

یکی از چالش های استفاده از مختصات ثابت این است که با تغییر اندازه تصویر، ناحیه های تعریف شده ممکن است با تصویر هماهنگ نمانند. این مسئله در طراحی واکنش گرا اهمیت بیشتری دارد. اگر تصویر در تلفن همراه کوچک می شود، روی صفحه های مختلف آزمایش کنید و مطمئن شوید محدوده های کلیک همچنان دقیق و قابل استفاده هستند.

مهم ترین مزیت تگ map این است که می توان روی بخش های گوناگون یک تصویر، پیوندهای جداگانه قرار داد. در نتیجه لازم نیست برای هر مقصد، تصویر مستقلی بسازید یا تصویر را به چند فایل تقسیم کنید. این روش برای نقشه های آموزشی، نمودارهای راهنما و تصویرهایی که چند بخش قابل انتخاب دارند کاربرد دارد.

برای مثال، یک تصویر آموزشی می تواند چند عنصر را نمایش دهد و هر عنصر کاربر را به توضیح اختصاصی خودش ببرد. این ساختار، تصویر را به بخشی تعاملی از محتوا تبدیل می کند و در صورت طراحی درست، مسیر دسترسی به اطلاعات را کوتاه تر می سازد.

برای ساخت یک image map ساده، به ابزار یا کتابخانه جداگانه نیاز ندارید و می توانید از عناصر استاندارد HTML استفاده کنید. این سادگی برای نمونه های آموزشی و صفحه هایی که تعداد ناحیه های محدودی دارند، مناسب است. همچنین، کد ساختار قابل خواندنی دارد و توسعه دهنده می تواند ارتباط هر ناحیه با مقصد آن را بررسی کند.

مختصات ناحیه ها به ابعاد تصویر وابسته است و مدیریت آن ها در طراحی واکنش گرا می تواند دشوار باشد. با تغییر اندازه یا نسبت تصویر، محدوده های تعاملی ممکن است دقیقاً روی بخش مورد نظر قرار نگیرند. به همین دلیل، تصویر و ناحیه های آن باید در اندازه های گوناگون بررسی شوند.

همچنین، اگر تعداد ناحیه ها زیاد باشد، نگهداری مختصات و اصلاح پیوندها می تواند زمان بر شود. در چنین شرایطی، ممکن است رابطی متنی، فهرست پیوندها یا روش دیگری برای دسترسی به همان اطلاعات، تجربه بهتری فراهم کند. تگ map ابزار مفیدی است، اما برای هر نوع صفحه و هر تعداد نقطه تعاملی بهترین انتخاب نیست.

تگ map از ویژگی های عمومی در HTML پشتیبانی می کند. این ویژگی ها به شما کمک می کنند اطلاعات و مشخصه های رایج HTML را به عنصر اضافه کنید. تگ map همچنین از ویژگی های رویدادها در HTML نیز پشتیبانی می کند؛ با این حال، انتخاب و استفاده از رویدادها باید متناسب با نیاز صفحه و اصول دسترس پذیری باشد.

برای استفاده درست از نقشه تصویری، در کنار تعریف ویژگی ها به ساختار معنایی صفحه نیز توجه کنید. متن جایگزین تصویر، نام گذاری ناحیه ها و مقصد پیوندها همگی در درک بهتر محتوا نقش دارند. اگر هدف شما ایجاد یک وب سایت کاربردی است، طراحی رابط و دسترسی آسان به اطلاعات را هم زمان در نظر بگیرید. برای آشنایی با خدمات طراحی سایت می توانید این پیوند را ببینید.

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

اگر تصویر شما چند بخش تعاملی محدود دارد، استفاده از image map می تواند راه حل مناسبی باشد. اما برای نقشه های پیچیده یا رابط هایی که در اندازه های مختلف تغییر زیادی می کنند، دسترسی پذیری، نگهداری و واکنش گرایی را با دقت بسنجید و در صورت نیاز راهکار جایگزین در نظر بگیرید.