در حال بارگذاری...

نقشه تصویر در HTML

عنصر Picture بین فایل‌های تصویر انتخاب می‌کند. نقشه تصویر یک تصویر را نگه می‌دارد و ناحیه‌های آن را قابل‌کلیک می‌کند — نقطهٔ داغ روی پلان، نمودار، یا منوی گرافیکی ساده. یک img با usemap را با <map> پر از لینک‌های <area> جفت می‌کنید.

نقشه تصویر چیست؟

نقشه تصویر فرمت تصویر جدا نیست. HTMLای است که می‌گوید: «این مستطیل (یا دایره، یا چندضلعی) روی عکس مثل لینک رفتار کند.» کاربر بینا روی ناحیه کلیک می‌کند؛ فناوری کمکی به alt واضح روی هر area نیاز دارد چون ممکن است متن قابل‌دید کنار hotspot نباشد.

پاسخ مستقیم

روی img مقدار usemap="#mapname" بگذارید.
<map name="mapname"> با یک یا چند <area> اضافه کنید.
هر area به shape، coords، href و alt خودش نیاز دارد.
# روی usemap باید با name نقشه یکی باشد (املای دوم نسازید).

مقادیر shape در یک نگاه

📊 مقادیر shape برای area

shape	معنی
rect	مستطیل — coords: چپ، بالا، راست، پایین
circle	دایره — coords: مرکزX، مرکزY، شعاع
poly	چندضلعی — فهرست نقطه‌های x,y به ترتیب

یک نقشه مستطیلی ساده

دو hotspot روی چیدمان میز برای یادگیری سیم‌کشی کافی است: usemap، name هم‌خوان، و مستطیل‌های area با alt صادق.

hotspotهای مستطیلی ساده

html

HTML Code

<img src="images/desk.png" alt="Desk layout" usemap="#deskmap" width="400" height="200">
<map name="deskmap">
<area shape="rect" coords="20,30,120,100" href="lamp.html" alt="Lamp">
<area shape="rect" coords="200,40,320,120" href="monitor.html" alt="Monitor">
</map>

خواندن نمونه

usemap="#deskmap" روی تصویر به نقشهٔ نام‌گذاری‌شدهٔ deskmap اشاره می‌کند
هر area یک لینک است: href مقصد است، alt hotspot را نام می‌برد
coords برای rect چپ، بالا، راست، پایین در شبکهٔ پیکسل تصویر است
alt خود تصویر («Desk layout») کل گرافیک را توصیف می‌کند؛ altهای area ناحیه‌ها را نام می‌برند

مختصات چگونه کار می‌کند؟

مختصات بر حسب پیکسل CSS تصویر به‌صورت چیده‌شده برای نقشه اندازه‌گیری می‌شوند. اگر روی img مقدار width و height می‌گذارید، هنگام یادگیری coords را با آن اندازهٔ نمایش سازگار نگه دارید. اعداد غلط hotspotهایی می‌سازند که از اشیاء رسم‌شده جا می‌مانند — شکست بی‌صدای رایج.

عادت دسترس‌پذیری

هر area قابل‌کلیک به alt معنی‌دار نیاز دارد. hotspotها را بی‌نام نگذارید. نقشه‌هایی را ترجیح دهید که هدف هر ناحیه روشن باشد. اگر طراحی رفتار واکنش‌گرای پیچیده می‌خواهد، بسیاری تیم‌ها به‌جای نقشهٔ پیکسل شکننده به SVG با لینک یا دکمهٔ جدا سوییچ می‌کنند.

نقشه کجا کمک می‌کند — و کجا نه

نقشه برای یک نمودار با چند ناحیهٔ پایدار کمک می‌کند. وقتی تصویر آزادانه در breakpointهای زیاد مقیاس می‌شود سخت می‌شود، چون coords کلاسیک خودش را خودکار بازنویسی نمی‌کند. برای UI واکنش‌گرای مدرن، تصویر لینک‌شدهٔ جدا، چیدمان CSS، یا SVG را در نظر بگیرید. با این حال دانستن نقشه تصویر وقتی صفحات قدیمی یا دموی آموزشی ساده می‌بینید کمک می‌کند.

circle و poly (یادداشت سریع)

circle از مرکز و شعاع استفاده می‌کند. poly جفت‌های x,y دور یک شکل آزاد را فهرست می‌کند. تا وقتی جفت usemap / name طبیعی نشده با rect شروع کنید، بعد روی گرافیک تمرین شکل‌های دیگر را بیازمایید.

تمرین در ویرایشگر

یک تصویر عریض ساده با دو ناحیهٔ واضح به کار ببرید.
یک map با دو area از نوع rect بسازید که به دو صفحهٔ تمرین کوچک لینک می‌شوند.
usemap="#name" را با دقت با map name="name" جور کنید (از جمله #).
هر ناحیه را کلیک کنید و ناوبری را تأیید کنید.
یک‌بار تطابق نام را خراب کنید، hotspotهای مرده را ببینید، بعد درستش کنید.
هر areaای که alt آن فقط «link» می‌گوید را بهتر کنید.

اشتباهات رایج

عدم تطابق usemap / name (فراموش # روی usemap یا تغییر نام فقط یک طرف)
نبود alt روی هر area
coords که با اندازهٔ واقعی تصویر یا موقعیت اشیاء یکی نیست
تکیه بر نقشه تصویر برای چیدمان واکنش‌گرای خیلی سیال بدون برنامه
گذاشتن تنها توصیف روی img و بی‌برچسب گذاشتن ناحیه‌ها

خلاصه

نقشه تصویر img + usemap + map + area را سیم‌کشی می‌کند
شکل‌ها شامل rect، circle و poly هستند
هر area به href، alt، shape و coords نیاز دارد
نام‌ها را جور و coords را صادق نگه دارید
برای UI واکنش‌گرای پیچیده جایگزین‌های مدرن را در نظر بگیرید — هنوز نقشه را برای میراث و نمودار ساده یاد بگیرید

🧠 دانش خود را بیازمایید

آماده شروع

دانش خود را بیازمایید

خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید

❓

سوالات

🎯

70%

برای قبولی

♾️

∞

زمان

🔄

∞

تلاش‌ها

📝 دستورالعمل‌ها

هر سوال را با دقت بخوانید
بهترین پاسخ را برای هر سوال انتخاب کنید
می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
پیشرفت شما در بالا نمایش داده می‌شود

زبان