آموزش تگ 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 برای تعیین ناحیه‌های قابل کلیک در نقشه‌های تصویری استفاده می‌شود. این تگ اطلاعات مربوط به هر ناحیه قابل کلیک را تعیین می‌کند که با کلیک کاربر بر روی آن، اقدام مربوط به آن ناحیه صورت می‌گیرد.

پست های مرتبط

مطالعه این پست ها رو از دست ندین!
Python - محدود کردن داده (MongoDB Limit)

Python – محدود کردن داده (MongoDB Limit)

Python MongoDB محدود کردن نتایج برای محدود کردن نتایج در MongoDB، از متد limit() استفاده می‌کنیم. متد limit() یک...

بیشتر بخوانید
Python - بروزرسانی (MongoDB Update)

Python – بروزرسانی (MongoDB Update)

به‌روزرسانی یک رکورد برای به‌روزرسانی یک رکورد یا سند در MongoDB، از متد update_one() استفاده می‌کنیم. پارامتر اول متد...

بیشتر بخوانید
Python - حذف کالکشن (MongoDB Drop Collection)

Python – حذف کالکشن (MongoDB Drop Collection)

حذف کالکشن شما می‌توانید یک جدول یا کالکشن در MongoDB را با استفاده از متد drop() حذف کنید. مثالحذف...

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

نظرات

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

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