Image Map: وقتی یک تصویر چند تا لینک مختلف داره
تا اینجا هر تصویری که دیدیم، یا اصلاً لینک نبود، یا اگه لینک بود، کل تصویر یه مقصد واحد داشت (مثل مثالی که تو درس ۴-۱ دیدیم). اما گاهی نیاز داری یه تصویر واحد، بخشهای مختلفش به لینکهای متفاوتی اشاره کنن؛ مثلاً یه نقشهی جغرافیایی که با کلیک روی هر استان، به صفحهی همون استان بری. برای این کار، HTML یه تکنیک به اسم Image Map داره.
ایدهی کلی Image Map
Image Map از سه بخش تشکیل میشه: خود تصویر، یه تگ map که مناطق کلیکپذیر رو تعریف میکنه، و چند تگ area که هرکدوم یه ناحیهی مشخص از تصویر رو به یه لینک وصل میکنن.
<img src="world-map.jpg" alt="نقشهی جهان با قارههای مشخص" usemap="#worldmap">
<map name="worldmap">
<area shape="rect" coords="10,20,150,100" href="/asia" alt="آسیا">
<area shape="rect" coords="160,20,300,100" href="/europe" alt="اروپا">
</map>ویژگی usemap: اتصال تصویر به نقشه
ویژگی usemap روی تگ img، تصویر رو به یه تگ map مشخص وصل میکنه. مقدارش باید با علامت # شروع بشه و دقیقاً با مقدار ویژگی name تگ map مطابقت داشته باشه:
<img src="world-map.jpg" alt="نقشه جهان" usemap="#worldmap">
<map name="worldmap">
<!-- محتوای نقشه -->
</map>تگ area: تعریف مناطق کلیکپذیر
هر تگ area یه ناحیهی مشخص از تصویر رو به یه لینک تبدیل میکنه. سه ویژگی اصلیش اینا هستن:
shape: شکل هندسی ناحیه (مستطیل، دایره، چندضلعی).coords: مختصات دقیق اون شکل، بر حسب پیکسل.href: مقصد لینک، دقیقاً مثل تگ a.
مقدار shape="rect": ناحیهی مستطیلی
<area shape="rect" coords="10,20,150,100" href="/asia" alt="آسیا">برای مستطیل، مقدار coords شامل چهار عدده: مختصات x و y گوشهی بالا-چپ، و مختصات x و y گوشهی پایین-راست. تو این مثال، مستطیل از نقطهی (۱۰، ۲۰) شروع میشه و تا نقطهی (۱۵۰، ۱۰۰) ادامه پیدا میکنه.
مقدار shape="circle": ناحیهی دایرهای
<area shape="circle" coords="100,100,50" href="/center-point" alt="نقطهی مرکزی">برای دایره، coords شامل سه عدده: مختصات x و y مرکز دایره، و شعاع دایره. تو این مثال، مرکز دایره نقطهی (۱۰۰، ۱۰۰) هست و شعاعش ۵۰ پیکسله.
مقدار shape="poly": ناحیهی چندضلعی
<area shape="poly" coords="50,10,90,90,10,90" href="/triangle-area" alt="ناحیهی مثلثی">برای شکلهای نامنظم و چندضلعی، coords شامل جفت مختصات x و y برای هر رأس شکله؛ تو این مثال سه جفت مختصات داریم که یه مثلث رو تعریف میکنن.
یه مثال کامل و واقعی
<h2>نقشهی سالن همایش</h2>
<img src="hall-map.jpg" alt="نقشهی سالن با بخشهای مختلف نمایشگاه" usemap="#hallmap">
<map name="hallmap">
<area shape="rect" coords="0,0,200,150" href="/booth-a" alt="غرفه A: شرکتهای فناوری">
<area shape="rect" coords="210,0,400,150" href="/booth-b" alt="غرفه B: شرکتهای خدماتی">
<area shape="circle" coords="300,300,80" href="/info-desk" alt="میز اطلاعات">
</map>تو این مثال، یه نقشهی سالن نمایشگاه داریم که کاربر میتونه با کلیک روی هر بخش (غرفه A، غرفه B، یا میز اطلاعات) مستقیم به صفحهی مربوطه بره؛ همهی اینها روی یه فایل تصویر واحده.
نکتهی مهم: alt روی area هم لازمه
درست مثل تگ img، هر area هم باید ویژگی alt داشته باشه؛ این متن برای صفحهخوانها میگه اون ناحیهی خاص، به چه مقصدی اشاره داره، چون کاربر نابینا نمیتونه ببینه کدوم بخش تصویر رو داره لمس میکنه.
چالش امروزی Image Map: طراحی واکنشگرا
یکی از بزرگترین مشکلات Image Map اینه که مختصات coords بر حسب پیکسل ثابت تعریف میشن. یعنی اگه همونطور که تو درس ۵-۴ گفتیم، تصویر تو دستگاههای مختلف (موبایل، تبلت، دسکتاپ) با ابعاد متفاوتی نمایش داده بشه، مختصات ثابت دیگه با محل واقعی اون بخش از تصویر مطابقت نداره و کل نقشه بههم میریزه. به همین دلیل، Image Map امروزه برای طراحیهای واکنشگرا (Responsive) چندان مناسب نیست و کمتر از گذشته استفاده میشه؛ معمولاً بهجاش از تکنیکهای مبتنی بر CSS و SVG (که تو فصل ۹ باهاش آشنا میشیم) استفاده میکنن.
چه زمانی هنوز Image Map مفیده؟
با وجود این محدودیت، Image Map هنوزم برای مواردی مثل نقشههای ثابت با ابعاد مشخص (مثلاً یه نقشهی تزئینی داخل یه مقاله که قرار نیست اندازهاش تغییر کنه) یا پروژههای آموزشی و ساده، گزینهی قابلقبولی هست.
چند اشتباه رایج
- عدم تطابق مقدار usemap با مقدار name تگ map، که باعث میشه نقشه اصلاً به تصویر وصل نشه.
- محاسبهی نادرست مختصات coords، که باعث میشه ناحیهی کلیکپذیر با محل واقعی موردنظر همخوانی نداشته باشه.
- فراموشکردن alt روی تگهای area.
- استفاده از Image Map برای طراحیهای کاملاً واکنشگرا، بدون توجه به مشکل ثابتبودن مختصات.
بهترین روشها
- Image Map رو بیشتر برای تصاویر با ابعاد ثابت و غیرواکنشگرا استفاده کن.
- همیشه مقدار alt رو برای هر area بهطور جداگانه و دقیق بنویس.
- قبل از استفادهی گسترده از این تکنیک، جایگزینهای مدرنتر مثل SVG رو هم در نظر بگیر.
نکتهی سئو
لینکهای داخل یک Image Map از نظر ساختاری مثل لینکهای معمولی عمل میکنند و موتورهای جستجو میتوانند آنها را دنبال کنند؛ با این حال، بهدلیل محدودیت در طراحی واکنشگرا، این روش برای سایتهای مدرن که اولویتشان سازگاری با موبایل است، کمتر توصیه میشود.
نکتهی دسترسیپذیری
ویژگی alt روی هر area برای کاربران صفحهخوان حیاتی است، چون این کاربران قادر به دیدن مرزهای بصری هر ناحیه از تصویر نیستند و تنها از طریق متن alt میفهمند هر بخش به کجا اشاره دارد.
جمعبندی
Image Map با ترکیب تگهای img، map و area، امکان تعریف چند ناحیهی کلیکپذیر مجزا روی یک تصویر واحد را فراهم میکند. این تکنیک بهدلیل وابستگی به مختصات ثابت پیکسلی، در طراحیهای واکنشگرای مدرن با محدودیت مواجه است و بیشتر برای تصاویر با ابعاد ثابت کاربرد دارد.