ویژگی <img> استفاده از HTML

برچسب <img> HTML

تعریف و استفاده

usemap ویژگی تصویر را به عنوان یک تصویر مشتری تعریف می‌کند.

تصویرهای با مناطق قابل کلیک به تصویرهایی اطلاق می‌شود که مناطق قابل کلیک دارند.

usemap ویژگی‌ها با عنصر <map> با ویژگی‌های name یا id مرتبط است تا ارتباطی بین <img> و <map> برقرار شود.

توجه:اگر عنصر <img> فرزند عنصر <a> یا <button> باشد، نمی‌توان از آن استفاده کرد usemap مشخصات.

مطالعه بیشتری: توضیح ویژگی usemap

مثال

تصویرهایی با مناطق قابل کلیک:

<img src="life.png" alt="Life" usemap="#lifemap" width="650" height="451">
<map name="lifemap">
  <area shape="rect" coords="10,208,155,338" alt="Computer" href="airpods.html">
  <area shape="rect" coords="214,65,364,365" alt="Phone" href="iphone.html">
  <area shape="circle" coords="570,291,75" alt="Cup of coffee" href="coffee.html">
</map>

آزمایش کنید

نحوه استفاده

<img usemap="#mapname">

مقدار ویژگی

مقدار توضیح
#mapname علامت عدد ۳۶ (#) به علاوه نام عنصر <map> مورد استفاده.

مطالعه بیشتری: توضیح ویژگی usemap

usemap ویژگی‌ها یک مکانیزم تصویر مرتبط «مشتری» را ارائه می‌دهند که به طور مؤثر از پردازش سرور برای مقادیر مکان ماوس جلوگیری می‌کند و مشکلات تأخیر شبکه را که از آن ناشی می‌شود، کاهش می‌دهد. از طریق برچسب‌های خاص <map> و <area>، سازنده HTML می‌تواند یک توضیح از مناطق حساس به لینک در تصویر usemap ارائه دهد که شامل URL‌های مربوط به لینک‌ها است. مقدار ویژگی usemap یک URL است که به یک منطقه خاص <map> اشاره دارد. مرورگر کامپیوتر کاربر می‌تواند مکان ماوس را در تصویر به یک عمل خاص تبدیل کند، از جمله بارگذاری و نمایش یک مستند دیگر.

ما به عنوان مثال توضیح می‌دهیم، در اینجا این کد منبع یک تصویر 100x100 پیکسلی map.gif را به 4 منطقه‌ای تبدیل می‌کند که در صورت کلیک کاربر بر روی یکی از این مناطق، به یک مستند مختلف لینک داده می‌شود. توجه داشته باشید که در این برچسب <img>، ما به طور مؤثر از قابلیت‌های ismap برای تصویر مرتبط استفاده کرده‌ایم، بنابراین کاربرانی که از مرورگرهایی که قابلیت usemap ندارند، استفاده می‌کنند، می‌توانند از یک روش دیگر، یعنی مکانیزم سرور برای مدیریت تصویر مرتبط استفاده کنند:

<a href="/example/map">
  <img src="/i/map.gif" ismap="ismap" usemap="#map" />
</a>
<map name="map">
  <area coords="0,0,49,49" href="link1.html">
  <area coords="50,0,99,49" href="link2.html">
  <area coords="0,50,49,99" href="link3.html">
  <area coords="50,50,99,99" href="link4.html">
</map>

تفاوت در استفاده از属性 ismap و usemap

نقشه‌ها مثال خوبی از استفاده از属性 ismap و usemap هستند، به عنوان مثال، هنگام مشاهده وب‌سایت یک شرکت بزرگ در سراسر کشور، کاربر ممکن است روی شهر محل زندگی خود در نقشه کلیک کند تا آدرس و شماره تلفن فروشگاه‌های خرده‌فروشی نزدیک را دریافت کند.

مزایای استفاده از ismap در پردازش تصاویر نقشه‌ای توسط کاربران، این است که نیازی به سرور یا نرم‌افزار خاصی نیست، برخلاف مکانیزم ismap، می‌تواند در محیط‌های غیر وب (بدون اینترنت) استفاده شود، مانند استفاده از فایل‌های محلی یا CD-ROM.

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

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
پشتیبانی پشتیبانی پشتیبانی پشتیبانی پشتیبانی

برچسب <img> HTML