طراحی سایت | طراحی اسلایدر | خدمات سئو | سئو وبسایت | خدمات طراحی وبسایت | پشتیبانی وبسایت |
0 محصولات نمایش سبد خرید

هیچ محصولی در سبد خرید نیست.

تگ area در HTML

با استفاده از این تگ ما یک نقطه یا چند نقطه را لینک میکنیم این بدان معنی است که کاربر می تواند بر روی مناطق مختلف در تصویر کلیک کند تا به URL دیگری منتقل شود.
ذهن انسان محدودیت نداره.

تگ area کجا استفاده میشود .

تگ area در HTML یک تکه از عکس یا یک تکه از نقشته را برایه ما مشخص میکند.

با استفاده از این تگ ما یک نقطه یا چند نقطه را لینک میکنیم این بدان معنی است که کاربر می تواند بر روی مناطق مختلف در تصویر کلیک کند تا به URL دیگری منتقل شود.

تگ area به تنهایی نوشته میشود ؟

توجه : این تگ باید در یک <map>  برچسب یا یک برچسب <template> 

تگ area در HTML به طور معمول به این شکل نوشته می شود

<area shape="" coords="" href="" alt="">

(بدون برچسب انتهایی) با مقادیر مشخصه مربوطه درج شده بین نقل قول های دوتایی از صفات مربوطه.

شما باید از تگ <area> در کنار عناصر دیگر ، مانند عنصر<map> یا  <template> و یا تگ img> استفاده کنید (برایه نمایش تصاویر واقعی ).

<img src ="/image.png" alt="My image" usemap ="#my-map">
<map name="my-map">
  <area 
    shape="rect" 
    coords="50,50,100,100" 
    href="/box/" 
    alt="My rectangle box">
</map>

Map | نقشه

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

نمونه کد area

تصویر زیر تصویری از دو کشور مختلف را نشان می دهد. هر کشور با URL دیگری مرتبط است. این کار با استفاده از یک نقشه تصویری (به عنوان مثال <map> در رابطه با برچسب ) امکان پذیر است.

<img src ="/pix/examples/australia-nz-map.gif"
width="200" height="142"
alt="Map of Australia and New Zealand"
usemap ="#aus-nz">

<map name="aus-nz">
  <area shape ="poly" coords ="3,47,45,12,105,7,140,60,120,125,12,90"
  href ="https://en.wikipedia.org/wiki/Australia" target="_blank"
  alt="Australia">
  <area shape ="poly" coords ="180,85,200,98,167,142,157,138"
  href ="https://en.wikipedia.org/wiki/New_Zealand" target="_blank"
  alt="New Zealand">
</map>
تگ area در HTML

اشکال هندسی | Basic Shapes

مثال نقشه بالا از شکل پلی برای نمایش چند ضلعی استفاده می کند. چند ضلعی پیچیده تر از یک شکل ساده مانند مستطیل یا دایره است. می توانید چند ضلعی را با استفاده ازpolygon یا  poly به عنوان یک مقدار از shape  شکل مشخص کنید.

همچنین می توانید از اسامی شکل برای ترسیم مستطیل (rectangle یا  rect) یا یک دایره (circle یا  circ) استفاده کنید.

در زیر مثالی از نقشه تصویری متشکل از یک مستطیل ، دایره و چند ضلعی است.

<img src ="/pix/examples/image-map-1.png"
width="316" height="131"
alt="Funny Shapes"
usemap ="#funny-shapes">

<map name="funny-shapes">
  <area shape ="rect" coords ="9,10,62,123"
  href ="/html/"
  alt="Square" target="_blank">
  <area shape ="circle" coords ="126,76,41"
  href ="/css/" target="_blank"
  alt="Circle">
  <area shape ="poly" coords ="182,15,218,15,218,95,310,95,310,122,182,122"
  href ="/html/codes/" target="_blank"
  alt="L shape">
