جلسه چهل و هفتم: آموزش کامل تگ map در HTML
به دوره حرفهای آموزشHTML در آوای وب خوش اومدی! اینجا قراره تگ map رو مثل یه حرفهای یاد بگیری! فرض کن یه تصویر داری که میخوای بخشهای مختلفش رو قابل کلیک کنی، مثلا نقشه یه کشور که با کلیک روی هر استان بری به صفحه مربوطش، یا تصویر یه محصول که با کلیک روی هر بخشش، جزئیاتش رو ببینی. اینجاست که تگ <map> میاد وسط و کارت رو راه میندازه.
آنچه در این مقاله میخوانید:
این تگ یکی از ابزارهای خفن HTML برای ساخت تصاویر تعاملی (Image Maps) ـه که هم تجربه کاربری رو بهتر میکنه و هم اگه درست استفاده بشه، میتونه به سئوی سایت کمک کنه. تو این مقاله، از صفر تا صد تگ <map> رو با مثالهای باحال، نکات خفن، و ترفندهای سئو و دسترسیپذیری یاد میگیری تا بتونی تصاویر تعاملیات رو بترکونی. آمادهای؟ بزن بریم!
🏷️ تگ map چیه و چرا مهمه؟
تگ <map> یه عنصر HTML هست که برای ایجاد نقشههای تصویری (Image Maps) استفاده میشه. این تگ به تو اجازه میده بخشهای مختلف یه تصویر رو به لینکهای متفاوت وصل کنی، طوری که کاربر با کلیک روی هر بخش به یه صفحه یا محتوای خاص هدایت بشه. همراه با تگ <area>، میتونی نواحی قابل کلیک رو با اشکال مختلف (مستطیل، دایره، یا چندضلعی) تعریف کنی. چرا مهمه؟ چون:
- تجربه کاربری (UX) تعاملی: تصاویر تعاملی کاربر رو بیشتر درگیر سایت میکنن و حس پویایی به وبسایتت میدن.
- انعطافپذیری: میتونی هر بخش از تصویر رو به محتوای دلخواه لینک کنی، از صفحات وب تا توضیحات محصول.
- سئو غیرمستقیم: با بهبود تعامل کاربر و کاهش نرخ پرش (Bounce Rate)، به رتبهبندی سایتت کمک میکنه.
- دسترسیپذیری: با تنظیمات درست (مثل
altوtitle)، برای کاربران با نیازهای ویژه هم بهینهست. - پشتیبانی گسترده: همه مرورگرهای مدرن مثل Chrome، Firefox، و Safari ازش پشتیبانی میکنن.
مثلاً، اگه بخوای یه نقشه جغرافیایی بذاری که هر شهرش به یه صفحه اطلاعاتی لینک بشه یا یه تصویر محصول که بخشهاش توضیحات جداگونه دارن، <map> بهترین ابز
🧱 ساختار تگ map : ساده اما قدرتمند!
تگ <map> یه تگ جفتیه که با تگ <area> کار میکنه تا نواحی قابل کلیک رو روی تصویر تعریف کنه. برای اتصال به تصویر، از تگ <img> با اتریبیوت usemap استفاده میشه. ساختار پایهایش اینه:
<img src="image.jpg" usemap="#myMap" alt="نقشه تعاملی">
<map name="myMap">
<area shape="rect" coords="34,44,270,350" href="page1.html" alt="صفحه 1">
<area shape="circle" coords="337,300,44" href="page2.html" alt="صفحه 2">
</map>✨ اجزای اصلی:
<map>: نقشه رو تعریف میکنه و باnameیه شناسه منحصربهفرد میگیره.<area>: نواحی قابل کلیک رو با شکل، مختصات، و لینک مشخص میکنه.<img>: تصویری که نقشه بهش وصل میشه، باusemap="#name"به<map>ارجاع میده.
📌 نکته: مقدار usemap باید با name تگ <map> مطابقت داشته باشه و همیشه با # شروع بشه.
💡 ویژگیهای کلیدی: اتریبیوتها و تگ area
تگ <map> و <area> چند اتریبیوت کلیدی دارن که کنترل زیادی بهت میدن:
🧩 اتریبیوتهای تگ <map>
name: یه نام منحصربهفرد برای نقشه (اجباریه):
🧩 اتریبیوتهای تگ <area>
shape: شکل ناحیه رو مشخص میکنه:rect: مستطیلcircle: دایرهpoly: چندضلعی
coords: مختصات ناحیه رو تعریف میکنه:- برای
rect:x1,y1,x2,y2(گوشههای بالا-چپ و پایین-راست). - برای
circle:x,y,r(مرکز و شعاع). - برای
poly:x1,y1,x2,y2,...(نقاط چندضلعی).
- برای
href: آدرس لینک مقصد.alt: متن جایگزین برای دسترسیپذیری.title: توضیحی که موقع هاور کردن نمایش داده میشه.target: نحوه باز شدن لینک (مثل_blankبرای تب جدید).
✏️ مثال کامل:
<area shape="rect" coords="10,10,200,100" href="page1.html" alt="بخش 1" title="برو به بخش 1" target="_blank">💡 کاربردهای تگ map: کجا بترکونیمش؟
تگ <map> برای این موارد غوغا میکنه:
- نقشههای جغرافیایی: مثل نقشه کشور که هر منطقه به اطلاعات خاص لینک میشه.
- تصاویر محصولات: نمایش بخشهای مختلف یه محصول با توضیحات جداگونه.
- گرافیکهای آموزشی: تصاویر تعاملی برای درسها یا راهنماها.
- طراحیهای خلاقانه: ایجاد منوهای تصویری یا گالریهای تعاملی.
- تورهای مجازی: تصاویر 360 درجه با نقاط قابل کلیک.
📝 مثالهای عملی: تگ <map> رو تو عمل ببین!
بیا چند نمونه باحال ببینیم که نشون میدن <map> چطور کار میکنه:
1. نقشه تصویری ساده:
<img src="diagram.jpg" usemap="#diagramMap" alt="دیاگرام تعاملی">
<map name="diagramMap">
<area shape="rect" coords="10,10,200,100" href="section1.html" alt="بخش 1" title="بخش اول">
<area shape="circle" coords="300,150,50" href="section2.html" alt="بخش 2" title="بخش دوم">
</map>این کد دو ناحیه قابل کلیک روی یه تصویر تعریف میکنه: یه مستطیل و یه دایره.
2. نقشه جغرافیایی:
<img src="iran.jpg" usemap="#iranMap" alt="نقشه ایران">
<map name="iranMap">
<area shape="poly" coords="100,50,150,100,120,150" href="tehran.html" alt="تهران" title="اطلاعات تهران">
<area shape="poly" coords="200,200,250,250,220,300" href="isfahan.html" alt="اصفهان" title="اطلاعات اصفهان">
</map>این کد یه نقشه ایران با نواحی قابل کلیک برای تهران و اصفهان ایجاد میکنه.
3. تصویر محصول تعاملی:
<img src="phone.jpg" usemap="#phoneMap" alt="تصویر گوشی">
<map name="phoneMap">
<area shape="rect" coords="50,50,150,200" href="screen.html" alt="صفحه نمایش" title="مشخصات صفحه نمایش">
<area shape="circle" coords="200,300,30" href="camera.html" alt="دوربین" title="مشخصات دوربین">
</map>این کد بخشهای مختلف یه گوشی (مثل صفحه و دوربین) رو به صفحات جداگونه لینک میکنه.
🚀 سئو و دسترسیپذیری: گوگل و کاربرات رو خوشحال کن!
تگ <map> میتونه برای سئو و دسترسیپذیری خیلی مفید باشه، بهشرطی که درست استفاده بشه:
- سرعت بارگذاری: تصویر رو فشرده کن و از فرمتهای مدرن مثل WebP استفاده کن تا سرعت سایت بالا بره.
- متن جایگزین (alt): برای هر
<area>یهaltواضح بنویس تا صفحهخوانها بتونن محتوا رو توضیح بدن: - عنوانهای توصیفی (title): از
titleبرای دادن اطلاعات بیشتر به کاربر استفاده کن. - کلمات کلیدی: اطراف تصویر و
<map>رو با توضیحات متنی و کلمات کلیدی مرتبط پر کن (مثل “نقشه تعاملی ایران”). - دسترسیپذیری برای کیبورد: مطمئن شو که نواحی با کیبورد قابل دسترسیان (
tabindexوaccesskey).
🆚 مقایسه با روشهای مشابه: <map> یا جایگزینها؟
برای تصاویر تعاملی، روشهای دیگهای هم وجود داره. بیایم مقایسه کنیم:
| تگ | کاربرد | فرقش با <map> |
|---|---|---|
<img> | نشون دادن تصویر | فقط عکس رو نشون میده، بخشبندی نداره. |
<map> | ایجاد بخشهای قابل کلیک رو تصویر | خودش عکس رو نشون نمیده، با <img> کار میکنه. |
<svg> | ساخت گرافیک برداری و تعاملی | پیشرفتهتر ولی سختتر از <map>، نیاز به دانش گرافیک برداری داره. |
✨ کی از <map> استفاده کنیم؟ وقتی میخوای یه تصویر ساده با نواحی قابل کلیک داشته باشی و نمیخوای کدت خیلی پیچیده بشه.
📝 پروژه عملی ساخت نقشه تعاملی فروشگاه
🎯 هدف: یه عکس از فروشگاهت بذار و با <map> بخشهای مختلفش (مثل قفسه محصولات) رو قابل کلیک کن که توضیحات محصول نشون داده بشه.
📌 مراحل:
- عکس فروشگاه رو انتخاب کن.
- بخشها رو با مختصات مشخص کن.
- لینک هر بخش رو به صفحه محصول بده.
- با جاوااسکریپت پاپآپ جزئیات رو بیار.
📌 در ضمن، یادت نره اگه مبتدی هستی، کدات رو تو W3C Validator چک کنی و مطمئن شی درست نوشتی.
🏁 جمعبندی
تگ <map> یه ابزار قوی برای ساخت تصاویر تعاملی تو HTML ـه. اگه درست و با رعایت اصول سئو و دسترسیپذیری استفاده بشه، هم تجربه کاربری رو بهتر میکنه هم رتبه سایت رو بالا میبره. حالا تگ <map> رو مثل یه حرفهای بلدی! وقتشه دست به کار شی! با <map> میتونی تصاویر تعاملی جذاب تو وب خلق کنی، تجربه کاربرات رو بهتر کنی، و گوگل رو عاشق سایتت کنی! پس معطل نکن! یه <map> بنویس و نشون بده چقدر خفنی! ما تا آخر خط باهاتیم!
💬 ایدههات رو فریاد بزن!
نظرت راجب تگ <map> چیه؟ دلت میخواد چه چیزی به این آموزش اضافه کنیم؟ سوالی تو ذهنت مونده؟ تو نظرات برامون بگو! تیم حرفهای پشتیبانی با جون و دل جوابت رو میده!
شهرام نجفی
شهرام نجفی — بیش از ۱۵ سال طراحی و توسعهٔ وب بهصورت فریلنس. قالب اختصاصی آوای وب را از صفر نوشتهام. مطالب این سایت را بر پایهٔ مستندات رسمی MDN و WHATWG مینویسم و قبل از انتشار در مرورگرهای واقعی تست میکنم. نمونهکارهایم در shahramnajafi.com است.