آموزش و یادگیری تگ area در HTML

در اين بخش از دوره آموزش HTML در آموزش دون، ياد مي‌گيريم تگ <area> چيست و چگونه براي ايجاد نواحي قابل کليک روي تصاوير (Image Map) استفاده مي‌شود. اين تگ همراه با تگ <map> به کار مي‌رود و به شما امکان مي‌دهد بخش‌هاي مختلف يک تصوير را به لينک‌هاي جداگانه تبديل کنيد.

تگ area در HTML چيست؟

تگ <area> براي تعريف بخش‌هايي از يک تصوير تعاملي (Image Map) استفاده مي‌شود. هر تگ <area> يک ناحيه خاص از تصوير را مشخص مي‌کند که با کليک روي آن کاربر به لينک مشخص‌شده هدايت مي‌شود.

اين تگ بايد هميشه درون تگ <map> قرار گيرد و تصوير مربوطه بايد با ويژگي usemap به آن متصل شود.

ساختار کلي

<map name="mapName">
  <area shape="rect" coords="x1,y1,x2,y2" href="link.html" alt="توضيح"/>
</map>

<img src="image.jpg" usemap="#mapName" alt="نمونه تصوير">

در اين ساختار، تگ <area> با ويژگي shape شکل ناحيه را مشخص مي‌کند و ويژگي coords مختصات دقيق آن را تعيين مي‌کند.

مثال‌هاي کاربردي از تگ area

1. ناحيه مستطيلي (rect)

<map name="siteMap">
  <area shape="rect" coords="0,0,200,100" href="https://learndun.ir" alt="آموزش دون">
</map>

<img src="/images/banner.jpg" usemap="#siteMap" alt="بنر آموزش دون">

در اين مثال قسمت مستطيلي بالاي تصوير قابل کليک است و کاربر را به سايت آموزش دون هدايت مي‌کند.

2. ناحيه دايره‌اي (circle)

<map name="circleMap">
  <area shape="circle" coords="150,150,75" href="/blog/1" alt="مقاله HTML">
</map>

<img src="/images/html-logo.png" usemap="#circleMap" alt="لوگوي HTML">

در اين مثال دايره‌اي با مرکز در مختصات 150,150 و شعاع 75 قابل کليک است.

3. ناحيه چندضلعي (poly)

<map name="polyMap">
  <area shape="poly" coords="20,30,60,90,100,20,150,80" href="/blog/2" alt="بخش CSS">
</map>

<img src="/images/web-shape.png" usemap="#polyMap" alt="شکل چندضلعي">

اين نوع براي تعريف نواحي با شکل‌هاي نامنظم کاربرد دارد. مختصات چندضلعي به ترتيب نقاط رأس‌ها مشخص مي‌شوند.

صفات مهم تگ area

نکات و توصيه‌ها

• هميشه از ويژگي alt براي توصيف ناحيه استفاده کنيد تا دسترسي و سئو بهبود يابد.
• براي تصاوير واکنش‌گرا (responsive) از CSS يا JavaScript براي تنظيم مختصات استفاده کنيد.
• تگ <area> هيچ محتواي متني ندارد و فقط با ويژگي‌ها تعريف مي‌شود.
• اگر مي‌خواهيد تصويرتان نقشه‌اي دقيق‌تر داشته باشد، از ابزارهاي توليد Image Map آنلاين استفاده کنيد.

نمونه کامل Image Map با چند ناحيه

<map name="webMap">
  <area shape="rect" coords="0,0,150,100" href="/blog/html" alt="HTML">
  <area shape="circle" coords="250,150,60" href="/blog/css" alt="CSS">
  <area shape="poly" coords="350,200,400,250,420,180" href="/blog/js" alt="JavaScript">
</map>

<img src="/images/web-map.jpg" usemap="#webMap" alt="نقشه تصويري وب">

در اين مثال سه بخش مختلف تصوير به سه لينک متفاوت هدايت مي‌شوند.

استايل‌دهي پيشنهادي

تگ <area> خودش قابل استايل‌دهي نيست، اما مي‌توانيد تصوير مربوط به آن را با CSS مديريت کنيد:

img[usemap] {
  border: 2px solid #eee;
  border-radius: 10px;
  max-width: 100%;
  height: auto;
}

نکته: تگ <area> از تگ‌هاي کمتر شناخته‌شده اما بسيار کاربردي HTML است که در پروژه‌هاي تعاملي و آموزشي مي‌تواند تجربه کاربري جالبي ايجاد کند.

براي يادگيري ساير تگ‌هاي تصويري مانند <img> و <map>، پيشنهاد مي‌کنيم در دوره آموزش HTML مقدماتي تا پيشرفته آموزش دون شرکت کنيد.

براي مشاهده همه آموزش‌هاي HTML، به صفحه اصلي آموزش دون مراجعه کنيد.