تگ img در HTML
با استفاده از تگ img در HTML میتوانید یک تصویر را در سند وارد و تعریف کنید.
مثال
<img src="https://www.bubbleslearn.ir/wp-content/uploads/2019/09/matin-boronsi-pc-main.jpg" alt="متین برونسی | Matin Boronsi" width="100%" height="500">تعریف و کاربرد
از تگ img در HTML برای جاسازی تصویر در سند استفاده می شود.
تصاویر از نظر فنی در یک سند درج نمی شوند ، بلکه تصاویر پیوند داده می شوند.
تگ <img> در HTML یک فضای نگهداری برای تصاویر ارجاع داده شده می باشد.
تگ <img> دو ویژگی ضروری و لازم دارد:
src: در این خاصیت آدرس تصویر را مشخص میکنیم.alt: در این ویژگی یک متن در رابطه با تصویر قرار میدهیم ، که به هر دلیلی اگر تصویر قابل نمایش نبود این متن به نمایش در می آید.
توجه: همیشه عرض width و ارتفاع height تصویر را مشخص کنید ، در غیر این صورت تصویر با سایز اصلی و پیش فرض خودش در سند به نمایش در می آید و بیشتر اوقات این موضوع فرم و قالب صفحه را بهم می زند.
نکته: برای بازکردن مستقیم تصویر درون عنصر <img> در یک سند دیگر ، میتوانید آدرس تصویر را در تگ <a> قرار دهید.
پشتیبانی مرورگر ها
| عنصر | |||||
|---|---|---|---|---|---|
<img> | بله | بله | بله | بله | بله |
خواص
| خاصیت | مقدار | توضیح |
|---|---|---|
| alt | text | متن جایگزین را برای یک تصویر مشخص می کند ، در صورتی که به هر دلیل تصویر قابل نمایش نباشد این متن به نمایش در می آید |
| crossorigin | anonymous use-credentials | اجازه نمایش تصاویر در canvas از طریق دسترسی متقابل سایت مبدأ را می دهد |
| 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 | آدرس URL تصویر را برای نمایش آن مشخص می کند |
| srcset | URL-list | لیستی از آدرس فایلهای تصویری را برای استفاده در شرایط مختلف مشخص می کند |
| usemap | #mapname | تصویری را به عنوان نقشه تصویری سمت مشتری تعیین می کند |
| width | pixels | عرض یک تصویر را مشخص می کند |
خواص عمومی
تگ img از خواص عمومی در HTML پشتیبانی میکند.
رویداد های عمومی
تگ img از رویداد های عمومی در HTML پشتیبانی میکند.
تنظیمات پیش فرض CSS
اکثر مرورگر ها عنصر img در HTML را با تنظیمات پیش فرض زیر نمایش می دهند:
img {
display: inline-block;
}مثال های بیشتر
در مثال زیر تصویر ما قابل نمایش نیست در نتیجه مقدار alt به نمایش در می آید:
<img src="#" alt="متین برونسی | Matin Boronsi" width="100%" height="500">
در مثال زیر ما روش اضافه کردن لینک ها به تصاویر خود را یاد میگیرم:
<a href="https://matinboronsi.ir/">
<img src="https://www.bubbleslearn.ir/wp-content/uploads/2019/09/matin-boronsi-pc-main.jpg" alt="www.bubbleslearn.ir" width="250" height="200">
</a>
<a href="https://www.bubbleslearn.ir/wp-content/uploads/2019/09/matin-boronsi-pc-main.jpg">
<img src="https://www.bubbleslearn.ir/wp-content/uploads/2019/09/matin-boronsi-pc-main.jpg" alt="www.bubbleslearn.ir" width="250" height="200">
</a>
در مثال زیر عناصر map و area را مورد بررسی قرار داده ایم ، و یک نقشه تصویر ایجاد کرده ایم که با کلیک برروی هر قسمت از تصویر شما به یک صفحه خاصی ارجاع داده می شوید:
<img src="https://www.bubbleslearn.ir/wp-content/uploads/2021/05/workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="https://fa.wikipedia.org/wiki/%D8%B1%D8%A7%DB%8C%D8%A7%D9%86%D9%87">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="https://fa.wikipedia.org/wiki/%D8%AA%D9%84%D9%81%D9%86">
<area shape="circle" coords="337,300,44" alt="Cup of coffee" href="https://fa.wikipedia.org/wiki/%D9%82%D9%87%D9%88%D9%87">
</map>آیا این مطلب برای شما مفید بود ؟
روانشناسى عبادات
و درود خدا بر او، فرمود: دل ها را روى آوردن و نشاط، و پشت كردن و فرارى است، پس آنگاه كه نشاط دارند آن را بر انجام مستحبّات واداريد، و آنگاه كه پشت كرده بى نشاط است، به انجام واجبات قناعت كنيد.
حکمت 312 نهج البلاغه
