آموزش اچ تی ام ال HTML

المان img برای وارد کردن تصویر داخل سند HTML استفاده میشود.

مثال

 
<img src="pulpitrock.jpg" alt="Mountain View">
 

اتریبیوت ها

این المان از اتریبیوت های جهانی استفاده میکنند.

alt

این اتریبیوت متن جایگزین تصویر را نشان میدهد. اگر URL تصویر اشتباه باشد، یا فورمت تصویر درست نباشد و یا تصویر هنوز دانلود نشده باشد کاربران این متن را میبینند.

 
<img src="logo.png" alt="kntit">
 

decoding

به مرورگرها کمک میکند تا تصاویر را رمزگشایی کنند. مقادیر این اتریبیوت به شرح زیر میباشد:

sync تصاویر را همزمان با دیگر محتواها رمزگشایی میکند.

async تصاویر همزمان با دیگر محتواها رمزگشایی نمیشوند تا سرعت نمایش دیگر محتواها کاهش پیدا نکند.

auto در این حالت مرورگر تصمیم میگیرد چگونه تصاویر را رمزگشایی کند. این مقدار پیشفرض decoding میباشد.

 
<img src="logo.png" alt="kntit" async>
 

height

ارتفاع اصلی تصویر بصورت پیکسل را نشان میدهد. در HTML4 میتواند هم بصورت پیکسل باشد و هم درصد، اما در HTML5 تنها میتواند بصورت پیکسل باشد.

 
<img src="logo.png" alt="kntit" height="42">
 

ismap

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

 
<a href="/sample.php">
    <img src="logo.png" alt="kntit" ismap>
</a>
 

longdesc

این اتریبیوت لینکی به توصیف بیشتر تصویر است. مقادیر آن id یا URL است.

 
<img src="logo.png" alt="kntit" longdesc="kntit.txt">
 

src

این اتریبیوت که URL تصاویر است برای المان img اجباری است.

 
<img src="logo.png" alt="kntit">
 

width

عرض اصلی تصویر بصورت پیکسل را نشان میدهد. در HTML4 میتواند هم بصورت پیکسل باشد و هم درصد، اما در HTML5 تنها میتواند بصورت پیکسل باشد.

 
<img src="logo.png" alt="kntit" width="60">
 

usemap

این اتریبیوت یک تصویر را بعنوان تصویر یک نقشه مشخص میکند. اتریبیوت usemap از طریق name یا id به المان map مرتبط است.

 
<img src="planet.jpg" width="142: height="123" alt="planets" usemap="planetmap">
 
<map name="planetmap">
    <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
    <area shap="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
    <area shap="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>
 

نکاتی که باید در ذهن داشته باشید

• استاندار HTM لیستی از فورمتهای تصاویر که باید پشتیبانی شود ارائه نداده است، بنابراین هر یوزرایجنت فورمتهای مختلفی از تصاویر را پشتیبانی میکنند. پشتیبانی Gecko به شرح زیر است:
  • JPEG
  • GIF, شامل GIFهای متحرک نیز میباشد
  • PNG
  • APNG
  • SVG
  • BMP
  • BMP ICO
  • PNG ICO
• مرورگرها همیشه تصاویر را نمایش نمیدهند. این مورد برای مرورگرهای غیر گرافیکی هم صادق است. اگر کاربر انتخاب کند که تصاویر را نمایش ندهد، یا مرورگر نتواند تصاویر را لود کند، از متنی که در اتریبیوت alt نوشته شده استفاده میکند. بنابراین بهتر است برای alt متن مفیدی در نظر بگیرید.
• حذف اتریبیوت alt نشان میدهد که تصویر بخش کلیدی محتوا است و معادل متنی برای آن وجود ندارد. اما اگر این اتریبیوت را به صورت alt=”” بنویسید نشان میدهد که تصویر بخش کلیدی محتوا نیست و مرورگرهای غیر گرافیکی آن را حذف میکنند.
• تنها زمانی میتوان از اتریبیوت ismap استفاده کرد که المان img درون المان a با اتریبیوت href معتبر قرار داشته باشد.
• زمانی که از اتریبیوت usemap المان img نمیتواند درون المان های a یا button باشد.

مطالعه بیشتر

img