</map>
مثال تگ area در HTML

Attributes | تگ area در HTML


ویژگی ها را می توان به عنصر HTML اضافه کرد تا اطلاعات بیشتری درباره نحوه ظاهر یا رفتار آن عنصر ارائه دهد.

arreibutes هایه تگ area

Attributeتوضیحات
altمتن جایگزین. این متن را در صورت عدم نمایش تصویر از مرورگر / کاربر ، مشخص می کند.
coordsمختصات منطقه قابل کلیک را مشخص می کند. مختصات به شرح زیر مشخص می شوند: راست: چپ ، بالا ، راست ، دایره پایین: center-x ، مرکز- y ، شعاع پلی: x1 ، y1 ، x2 ، y2 ، …
shapeیک شکل برای منطقه قابل کلیک تعریف می کند. مقادیر احتمالی: به طور پیش فرض rectcirclepoly
hrefURL یک صفحه یا نام لنگر که پیوند به آن می رود را مشخص می کند.
targetقاب هدف را برای بارگیری صفحه به آن مشخص می کند.
downloadنشان می دهد که این لینک برای بارگیری یک منبع (مانند پرونده) استفاده می شود. نویسنده می تواند با ارائه یک مقدار ، نام پرونده پیش فرض را مشخص کند. این ویژگی اختیاری است. Value: [نام پرونده پیش فرض]] (اختیاری)
rel
رابطه بین سند موجود و URI مقصد را توصیف می کند. فقط در صورت وجود ویژگی href مورد استفاده قرار می گیرد. مقادیر مختلفی را می توان ارائه داد که با یک فاصله از هم جدا می شوند.
مقادیر ممکن:
alternate :ارائه های متفاوتی از سند فعلی را ارائه می دهد.
author: پیوندی به نویسنده سند فعلی می دهد.
bookmark : پیوند مجزا برای نزدیکترین بخش اجداد را فراهم می کند.
external : نشان می دهد که سند ارجاع شده بخشی از همان سایت فعلی نیست.
help : پیوندی برای کمک به متن حساس ارائه می دهد.
license : نشان می دهد که محتوای اصلی سند فعلی تحت پوشش پروانه حق چاپ است که توسط سند ارجاع شده شرح داده شده است.
next : نشان می دهد که سند فعلی بخشی از یک سری است و این که سند بعدی این مجموعه ، سند ارجاع شده است.
nofollow : نشان می دهد که نویسنده یا ناشر اصلی پرونده فعلی سند ارجاع شده را تأیید نمی کند. این ویژگی اغلب برای اعلام پیوندهای پرداخت شده به موتورهای جستجوگر مانند Google ، استفاده می شود که از مدیران وب درخواست می کنند کلیه پیوندهای پرداخت شده (به عنوان مثال تبلیغات) را به این روش اعلام کنند.
noopener : اگر پیوند لینک می تواند یکی از این موارد را برای شروع کار ایجاد کند (یعنی دارای یک مقدار ویژگی مناسب برای هدف باشد) ، یک زمینه مرور سطح بالا ایجاد می کند که زمینه مرور کمکی نیست.
noreferrer : اگر کاربر از پیوند لینک پیروی کند ، لازم است که عامل کاربر هدر HTTP Referer (sic) ارسال نکند.
prev : نشان می دهد که سند فعلی بخشی از یک سری است و این که سند قبلی در این سری ، سند ارجاع شده است.
search : پیوندی را به منبعی ارائه می دهد که می تواند برای جستجوی سند فعلی و صفحات مرتبط با آن مورد استفاده قرار گیرد.
hreflangکد زبان URL مقصد. فقط در صورت وجود ویژگی href مورد استفاده قرار می گیرد.
typeنوع MIME منبع مرتبط را مشخص می کند. فقط در صورت وجود ویژگی href مورد استفاده قرار می گیرد.
دیدگاه‌های نوشته

Share via
ارسال این به یک دوست