آموزش تگ area در HTML

آموزش تگ area در HTML

تگ <area> در HTML برای تعیین ناحیه‌های قابل کلیک در نقشه‌های تصویری (image maps) استفاده می‌شود. این تگ اطلاعات مربوط به هر ناحیه قابل کلیک را تعیین می‌کند که با کلیک کاربر بر روی آن، اقدام مربوط به آن ناحیه صورت می‌گیرد. در این مقاله، به توضیح مفهوم و استفاده از تگ <area> به همراه مثال‌های کاربردی می‌پردازیم.

1. توضیح مفهومی تگ area در HTML

تگ <area> در HTML برای تعیین ناحیه‌های قابل کلیک در نقشه‌های تصویری (image maps) استفاده می‌شود. این تگ اطلاعات مربوط به هر ناحیه قابل کلیک را تعیین می‌کند که با کلیک کاربر بر روی آن، اقدام مربوط به آن ناحیه صورت می‌گیرد.

2. ویژگی‌های تگ area

  • shape: نوع شکل ناحیه قابل کلیک که می‌تواند یکی از مقادیر rect (مستطیل)، circle (دایره) یا poly (چندضلعی) باشد.
  • coords: مختصات نقاط مربوط به ناحیه قابل کلیک. برای مثال، برای یک مستطیل، چهار عدد تعیین کننده مختصات گوشه‌های مستطیل به ترتیب x1, y1, x2, y2 می‌باشد.
  • href: آدرس مقصد که کاربر به آن هدایت می‌شود پس از کلیک بر روی ناحیه.
  • alt: متن جایگزین برای ناحیه قابل کلیک، که در صورت عدم نمایش تصویر مورد استفاده قرار می‌گیرد.

3. نحوه استفاده از تگ area

<map name="image-map">
    <area shape="rect" coords="0,0,50,50" href="page1.html" alt="Area 1">
    <area shape="circle" coords="100,100,50" href="page2.html" alt="Area 2">
    <area shape="poly" coords="150,150,200,200,250,150" href="page3.html" alt="Area 3">
</map>

<img src="image.jpg" usemap="#image-map" alt="Image Map">

4. مثال کاربردی

<map name="nav-map">
    <area shape="rect" coords="0,0,100,50" href="home.html" alt="Home">
    <area shape="rect" coords="100,0,200,50" href="about.html" alt="About">
    <area shape="rect" coords="200,0,300,50" href="contact.html" alt="Contact">
</map>

<img src="navbar.jpg" usemap="#nav-map" alt="Navigation Bar">

5. توضیحات

  • تگ <area> باید داخل یک تگ <map> قرار بگیرد که با usemap در تگ <img> مربوط به نقشه تصویری (image map) مرتبط می‌شود.
  • هر ناحیه قابل کلیک با استفاده از تگ <area> به یک آدرس مقصد (href) هدایت می‌شود و متن جایگزین (alt) نیز برای آن تعیین می‌شود.

تگ <area> در HTML برای تعیین ناحیه‌های قابل کلیک در نقشه‌های تصویری استفاده می‌شود. این تگ اطلاعات مربوط به هر ناحیه قابل کلیک را تعیین می‌کند که با کلیک کاربر بر روی آن، اقدام مربوط به آن ناحیه صورت می‌گیرد.

پست های مرتبط

مطالعه این پست ها رو از دست ندین!
JavaScript - رویدادها (Events)

JavaScript – رویدادها (Events)

رویدادهای HTML رویدادها در HTML، “اتفاقاتی” هستند که برای عناصر HTML رخ می‌دهند. این اتفاقات می‌توانند ناشی از کار...

بیشتر بخوانید
JavaScript - سازنده‌های شیء (Object Constructors)

JavaScript – سازنده‌های شیء (Object Constructors)

ساخت آبجکت با تابع سازنده (Object Constructor Function) برای ساخت چندین آبجکت مشابه، از تابع سازنده استفاده می‌شود. این...

بیشتر بخوانید
JavaScript - نمایش شیء (Object Display)

JavaScript – نمایش شیء (Object Display)

نحوه نمایش آبجکت‌ها در جاوااسکریپت هنگام نمایش یک آبجکت جاوااسکریپت به صورت مستقیم، خروجی معمولاً به شکل [object Object]...

بیشتر بخوانید

نظرات

سوالات و نظراتتون رو با ما به اشتراک بذارید

برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید.