آموزش تگ 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 - تاریخ‌ها (Dates)

JavaScript – تاریخ‌ها (Dates)

آبجکت‌های تاریخ (Date) در جاوااسکریپت آبجکت‌های تاریخ در جاوااسکریپت به ما امکان کار با تاریخ و زمان را می‌دهند....

بیشتر بخوانید
JavaScript - آرایه‌های ثابت (Array Const)

JavaScript – آرایه‌های ثابت (Array Const)

جاوااسکریپت: تعریف آرایه با const در سال 2015، جاوااسکریپت کلمه کلیدی مهمی به نام const را معرفی کرد. این...

بیشتر بخوانید
JavaScript - تکرار آرایه‌ها (Array Iteration)

JavaScript – تکرار آرایه‌ها (Array Iteration)

جاوا اسکریپت: تکرار بر روی آرایه‌ها جاوا اسکریپت روش‌های مختلفی برای تکرار (Iteration) بر روی آرایه‌ها ارائه می‌دهد که...

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

نظرات

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

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