ویژگی shape در <area> HTML
تعریف و استفاده
شکل ویژگی برای تعریف شکل ناحیه استفاده می‌شود.
شکل ویژگی با ویژگی coords با هم استفاده می‌شوند تا اندازه، شکل و موقعیت ناحیه را مشخص کنند.
مثال
از ویژگی shape برای تعریف شکل هر ناحیه در نقشه تصویر استفاده کنید:
<map name="planetmap"> <area shape="rect" coords="0,0,114,576" href="sun.html" alt="Sun"> <area shape="circle" coords="190,230,5" href="mercur.html" alt="Mercury"> <area shape="circle" coords="228,230,5" href="venus.html" alt="Venus"> </map>
نحوه استفاده
<area shape="default|rect|circle|poly">
مقدار ویژگی
| مقدار | توضیحات |
|---|---|
| default | تمام ناحیه را مشخص کنید. |
| rect | ناحیه مستطیلی را تعریف کنید. |
| circle | ناحیه دایره‌ای را تعریف کنید. |
| poly | ناحیه چندگونال را تعریف کنید. |
توضیحات دقیق:
شکل ویژگی برای تعریف شکل ناحیه‌های حساس به ماوس در نقشه تصویر استفاده می‌شود:
- دایره‌ای (circ یا circle)
- دایره‌ای (poly یا polygon)
- مکعب مستطیل (rect یا rectangle)
شکل مقدار ویژگی‌ها می‌تواند تفسیر مرورگر از ویژگی coords را تحت تأثیر قرار دهد. اگر از آن استفاده نشود شکل اگر属性، پس به ارزش پیش‌فرض default استفاده خواهد شد. بر اساس استاندارد، default به معنای پوشش کامل تصویر توسط این منطقه است. در عمل، مرورگرها به طور پیش‌فرض از منطقه مستطیل استفاده می‌کنند و انتظار دارند که 4 مقدار coords را پیدا کنند. اگر شکل مشخص نشده باشد و در برچسب نیز 4 مقدار koordinates شامل نشده باشد، مرورگر کل منطقه را نادیده می‌گیرد.
می‌تواند شناسایی کند شکل مرورگرهایی که ارزش پیش‌فرض属性 را ارائه می‌دهند، می‌توانند یک منطقه شامل تمام نقطه‌های داغ را ارائه دهند تا در صورت کلیک خارج از محدوده‌ای که توسط نقطه‌های داغ تعریف شده است، استفاده شود. به دلیل اینکه منطقه در برچسب <map> بر اساس "اولین ورود، اولین خروج" است، تمامی مناطق باید در انتهای قرار گیرند. در غیر این صورت، منطقه پیش‌فرض تمامی مناطق دیگر موجود در نقشه تصویر را پوشش می‌دهد.
مرورگرها در اجرای نام‌های شکل‌ها هیچ الزام خاصی ندارند. به عنوان مثال، برای مستطیل، Netscape 4 نمی‌تواند "rectangle" را شناسایی کند، اما "rect" را می‌تواند شناسایی کند. به این دلیل، ما توصیه می‌کنیم که از نام‌های کوتاه‌تر استفاده کنید.
پشتیبانی مرورگر
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| پشتیبانی | پشتیبانی | پشتیبانی | پشتیبانی | پشتیبانی |
