HTML Tag
دربارهی تگ <area> در HTML به فارسی آمده است:
تگ HTML <area>
تگ <area> در HTML برای تعریف یک ناحیهی قابل کلیک داخل تگ <map> استفاده میشود. این تگها برای ساخت نقشههای تصویری (Image Maps) کاربرد دارند، یعنی تصاویری که بخشهای مختلف آن قابل کلیک و لینکدهی به صفحات متفاوت هستند.
نکات مهم دربارهی تگ <area>:
-
مکان استفاده: فقط داخل تگ
<map> -
هدف: تعریف نواحی قابل کلیک روی تصویر
-
انواع شکلها:
-
rect(مستطیل) -
circle(دایره) -
poly(چندضلعی)
-
ساختار کلی:
<img src=“example.jpg” usemap=“#mapname” alt=“تصویر نمونه”>
<map name=“mapname”>
<area shape=“rect” coords=“34,44,270,350” href=“https://example.com/page1” alt=“ناحیه مستطیلی”>
<area shape=“circle” coords=”337,300,44″ href=“https://example.com/page2” alt=“ناحیه دایرهای”>
<area shape=“poly” coords=“45,45,60,60,70,40” href=“https://example.com/page3” alt=“ناحیه چندضلعی”>
</map>
ویژگیهای مهم تگ <area>
| ویژگی (Attribute) | توضیح |
|---|---|
shape |
شکل ناحیه قابل کلیک (rect، circle، poly) |
coords |
مختصات ناحیه (زوجهای مختصات بر اساس شکل) |
href |
آدرس صفحهای که با کلیک روی ناحیه باز میشود |
alt |
متن جایگزین برای ناحیه (برای دسترسی بهتر) |
target |
تعیین مکان باز شدن لینک (مثلاً _blank برای باز شدن در تب جدید) |
rel |
رابطهی بین صفحه فعلی و لینک داده شده |
download |
مشخص میکند که لینک به صورت دانلود باز شود |
نحوه کارکرد coords برای اشکال مختلف:
-
rect:
"x1,y1,x2,y2"(مختصات گوشهی بالا چپ و پایین راست) -
circle:
"x_center,y_center,radius"(مرکز دایره و شعاع) -
poly:
"x1,y1,x2,y2,x3,y3,..."(مختصات نقاط چندضلعی)
مثال: نقشه تصویری ساده
<img src=“planets.jpg” usemap=“#planetmap” alt=“سیارهها”>
<map name=“planetmap”>
<area shape=“rect” coords=“0,0,82,126” href=“mercury.html” alt=“سیاره عطارد”>
<area shape=“circle” coords=“90,58,30” href=“venus.html” alt=“سیاره زهره”>
<area shape=“poly” coords=“124,58,150,10,180,40” href=“earth.html” alt=“سیاره زمین”>
</map>
دیدگاهتان را بنویسید