تعریف و کاربرد تگ image
تگ <img> برای افزودن یک تصویر در صفحه HTML استفاده می شود.
تصاویر از نظر تکنیکال در یک صفحه وب اضافه نمی شوند بلکه تصاویر به صفحات وب پیوند داده می شوند. تگ <img> یک فضای نگهداری برای تصویرلینک داده شده ایجاد می کند.
تگ <img> دو ویژگی لازم دارد:
src – مسیر تصویر را مشخص می کند
alt – یک متن جایگزین برای تصویر مشخص می کند که اگر تصویر به دلایلی قابل نمایش نباشد آن متن را نمایش دهد
نکته:
همچنین همیشه عرض و ارتفاع یک تصویر را مشخص کنید. اگر عرض و ارتفاع مشخص نشده باشد، ممکن است صفحه هنگام بارگیری تصویر به هم بریزد.
نکته:
برای پیوند دادن یک تصویر به سند دیگر، به سادگی تگ <img> را در داخل تگ <a> قرار دهید (به مثال زیر مراجعه کنید).
خصوصیات
| خصوصیت | مقدار | توضیحات |
|---|---|---|
| alt | متن | یک متن جایگزین برای یک تصویر مشخص می کند |
| crossorigin |
ناشناس استفاده – اعتبار |
اجازه دادن به تصاویر از سایت های شخص ثالث که امکان دسترسی متقاطع از مبدأ را به قسمت های مختلف عکس را می دهد |
| height | pixels | ارتفاع یک تصویر را مشخص می کند |
| ismap | ismap |
یک تصویر را به عنوان نقشه تصویر سمت سروردرنظرمی گیرد |
| loading | eager lazy |
مشخص می کند که آیا مرورگر باید یک تصویر را فورا بارگذاری کند یا بارگذاری تصاویر را تا زمانی که برخی شرایط برآورده شود به تعویق بیاندازد. |
| longdesc | URL | یک URL را برای توضیح دقیق یک تصویر مشخص می کند |
| referrerpolicy | no-referrer no-referrer-when-downgrade origin origin-when-cross-origin unsafe-url |
مشخص می کند که از کدام اطلاعات ارجاع دهنده هنگام واکشی تصویر استفاده شود |
| sizes | sizes | اندازه های تصویر را برای طرح بندی صفحات مختلف مشخص می کند |
| src | URL | مسیر تصویر را مشخص می کند |
| srcset | URL-list | فهرستی از فایل های تصویری را برای استفاده در موقعیت های مختلف مشخص می کند |
| usemap | #mapname |
یک تصویر را به عنوان نقشه تصویر سمت کاربر مشخص می کند
|
| width | pixels | عرض یک تصویر را مشخص می کند |
ویژگی های عمومی تگ image
تگ <img> همچنین از ویژگی های عمومی در HTML پشتیبانی می کند.
ویژگی های رویداد تگ image
تگ <img> همچنین از ویژگی های رویداد در HTML پشتیبانی می کند.
مثال های بیشتر
Align image (with CSS):
افزودن حاشیه تصویر (با CSS):
اضافه کردن حاشیه چپ و راست به تصویر (با CSS):
اضافه کردن حاشیه بالا و پایین به تصویر (با CSS):
نحوه درج تصاویر از یک پوشه دیگر یا از یک وب سایت دیگر:
نحوه ایجاد نقشه تصویر، با مناطق قابل کلیک. هر منطقه یک لینک است:
نحوه افزودن هایپرلینک به تصویر:
تنظیمات پیش فرض CSS
اکثر مرورگرها عنصر <img> را با مقادیر پیش فرض زیر نمایش می دهند:
[…] تگ img […]