آموزش تگ area در HTML

رتبه: 5 ار 1 رای SSSSS
تگ area
نویسنده: میلاد حیدری زمان مطالعه 3 دقیقه
Banner Image

تگ <area> نواحی قابل کلیک یا فعال دارای لینک را در داخل نقشه=تصویر (image-map) تعریف می کند. اگر بر روی این نواحی کلیک کنید، برخی رویدادها مانند باز کردن تصویر جدید، URL جدید و … اجرا می شود. این تگ همیشه با عنصر <map> استفاده می شود.

در داخل نقشه تصویر، می توان با استفاده از چندین عنصر <area> در یک عنصر <map> نواحی مختلف را به مکان های مختلف لینک داد.

عنصر <area> همراه با ویژگی های (ضروری) shape و coords تعریف می شود. صفت shape شکل هندسی ناحیه را مشخص می کند؛ مانند: مستطیل، دایره، مربع و چند ضلعی. صفت coords مختصات نواحی داخل تصویر را مشخص می کند.

نقشه تصویر (image-map) چیست؟

یک نقشه تصویر به عنوان یک تصویر گرافیکی همراه با نواحی فعال تعریف می شود به گونه ای که وقتی کاربر روی آن ناحیه کلیک کند، می تواند به مکان های مختلف لینک شود. برای ایجاد یک نقشه تصویر، موارد زیر را لازم داریم:

  • یک عنصر <img> با صفت usemap که مقدار آن نام یک نقشه معتبر را تعیین می کند.
  • عنصر <map> با صفت name که مقدار آن باید برابر با مقدار صفت usemap در عنصر <img> باشد.
  • یک یا چند عنصر <area> در داخل یک عنصر <map> که نواحی قابل کلیک را در یک نقشه تصویر ایجاد می کنند.

ساختار

<area shape=”” coords=”” href=””>

در جدول زیر برخی از مشخصات تگ <area> آورده شده است:

بلوکی نمایش
فقط تگ شروع دارد. (تگ پایان ممنوع است) تگ شروع / تگ پایان
نقشه تصویر کاربرد

مثال

<!DOCTYPE html>

<html>

 <head>

<title>HTML Area tag</title>

<style>

  body{

  margin-left: ۲۵۰px;}

</style>

  </head>

 <body>

 <h2>Example of HTML Area tag</h2>

<img src=”image1.png” usemap=”#web”>

<map name=”web”>

<area shape=”rect” coords=”66,117,131,168″ href=”https://www.javatpoint.com/html-tutorial”>

<area shape=”rect” coords=”199,36,277,85″ href=”https://www.javatpoint.com/css-tutorial”>

<area shape=”rect” coords=”330,107,406,159″ href=”https://www.javatpoint.com/bootstrap-tutorial”>

<area shape=”rect” coords=”199,185,267,236″ href=”https://www.javatpoint.com/javascript-tutorial”>

 </map>

 </body>

</html>

ایجاد یک نقشه تصویر

ویژگی ها

ویژگی های خاص تگ <area>

توضیحات مقدار ویژگی
در صورت عدم نمایش تصویر یک متن جایگزین در مرورگر نمایش داده می شود.

متن

Alt

مختصات بالا سمت چپ و پایین سمت راست یک مستطیل را تعریف می کند.

x1,y1,x2,y2 (مستطیل)

coords

مختصات دایره را تعریف می کند.

x,y شعاع (دایره)

رأس های چند ضلعی را تعیین می کند.

x1,y1,x2,y2,x3,y3,.. (چند ضلعی)

مقصد لینک را برای ناحیه فعال تعیین می کند. لینک

href

لینک در پنجره جدید باز می شود.

_blank

Target

لینک در قاب والد باز می شود.

_parent

لینک در پنجره فعلی باز می شود.

_self

لینک با عرض کامل در همان پنجره باز می شود.

_top

در یک قاب باز می شود. (در ۵ HTML پشتیبانی نمی شود)

نام قاب

ناحیه پیش فرض را تعیین می کند (مستطیلی شکل).

Default

Shape

ناحیه مستطیلی شکل مشخص می کند.

Rect

ناحیه دایره ای تعریف می کند.

Circle

ناحیه چند ضلعی را تعریف می کند.

Poly

یک لینک برای دانلود منبع تعریف می کند.

اسم فایل

download

رابطه بین سند فعلی و سند لینک شده را مشخص می کند.

alternate
author
bookmark
help
license
next
nofollow
noreferrer
prefetch
prev
search
tag

rel HTML Tags List

زبان منبع لینک شده را مشخص می کند.

کد زبان

hreflang HTML Tags List
نوع MIME منبع لینک شده را مشخص می کند. (در ۵ HTML پشتیبانی نمی شود)

نوع رسانه

type HTML Tags List

ویژگی های عمومی

تگ <area> از ویژگی های عمومی در HTML پشتیبانی می کند.

ویژگی های رویداد

تگ <area> از ویژگی های رویداد در HTML پشتیبانی می کند.

مرورگرهای پشتیبان

نام عنصر chrome browser Chrome ie browser IE firefox browser Firefox opera browser Opera safari browser Safari
<area> بله بله بله بله بله

 

profile name
میلاد حیدری

بخندید کتاب بخونید و خوب باشید تا جامعه مون به آرامش برسه. لطفا ! هر سوالی دارید در بخش نظرات مطرح کنید. ما یا سایر هموطنان عزیز پاسخ خواهیم داد. برای کمک به سایت ما و گسترش آموزش در بین هموطنان، در سایتها، وبلاگ ها و شبکه های اجتماعی لینک سایت ما را درج کنید.

مطالب پیشنهادی برای شما

محصولات مرتبط

مشاهده همه

دیدگاهتان را بنویسید

1 2 3 4 5

1 نظر درباره «آموزش تگ area در HTML»

  • niloo
    niloo آیا این دیدگاه مفید بود ؟

    مفید بود. متشکرم.

    پاسخ
مشاهده همه نظرات
سبد خرید
سبد خرید شما خالی است
× جهت نصب روی دکمه زیر در گوشی کلیک نمائید
آی او اس
سپس در مرحله بعد برروی دکمه "Add To Home Screen" کلیک نمائید