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 پشتیبانی می کنند.