وقتی دربارهی طراحی وب صحبت میکنیم، معمولاً به تگ هایی مثل <div>، <img> یا <a> فکر میکنیم؛ اما HTML تگ های دیگری هم دارد که شاید کمتر دیده شوند ولی نقش مهمی در ساخت تجربههای تعاملی دارند. یکی از این تگ ها، تگ area است که معمولاً همراه با تگ map برای ساخت نقشه های تصویری (Image Map) استفاده میشود.
با استفاده از این قابلیت میتوان بخشهای مختلف یک تصویر را به لینکهای جداگانه تبدیل کرد؛ مثلاً در یک نقشهی کشورها، با کلیک روی هر استان به صفحهی مخصوص آن استان برویم. در ادامهی این مقاله، بهصورت گام به گام یاد میگیریم که تگ area چیست، چطور کار میکند و چه ویژگی هایی دارد تا بتوانی در پروژههای واقعی از آن استفاده کنی.
تگ area در HTML چیست؟
تگ area در HTML برای تعریف بخشهای قابل کلیک (hotspot) در داخل یک تصویر استفاده میشود. این تگ در واقع بدون تگ map معنا ندارد، چون درون تگ map قرار میگیرد تا مشخص کند هر بخش از تصویر به کدام لینک هدایت شود. به زبان ساده، وقتی بخواهی بخشی از تصویر را مثل دکمهای قابل کلیک بسازی (مثلاً فقط چرخ یک ماشین یا گوشهی خاصی از نقشه)، از تگ <area> استفاده میکنی.
ساختار کلی آن به شکل زیر است:
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" usemap="#worldMap" alt="World Map" title="تگ area در HTML چیست و چه کاربردی دارد؟ آموزش کامل همراه با مثال 2" data-lazy-src="http://world-map.jpg"><noscript><img decoding="async" src="world-map.jpg" usemap="#worldMap" alt="World Map" title="تگ area در HTML چیست و چه کاربردی دارد؟ آموزش کامل همراه با مثال 2"></noscript>
<map name="worldMap">
<area shape="rect" coords="50,50,150,150" href="asia.html" alt="Asia">
<area shape="circle" coords="300,150,40" href="europe.html" alt="Europe">
</map>
در این مثال:
- usemap=”#worldMap” تصویر را به نقشهای با نام worldMap متصل کرده است.
- هر <area> محدودهای از تصویر را تعریف میکند که با کلیک روی آن، کاربر به لینک مورد نظر هدایت میشود.
بنابراین، تگ area یکی از اجزای کلیدی نقشه های تصویری HTML است و به کمک آن میتوان تصاویر را تعاملیتر و هدفمندتر کرد.
» برای مشاهده جامع ترین مرجع تگ های HTML، پیشنهاد میکنم مقالهی «تگ های HTML» رو مطالعه کنید.
نحوه استفاده از تگ area در HTML
برای اینکه از تگ area در HTML استفاده کنیم، باید آن را در کنار تگ map به کار ببریم. تگ map به مرورگر میگه که تصویری وجود داره که بخشهای مختلفش میتونن لینکدار باشن و تگ area مشخص میکنه هر بخش از اون تصویر چه محدودهای داره و به کجا لینک میشه.
ساختار کلی استفاده از این دو تگ به شکل زیره:
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" usemap="#planetmap" alt="Planets" title="تگ area در HTML چیست و چه کاربردی دارد؟ آموزش کامل همراه با مثال 4" data-lazy-src="http://planets.jpg"><noscript><img decoding="async" src="planets.jpg" usemap="#planetmap" alt="Planets" title="تگ area در HTML چیست و چه کاربردی دارد؟ آموزش کامل همراه با مثال 4"></noscript>
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" href="sun.html" alt="Sun">
<area shape="circle" coords="90,58,3" href="mercury.html" alt="Mercury">
<area shape="circle" coords="124,58,8" href="venus.html" alt="Venus">
</map>
در این مثال:
- تصویر اصلی توسط اتریبیوت usemap به نقشهای با نام planetmap متصل شده.
- داخل map سه تگ area وجود داره که هر کدوم مختصات و لینک خودش رو دارن.
- ویژگی shape نوع ناحیه رو مشخص میکنه (دایره، مستطیل یا چندضلعی).
- ویژگی coords مختصات اون ناحیه روی تصویره.
این کد باعث میشه کاربر با کلیک روی بخشهای مشخصشده از تصویر به صفحات مرتبط بره.
» نکته: برای اینکه نقشه تصویری درست عمل کنه، باید نام map با مقدار ویژگی usemap یکی باشه (بههمراه علامت # در usemap).
اتریبیوت های تگ area
تگ area هم مانند اکثر عناصر HTML از اتریبیوت های عمومی (global attributes) پشتیبانی میکند و هم مجموعهای از اتریبیوت های مخصوص خودش که برای تعریف ناحیهی قابل کلیک در تصویر لازماند. در ادامه ابتدا یک جدول خلاصه میبینی، سپس توضیح جامع و مثالها.
جدول اتریبیوت های مهم area
| اتریبیوت | مقادیر / نوع | ضروری | توضیح |
|---|---|---|---|
| href | URL | اختیاری | آدرس مقصد لینک برای آن ناحیه. |
| alt | متن | لازم | متن جایگزین برای دسترسپذیری و مرورگرهای بدون تصویر. |
| shape | rect | circle | poly | default | اختیاری | شکل ناحیه؛ تعیین میکند coords چگونه تفسیر شود. |
| coords | لیست اعداد (CSS pixels) | بستگی به shape | مختصات ناحیه — بسته به شکل (rect: x1,y1,x2,y2؛ circle: x,y,r؛ poly: x1,y1,x2,y2,...)؛ قواعد دقیق در مشخصه وجود دارد. |
| target | _self, _blank, ... یا نام فریم | اختیاری | مشخص میکند لینک در کجا باز شود. توجه: target="_blank" معمولاً همزمان رفتار rel="noopener" را القا میکند. |
| download | نام فایل یا خالی | اختیاری | مرورگر را راهنمایی میکند تا محتوا را دانلود کند نه نمایش دهد. |
| ping | لیست URLها | اختیاری | آدرسهایی که هنگام دنبال شدن لینک، مرورگر POST به آنها میفرستد (پیگیری). |
| referrerpolicy | no-referrer, origin, ... | اختیاری | سیاست ارسال هدر Referer هنگام دنبال کردن لینک. |
| rel | لیستی از link types | اختیاری | رابطهی مقصد نسبت به لینک (مانند nofollow, noopener و ...). |
| (همه) global attributes | id, class, title, data-*, ... | — | اتریبیوتهای عمومی HTML که روی <area> هم قابل استفادهاند. |
توضیح دقیق هر اتریبیوت و نکات کاربردی
اتریبیوت href
- توضیح: مقصد لینک برای ناحیهی تعریفشده. اگر حذف شود، آن <area> لینکدار نخواهد بود (صرفاً ناحیهای تعریفشده بدون رفتن به آدرسی).
- کاربرد عملی: معمولاً آدرس داخلی یا خارجی صفحهای است که با کلیک روی آن ناحیه باز میشود.
- نکات سئو/عملی: برای لینکهای خارجی از rel=”noopener noreferrer” و target=”_blank” همراه با rel مناسب استفاده کن.
اتریبیوت alt
- توضیح: متن جایگزین که باید کارکرد ناحیه را برای کاربر توضیح دهد.
- قانون: اگر href وجود داشته باشد، alt باید قرار داده شود. این برای کاربران صفحه خوان و کاربرانی که تصاویر را غیرفعال کردهاند حیاتی است.
- توصیه: متن alt کوتاه، واضح و هدفمحور باشد. از عبارتهای کلی و غیرمعنیدار خودداری کن.
اتریبیوت shape
- مقادیر: rect، circle، poly، default.
- توضیح: مشخص میکند مرورگر چطور مقادیر coords را تفسیر کند. default یعنی بقیهٔ تصویر (فراتر از نواحی تعریفشده) را در برمیگیرد.
اتریبیوت coords
- قالبها:
- rect: x1,y1,x2,y2
- circle: x,y,radius (مختصات مرکز و شعاع).
- poly: x1,y1,x2,y2,…,xn,yn (نقاط چندضلعی — حداقل 3 نقطه / 6 عدد).
- واحد: اعداد بر حسب پیکسلهای CSS هستند.
- قواعد رسمی: برای poly حداقل 6 عدد لازم است و تعداد اعداد باید زوج باشد.
در حالت پیشفرض (default) نباید از coords استفاده شود. این قواعد در مشخصهی رسمی HTML آمده است.
اتریبیوت target
- توضیح: تعیین میکند مقصد در کدام browsing context باز شود (_self, _blank, _parent, _top, یا نام فریم).
- نکته امنیتی/عملی: زمانی که از _blank استفاده میکنی، مرورگرها معمولاً rel=”noopener” را پیشنهاد / اعمال میکنند تا window.opener نداشته باشی.
اتریبیوت download
- توضیح: وقتی وجود دارد، مرورگر میتواند به جای نمایش محتوا، آن را بهعنوان فایل دانلود کند. مقدار اختیاری است.
- کاربرد: مناسب برای لینکهایی که به فایلهای قابل دانلود اشاره دارند (PDF، ZIP و …).
اتریبیوت ping
- توضیح: فهرستی از URLها که مرورگر هنگام دنبال شدن لینک در پسزمینه بهصورت POST با بدنهی PING اطلاع میدهد (معمولاً برای track کردن).
- حریم خصوصی: مراقب باش—استفاده از ping میتواند پیامدهای ردیابی و حریم خصوصی داشته باشد.
referrerpolicy، rel و دیگر اتریبیوت های لینک
- referrerpolicy: مشخص میکند چه مقدار از هدر Referer ارسال شود. برای لینکهایی که به منابع خارجی میروند مفید است.
- rel: مانند تگ anchor رابطهای بین منبع و مقصد را شرح میدهد (مثلاً nofollow, noopener, ugc و غیره). تنها زمانی معنادار است که href وجود داشته باشد.
اتریبیوت های عمومی (global attributes)
<area> از id, class, title, data-* و سایر اتریبیوتهای عمومی پشتیبانی میکند؛ بنابراین میتوان آن را با CSS / JS هدفگذاری کرد (مثلاً برای افزودن tooltip، تعاملهای جاوااسکریپت و …).
مثال: rect و circle و poly
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" usemap="#world" alt="World map" title="تگ area در HTML چیست و چه کاربردی دارد؟ آموزش کامل همراه با مثال 5" data-lazy-src="http://world-map.jpg"><noscript><img decoding="async" src="world-map.jpg" usemap="#world" alt="World map" title="تگ area در HTML چیست و چه کاربردی دارد؟ آموزش کامل همراه با مثال 5"></noscript>
<map name="world">
<area shape="rect" coords="10,10,110,60" href="/asia" alt="Asia">
<area shape="circle" coords="200,80,30" href="/europe" alt="Europe" target="_blank" rel="noopener">
<area shape="poly" coords="300,10,350,60,320,120,280,90" href="/africa" alt="Africa" download="africa-info.pdf">
</map>
در این مثال: alt برای هر area مشخص شده، target و rel برای باز کردن در تب جدید بصورت امن استفاده شده، و نشان داده شد که download برای اشاره به فایل قابل دانلود بهکار میرود.
نکات دسترس پذیری مربوط به اتریبیوتها
- همیشه alt را جدی بگیر: وقتی ناحیهای لینکدار است، alt باید معنی ناحیه و مقصد را مشخص کند تا کاربران صفحهخوان بدانند چه اتفاقی میافتد. عدم وجود alt باعث تجربه ضعیف برای کاربران کمتوانایی میشود.
- ترتیب منطقی و ترتیب تب: چون <area> عملاً نقش لینک را دارد، ترتیب قرارگیری آنها در DOM روی ترتیب تب و تعامل صفحهخوانها تأثیر میگذارد — پس ترتیب منطقی و معنایی تعریف کن.
- جایگزین متنی کلی: اگر تصویرِ کامل نقشِ منطقی دارد، فراتر از alt نواحی، بهتر است داخل صفحه متن جایگزین یا لینکهای متنی هم برای کاربران غیرتصویری وجود داشته باشد.
- آزمون با صفحهخوان و کیبورد: حتماً تست کن که نواحی با کیبورد قابل دسترس هستند و صفحهخوانها alt را منطقی اعلام میکنند.
🔸 برای مشاهده جامع ترین مرجع اتریبیوت های HTML، پیشنهاد میکنم مقالهی «اتریبیوت های HTML» رو مطالعه کنید.
ساخت نقشه تصویر با تگ area
گاهی در طراحی وب نیاز داریم بخشهای مختلف یک تصویر را به لینکهای متفاوتی وصل کنیم. برای این کار از تگ map و تگ area بهصورت ترکیبی استفاده میکنیم.
در واقع area بخشهای کلیکپذیر داخل نقشه تصویری را مشخص میکند.
مثال ساده از image map
در مثال زیر سه ناحیه روی یک تصویر مشخص شدهاند: یک مستطیل، یک دایره و یک چندضلعی. هرکدام از این نواحی کاربر را به لینک متفاوتی هدایت میکنند:
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" usemap="#worldmap" alt="World Map" title="تگ area در HTML چیست و چه کاربردی دارد؟ آموزش کامل همراه با مثال 7" data-lazy-src="http://world-map.jpg"><noscript><img decoding="async" src="world-map.jpg" usemap="#worldmap" alt="World Map" title="تگ area در HTML چیست و چه کاربردی دارد؟ آموزش کامل همراه با مثال 7"></noscript>
<map name="worldmap">
<area shape="rect" coords="34,44,270,350" href="https://example.com/america" alt="America">
<area shape="circle" coords="377,300,75" href="https://example.com/europe" alt="Europe">
<area shape="poly" coords="130,136,180,218,200,170" href="https://example.com/asia" alt="Asia">
</map>
توضیح مختصر:
- ویژگی usemap در تگ <img> نام نقشهای را مشخص میکند که با تصویر مرتبط است.
- هر <area> محدودهای خاص از تصویر را به لینک مشخصی متصل میکند.
- مختصات (coords) بر اساس پیکسل از گوشه بالا سمت چپ تصویر محاسبه میشوند.
💡 نکته کاربردی:
اگر ابعاد تصویر در طراحی ریسپانسیو تغییر کند، مختصات تگ area دیگر درست عمل نمیکنند. برای حل این مشکل میتوان از جاوااسکریپت یا کتابخانههایی مثل ImageMapResizer.js استفاده کرد تا مختصات بهصورت خودکار با اندازه تصویر هماهنگ شوند.
تفاوت بین تگ area و تگ map
تگ های map و area معمولاً با هم استفاده میشن، اما هرکدوم نقش خاصی در ساخت نقشه تصویری دارن. در واقع، تگ map ظرف (Container) اصلیه و تگ area بخشهای قابل کلیک داخل آن را تعریف میکنه.
تفاوت ساختاری بین تگ area و تگ map
| مقدار | تگ map | تگ area |
|---|---|---|
| نقش اصلی | نگهدارندهی مجموعهای از نواحی کلیکپذیر | تعریف ناحیهی کلیکپذیر داخل نقشه |
| محل قرارگیری | بعد از تصویر (همسطح با تگ <img>) | داخل تگ <map> |
| ویژگی مهم | name (برای اتصال با usemap در تگ img) | shape, coords, href, alt |
| تعداد مجاز در صفحه | میتواند چندین map داشته باشیم | هر map میتواند شامل چندین area باشد |
| نمایش بصری | در صفحه نمایش داده نمیشود | فقط محدودهی قابل کلیک در تصویر را مشخص میکند |
| ضرورت وجود | بدون area فایده ندارد | بدون map بیاثر است |
مثال ساده
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" usemap="#planetmap" alt="Planets" title="تگ area در HTML چیست و چه کاربردی دارد؟ آموزش کامل همراه با مثال 4" data-lazy-src="http://planets.jpg"><noscript><img decoding="async" src="planets.jpg" usemap="#planetmap" alt="Planets" title="تگ area در HTML چیست و چه کاربردی دارد؟ آموزش کامل همراه با مثال 4"></noscript>
<map name="planetmap">
<area shape="circle" coords="180,140,60" href="https://example.com/earth" alt="Earth">
<area shape="circle" coords="330,140,50" href="https://example.com/mars" alt="Mars">
</map>
در این مثال:
- <map> نقشهای با نام planetmap تعریف کرده.
- هر <area> یکی از سیارات را به لینک جداگانهای وصل میکند.
- در نهایت، تصویر با usemap=”#planetmap” به این نقشه متصل میشود.
💡 نکته:
اگر area ها خارج از <map> قرار بگیرند، مرورگر آنها را نادیده میگیرد. همچنین اگر usemap در تصویر تنظیم نشده باشد، ارتباط بین تصویر و نقشه از بین میرود.
کاربرد تگ area در HTML
تگ area معمولاً به همراه تگ map استفاده میشود تا بخشهای مختلف یک تصویر را به لینکهای جداگانه تبدیل کند. این ویژگی باعث میشود کاربر بتواند روی بخشهای خاصی از تصویر کلیک کند و به مقصد دلخواه هدایت شود.
مثلاً فرض کنید تصویری از نقشه ایران دارید و میخواهید با کلیک روی هر استان، صفحهی مربوط به آن باز شود.
نکات مهم در استفاده از تگ area
تگ area در HTML یک ابزار قدرتمند برای ایجاد ناحیه های کلیک پذیر روی تصاویر است، اما برای استفاده صحیح و بهینه باید به چند نکته کلیدی توجه کرد:
1. رعایت نسبت تصویر و مختصات
- مختصات (coords) بر اساس پیکسلهای تصویر اصلی محاسبه میشوند.
- اگر تصویر در طراحی ریسپانسیو تغییر اندازه دهد، نواحی کلیکپذیر دقیقاً در جای خود قرار نمیگیرند.
- راهحل: استفاده از کتابخانههای جاوااسکریپت مانند ImageMapResizer تا مختصات بهصورت خودکار با تغییر اندازه تصویر هماهنگ شوند.
2. دسترس پذیری (Accessibility)
- همیشه alt را برای هر ناحیه لینکدار قرار دهید تا کاربران با صفحهخوان بتوانند متوجه مقصد شوند.
- ترتیب منطقی قرارگیری <area>ها در DOM باعث میشود کاربران کیبورد و صفحهخوان، نواحی را به ترتیب منطقی پیمایش کنند.
- پیشنهاد: در صورت امکان، لینکهای متنی جایگزین هم برای تصویر ارائه شود.
3. نکات SEO
- هر ناحیهی تگ area که لینک دارد، به عنوان لینک داخلی یا خارجی معتبر محسوب میشود.
- متن alt باید کوتاه، گویا و شامل کلمه کلیدی مرتبط با مقصد باشد.
- از rel=”nofollow” یا rel=”noopener noreferrer” برای لینکهای خارجی استفاده کنید تا SEO و امنیت صفحه حفظ شود.
» بیشتر بخوانید: سئو چیست؟
4. مشکلات ریسپانسیو
- در طراحی واکنشگرا، تصویر ممکن است ابعاد متفاوتی داشته باشد.
- بدون تنظیم مختصات پویا، کلیکها در نقاط نادرست اتفاق میافتد.
- راهحل: استفاده از CSS برای مقیاسدهی تصویر و JS برای مقیاسدهی مختصات.
5. رعایت اصول استاندارد
- هر <area> باید داخل یک <map> قرار گیرد.
- اگر href وجود دارد، حتماً alt اضافه شود.
- از شکلهای معتبر (rect, circle, poly) و مختصات صحیح استفاده کنید.
خطاهای رایج در استفاده از تگ area در HTML
استفاده نادرست از تگ area میتواند باعث مشکلات دسترس پذیری، تجربه کاربری و عملکرد لینکها شود. در ادامه، مهمترین اشتباهات رایج را بررسی میکنیم:
1. اشتباه در مختصات (coords)
- تعیین نادرست مختصات باعث میشود ناحیه کلیکپذیر خارج از محدوده موردنظر قرار گیرد یا اصلاً عمل نکند.
- نکته: همیشه مختصات را بر اساس پیکسلهای تصویر اصلی تنظیم کنید و در صورت ریسپانسیو بودن، از JS یا کتابخانههای تطبیق مختصات استفاده کنید.
2. فراموشی alt
- عدم تعریف متن جایگزین (alt) برای نواحی لینکدار، تجربه کاربران صفحهخوان و موتورهای جستجو را کاهش میدهد.
- نتیجه: هم مشکلات دسترس پذیری ایجاد میشود و هم ممکن است اثر منفی روی سئو داشته باشد.
3. عدم ارتباط صحیح بین map و area
- <area> بدون <map> یا <img> بدون usemap بیاثر خواهد بود.
- نکته: نام <map> و مقدار usemap باید دقیقاً یکسان باشند (توجه به بزرگ و کوچک بودن حروف).
4. استفاده نادرست از shape و coords
- استفاده از شکل اشتباه (مثلاً poly با کمتر از 3 نقطه) یا مختصات نادرست باعث عملکرد غیرمنتظره میشود.
- نکته: برای هر نوع shape قالب مختص خود را رعایت کنید:
- rect → x1,y1,x2,y2
- circle → x_center,y_center,radius
- poly → حداقل 3 نقطه و تعداد اعداد زوج
5. عدم توجه به ریسپانسیو بودن
- اگر تصویر در صفحه تغییر سایز دهد، نقاط کلیکپذیر درست عمل نمیکنند.
- راهکار: کتابخانههایی مانند ImageMapResizer.js یا CSS/JS مناسب برای مقیاسدهی.
جایگزین های مدرن برای تگ area
با پیشرفت وب، برخی روشهای جایگزین برای ایجاد نواحی کلیکپذیر روی تصاویر استفاده میشوند:
SVG
- تعریف شکلهای برداری و لینکدار داخل تصویر.
- ریسپانسیو و دقیق در تمام اندازهها.
CSS + JavaScript
- استفاده از موقعیتیابی و اسکریپت برای ایجاد نواحی تعاملی.
- کنترل کامل روی انیمیشن و تعاملات مدرن.
مزیت:
این روشها بهینهتر، قابل کنترل و ریسپانسیو هستند و تجربه کاربری بهتری ارائه میدهند.
پشتیبانی مرورگرها از تگ area
تگ area در HTML بهطور گسترده توسط مرورگرها پشتیبانی میشود، اما بهتر است همیشه از سازگاری مطمئن باشیم تا تجربه کاربری بهینه باشد.
| مرورگر | نسخه | پشتیبانی | توضیح |
|---|---|---|---|
| Chrome | تمام نسخههای مدرن | ✅ کامل | پشتیبانی کامل از map و area |
| Firefox | تمام نسخههای مدرن | ✅ کامل | بدون مشکل، رفتار استاندارد |
| Edge | تمام نسخههای مدرن | ✅ کامل | مشابه Chrome، بدون باگ |
| Safari | 10+ | ✅ کامل | فقط در نسخههای قدیمی (<10) برخی مختصات چندضلعی مشکل داشت |
| Opera | تمام نسخههای مدرن | ✅ کامل | پشتیبانی استاندارد، هماهنگ با Chromium |
| IE | 9+ | ✅ محدود | در نسخههای قدیمی (<9) پشتیبانی ناقص از shape="poly" |
جمع بندی
تگ area در HTML ابزار قدرتمندی برای ایجاد ناحیه های کلیک پذیر روی تصاویر است که با ترکیب با تگ map تجربه کاربری و تعامل با تصویر را افزایش میدهد.
مرور نکات کلیدی:
- <area> بخشهای قابل کلیک تصویر را مشخص میکند و بدون <map> یا usemap تصویر کار نمیکند.
- مختصات (coords) و شکل (shape) باید دقیق تعیین شوند تا ناحیه درست عمل کند.
- رعایت دسترسپذیری با alt و توجه به SEO اهمیت بالایی دارد.
- جایگزینهای مدرن مانند SVG یا CSS + JS تجربه ریسپانسیو و تعاملی بهتری ارائه میدهند.
- پشتیبانی مرورگرها گسترده است، اما در پروژههای مدرن بهتر است روشهای جایگزین را هم در نظر گرفت.
اگر هدف شما طراحی نقشههای ساده و لینکدار روی تصاویر است، استفاده از تگ <area> مناسب است. اما برای تعاملات پیچیده، انیمیشنها یا طراحی ریسپانسیو، استفاده از SVG یا CSS/JS توصیه میشود.
سوالات متداول
بله، تگ area در HTML5 پشتیبانی میشود و برای ایجاد نواحی کلیکپذیر روی تصاویر کاربرد دارد.
- دایره (circle): coords=”x_center,y_center,radius”
- چندضلعی (poly): coords=”x1,y1,x2,y2,x3,y3,…” حداقل ۳ نقطه نیاز دارد
تگ <area> برای تعریف ناحیههای کلیکپذیر روی تصاویر استفاده میشود و همیشه همراه با تگ <map> به کار میرود. این تگ امکان هدایت کاربر به لینکهای مختلف از یک تصویر را فراهم میکند.
تگ <map> یک ظرف نگهدارنده است که مجموعهای از نواحی کلیکپذیر را در خود جای میدهد، در حالی که تگ area هر ناحیه کلیکپذیر را تعریف میکند. بدون <map> یا usemap در تصویر، <area> بیاثر خواهد بود.
اتریبیوت های مهم شامل href (لینک مقصد)، alt (متن جایگزین)، shape (شکل ناحیه) و coords (مختصات ناحیه) هستند. رعایت این ویژگیها باعث کارکرد صحیح، دسترسپذیری و SEO بهتر میشود.
با استفاده از کتابخانههای JS مانند ImageMapResizer.js یا با تنظیم تصویر از طریق CSS و محاسبه مجدد مختصات در JS، میتوان نواحی کلیکپذیر را با تغییر اندازه تصویر هماهنگ کرد.
- اشتباه در تعیین مختصات (coords)
- فراموش کردن ویژگی alt
- عدم ارتباط صحیح بین <map> و <area>
- استفاده نادرست از shape و مختصات ناصحیح
- عدم توجه به طراحی ریسپانسیو
- استفاده از SVG برای نواحی برداری و لینکدار
- استفاده از CSS و JS برای ایجاد نواحی تعاملی و انیمیشنی این روشها دقیقتر، ریسپانسیو و قابل کنترل هستند.
تگ <area> تقریباً در همه مرورگرهای مدرن (Chrome, Firefox, Safari, Edge, Opera) پشتیبانی کامل دارد. در نسخههای قدیمی IE (<9) برخی قابلیتها مانند shape=”poly” محدود هستند.
❌ بهطور مستقیم نمیتوان. برای ویدیو یا SVG باید از روشهای مدرن مانند SVG interactive elements یا CSS/JS استفاده شود.
