نمونه کد

یک نمونه ساده از نحوه استفاده تگ <area>:

آزمایشگاه

تعریف و کاربرد

تگ <area> برای مشخص کردن محدوده های مختلف در یک تصویر و افزودن قابلیت کلیک پذیری در آن محدوده استفاده می شود.

تگ <area> را حتما باید در داخل تگ <map> استفاده کنیم.

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

<img src="image.jpg" usemap="#samplemap">

<map name="samplemap">
     <area shape="rect" coords="50,23,190,433" alt="green desc" href="desk.htm">
     <area shape="rect" coords="250,600,2" alt="a young man" href="man.htm">
</map>

مهم ترین ویژگی های تگ <area>:

  1.  shape: برای مشخص کردن شکل محدوده که می تواند به صورت مستطیل (rect)، دایره (circle) و چند ضلعی (poly) باشد.
  2. coords: به واسطه این ویژگی می توانید مختصات پیکسلی محدوده را انتخاب کنید.

 برای توضیحات بیشتر می توانید به صفحه ویژگی shape و coords مراجعه کنید.

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

# کروم ادج فایرفاکس سافاری اپرا
<area>

ویژگی های سراسری

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

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

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

استایل css پیش فرض

بیشتر مرورگر ها تگ <area> را با استایل پیشفرض زیر نمایش می دهند: