عنصر img و کاربرد آن در HTML

عنصر img و کاربرد آن در HTML

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

مثال ۱ : قرار دادن تصویر در سند html

 

عنصر img و کاربرد آن در HTML

عنصر img و کاربرد آن در HTML

مثال ۲ : لینک کردن تصاویر

 

فرمت های تصویری پشتیبانی شده

استاندارد HTML لیستی از فرمت تصاویری که باید پشتیبانی شود را ارائه نکرده است، بنابراین هر عاملِ کاربر مجموعه متفاوتی از فرمت ها را پشتیبانی می کند. Gecko  از فرمت های زیر پشتیبانی میکند:

  • JPEG
  • GIF، از جمله GIF های متحرک
  • PNG
  • APNG
  • SVG
  • BMP
  • BMP ICO
  • PNG ICO
عنصر img و کاربرد آن در HTML

عنصر img و کاربرد آن در HTML

تفاوت بین HTML4.01 و HTML5

خاصیت های align ، border ، hspace ، longdesc ، vspace در HTML5 پشتیبانی نمی شوند.

تفاوت بین HTML و XHTML

در HTML تگ <img> برچسب پایانی ندارد درحالیکه در XHTML برچسب <img> حتما باید بسته شود.

عنصر img و کاربرد آن در HTML

خاصیت ها:

تگ HTML می تواند شامل یک یا چند خاصیت باشد که چگونگی ارائه در مرورگر را تعیین میکنند. خاصیت ها دارای یک نام و یک مقدار هستند که با علامت (=) از هم جدا شده اند. مقدار خاصیت با علامت نقل قول احاطه میشود .

۳ نوع خاصیت وجود دارد که شما می توانید به تگ های HTML خود اضافه کنید:

خاصیت ویژه عنصر

خاصیت عمومی

خاصیت رویداد

خاصیت ویژه عنصر

خاصیتمقدارشرح
aligntop
bottom
middle
left
right
در HTML5 پشتیبانی نمیشود
چیدمان یک تصویر را با توجه به عناصر اطراف آن مشخص می کند
alttextیک متن برای تصویر مشخص می کند
borderpixelsدر HTML5 پشتیبانی نمیشود
پهنای کادر یک تصویر را مشخص می کند
crossorigin جدیدanonymous
use-credentials
اجازه می دهد تصاویر از سایت های دیگر در سند html قرار بگیرد.
heightpixelsارتفاع یک تصویر را تعیین میکند.
hspacepixelsدر HTML5 پشتیبانی نمیشود
در سمت چپ و راست تصویر فضای خالی تعیین میکند
ismapismapیک تصویر را به عنوان نقشه تصویری سمت سرور مشخص میکند
longdescURLدر HTML5 پشتیبانی نمیشود
یک URL برای سندی که حاوی توضیحاتی از یک تصویر است مشخص میکند
srcURLURL یک تصویر را مشخص میکند
usemap#mapnameیک تصویر را به عنوان نقشه تصویری سمت سرویس گیرنده مشخص میکند
vspacepixelsدر HTML5 پشتیبانی نمیشود
در بالا و پایین تصویر فضای خالی تعیین میکند
widthpixelsعرض یک تصویر را تعیین میکند

خاصیت های عمومی

تگ img  از خاصیت های عمومی HTML پشتیبانی میکند

accesskeyhiddenitemtype
classidlang
contenteditableinertspellcheck
contextmenuitemidstyle
diritemproptabindex
draggableitemreftitle
dropzoneitemscopetranslate

خاصیت های رویداد

تگ img از خاصیت های رویداد در HTML نیز پشتیبانی میکند.

onabortonendedonmousewheel
oncancelonerroronpause
onbluronfocusonplay
oncanplayonformchangeonplaying
oncanplaythroughonforminputonprogress
onchangeoninputonratechange
onclickoninvalidonreadystatechange
oncontextmenuonkeydownonscroll
ondblclickonkeypressonseeked
ondragonkeyuponseeking
ondragendonloadonselect
ondragenteronloadeddataonshow
ondragexitonloadedmetadataonstalled
ondragleaveonloadstartonsubmit
ondragoveronmousedownonsuspend
ondragstartonmousemoveontimeupdate
ondroponmouseoutonvolumechange
ondurationchangeonmouseoveronwaiting
onemptiedonmouseup

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

تگ img در همه مرورگرهای اصلی نظیر اینترنت اکسپلورر، فایرفاکس ، اپرا ، گوگل کروم و سافاری پشتیبانی می شود.

مرورگرها همیشه تصاویر ارجاع داده شده توسط عنصر را نمایش نمیدهند. در مرورگرهای غیر گرافیکی و یا هنگامی که کاربر مرورگر خود را طوری تنظیم کند که تصاویر نمایش داده نشوند، ممکن است متن تعریف شده در ویژگی ALT این عنصر،  جایگزین تصویر شود.

تنظیمات پیش فرض CSS :

بیشتر مرورگر ها عنصر img را با مقادیر پیش فرض زیر مشخص میکنند:

 

پاسخ به کلیه سوالات شما در زمینه وب هاستینگ و مدیریت سرور در انجمن کامپایلر

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *