HTML <area> Tag
تگ <area> در HTML مناطق خاصی از عکس را که مورد نظر ما می باشد را مشخص کرده و با پیوند لینکی به آن کاربر را به صفحه ای برای دریافت اطلاعات بیشتر در مورد آن قسمت (area) منتقل می کند.
مثال:
<body>
<p>بر روی هر یک از گربه سانان روبرو کلیک کنید:</p>
<img
src="http://my-project.ir/img/feliformia.jpg" usemap="#animals" alt="تصویر حیوانات" />
<map name="animals">
<area
shape="rect"
coords="76,49,196,102" target="_blank"
href="https://bit.ly/2EA9sbq" alt="تصویر گربه وحشی" title="گربه وحشی"/>
<area
shape="poly"
coords="51,173 ,81,121,218,135,226,256" target="_blank"
href="https://bit.ly/39GJKNL" alt="تصویر ببر" title="ببر"/>
<area
shape="poly"
coords="26,238,44,196,222,282,223,362,69,348" target="_blank"
href="https://bit.ly/3hOJUWj" alt="تصویر شیر" title="شیر"/>
</map>
</body>
نتیجه:
مشاهده و ویرایش کد در حالت تمام صفحه
همانطور که میبینیم تگ <area> همیشه داخل عنصر <map> قرار دارد.
با استفاده از مقدار یکسان در صفت usemap در عنصر <img> و صفت name در عنصر <map> این عناصر را بهم متصل می شوند.
صفت ها (َAttributes)
alt
این صفت متن توضیحی را برای قسمت area مورد نظر مشخص می کند.
coords
مختصات area را مشخص می کند. این مختصات در سه شکل که توسط صفت shape مشخص می شود به صورت زیر عمل می کند:
rect:
برای تعیین مختصات چهار ضلعی بکار می رود. برای دو جفتx,y: چپ، بالا، راست، پایین.circle:
برای تعیین مختصات دایره بکار می رود. مقادیرx,y,r:x,yبرای تعیین مخصات مرکز دایره.rبرای تعیین شعاع دایره بکار می رود.poly:
برای تعیین مختصات چند ضلعی بکار می رود. این مختصات با جفت هایx,yبا مختصاتx1,y1,x2,y2,x3,y3و الی آخر مشخص می شوند.
download
فایلی که آدرس آن توسط صفت href مشخص شده است را دانلود می کند.
shape
نوع شکل قسمت area را مشخص می کند. مقادیر این صفت عبارتند از:
rect:
چهارضلعیcircle:
دایرهpoly:
چند ضلعی
target
مشخص می کند لینک بعد از کلیک به چه نحو باز شود:
blank_
: لینک مورد نظر را بعد از کلیک در یک پنجره جدید باز می کند.
پشتیبانی مرورگرها
تمام مرورگرها از این تگ HTML پشتیبانی می کنند.
