تگ area در HTML

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

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

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

تگ area چیست؟

تگ area امکان ساخت ناحیه قابل کلیک در نقشه تصویری را فراهم می کند.

این تگ حتما باید درون تگ <map> قرار گیرد.

به عنوان مثال می خواهیم عکسی را با استفاده از تگ area ناحیه بندی کنیم.

ابتدا توسط تگ img عکس مورد نظر را وارد می کنیم.

کد:

<img src="image.jpg" alt="image" usemap="#example" width="300" height="300">

چند نکته در مورد کد بالا:

عکس توسط صفت src لود می شود.

صفت alt مربوط به توضیح متنی در مورد عکس است.

با استفاده از صفت usemap نقشه تصویری که با آن ناحیه بندی را انجام می دهیم را مشخص می کنیم. (در ادامه کد آن را می نویسیم)

صفت width و height مربوط به عرض و ارتفاع عکس می باشد که در مثال بالا 300 تعیین شده است.

در ادامه نقشه تصویری عکس را می سازیم.

کد:

<map name="example">
  <area shape="rect" coords="50,50,250,250" alt="center" href="link.html">
</map>

دقت کنید مقدار صفت usemap در تگ img باید با صفت name در تگ map برابر باشد و گرنه نقشه توسط عکس شناسایی نمی شود.

همان طور که در کد بالا مشاهده می کنید با استفاده از تگ map یک نقشه ساختیم و نام آن را برابر با example قرار دادیم.

درون تگ map می توانید تگ area را قرار دهید. هر تگ area یک ناحیه در عکس را مشخص می کند. در مثال بالا یک تگ area قرار دادیم یعنی یک ناحیه ایجاد کردیم که بنا بر نیاز می توانید با افزودن تگ های بیشتر ناحیه های بیشتری را اضافه کنید.

صفت shape شکل ناحیه قابل کلیک را مشخص می کند. در مثال بالا ناحیه به صورت مستطیلی انتخاب شده که در بخش صفات با این مورد بیشتر آشنا خواهید شد.

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

در صورتی که شکل ناحیه به صورت مستطیلی (rect) انتخاب شود. این صفت چهار ورودی می گیرد.

coords="x1,y1,x2,y2"

اگر عکس را به صورت دو محور x و y تصور کنیم. محور x سمت افقی و محور y سمت عمودی آن است.

عرض عکس چند است؟ 300.

ارتفاع عکس چند است؟ 300.

طبق مثال بالا یعنی محور های x و y از 50 تا 250 به صورت ناحیه قابل کلیک انتخاب شده اند.

صفت href لینک صفحه مورد نظر ناحیه را تعیین می کند. 

صفات تگ area

در این بخش با صفات تگ area آشنا خواهید شد.

صفت alt در area

توضیحی به صورت متنی در مورد عکس می دهد.

<area alt="Text">

این صفت برای سئو مفید است و پیشنهاد می شود حتما از آن استفاده کنید.

کد:

<area shape="rect" coords="50,50,250,250" alt="توضیح" href="link.html">

صفت coords در area

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

<area coords="Value">

اگر ناحیه به صورت مستطیلی انتخاب شود. این صفت چهار ورودی می گیرد:

• x1 شروع نقطه محور x یا افقی
• y1 شروع نقطه محور y یا عمودی
• x2 پایان نقطه محور x یا افقی
• y2 پایان نقطه محور y یا عمودی

<area shape="rect" coords="x1,y1,x2,y2">

اگر ناحیه به صورت دایره ای انتخاب شود سه ورودی می گیرد:

• محور x
• محور y
• شعاع

<area shape="circle" coords="x,y,radius">

اگر ناحیه به صورت چند ضلعی انتخاب شود ورودی به صورت زیر است:

<area shape="poly" coords="x1,y1,x2,y2,...,xn,yn">

صفت download در area

امکان دانلود فایل را فراهم می کند.

<area download="name">

در بعضی مواقع با توجه به مرورگر و کانفیگ سایت، اگر لینک مورد نظر عکس یا ویدیو باشد به جای دانلود، در خود مرورگر باز می شود. با استفاده از این صفت لینک ها قابل دانلود می شوند.

مقدار این صفت به عنوان نام فایل انتخاب می شود.

کد:

<area shape="rect" coords="50,50,250,250" alt="فایل" href="file.jpg" download="name">

صفت href در area

امکان افزودن لینک به ناحیه قابل کلیک را فراهم می کند.

<area href="URL">

می توانید لینک مورد نظر را به ناحیه قابل کلیک اضافه کنید.

<area shape="rect" coords="50,50,250,250" alt="center" href="link.html">

صفت hreflang در area

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

<area hreflang="language">

مثلا اگر زبان لینک مقصد فارسی است مقدار این صفت را fa گذاشته و یا اگر انگلیسی است مقدار آن را en می گذاریم.

کد:

<area shape="rect" coords="50,50,250,250" alt="center" href="link.html" hreflang="fa">

صفت media در area

لینک را برای رسانه یا دستگاه بهینه سازی می کند.

<area media="Value">

صفت referrerpolicy در area

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

<area referrerpolicy="no-referrer-when-downgrade|no-referrer|same-origin|strict-origin-when-cross-origin|origin|origin-when-cross-origin|unsafe-url">

صفت rel در area

رابطه بین صفحه جاری با صفحه مقصد را مشخص می کند.

<area rel="alternate|author|bookmark|help|license|next|nofollow|noreferrer|prefetch|prev|search|tag">

صفت shape در area

نوع شکل ناحیه قابل کلیک را مشخص می کند.

<area shape="default|rect|circle|poly">

مقدار default کل ناحیه را مشخص می کند.

مقدار rect ناحیه را به صورت مستطیل در نظر می گیرد.

مقدار circle ناحیه را به صورت دایره ای در نظر می گیرد.

مقدار poly ناحیه را به صورت چند ضلعی تشکیل می دهد.

صفت target در area

نحوه باز شدن لینک را تعیین می کند.

<area target="_blank|_self|_parent|_top|frame">

به عنوان مثال اگر target به صورت _blank تعیین شود لینک بعد از کلیک کاربر در پنجره یا تب جدید باز خواهد شد.

صفت type در area

نوع رسانه را مشخص می کند.

<area type="media">

به عنوان مثال اگر لینک فایل به صورت عکس با فرمت png باشد نوع رسانه به این شکل است:

<area shape="rect" coords="50,50,250,250" alt="فایل" href="file.png" type="image/png">

سازگاری با مرورگرها

تگ area با مرورگرهای زیر سازگار است:

• گوگل کروم
• فایرفاکس
• اج
• اپرا
• سافاری
• گوگل کروم اندروید
• فایرفاکس اندروید
• اپرا اندروید
• سافاری iOS