صفحه اول >> دانستنی ها >>
آموزش تگ img در HTML - راهنمای کار با تصاویر در html
برای تعریف تصویر درون صفحه از تگ img استفاده می شود. این تگ در واقع فضای نگهدارنده تصویر می باشد.
برای تعریف تصویر درون صفحه از تگ img استفاده می شود.
این تگ در واقع فضای نگهدارنده تصویر می باشد.
استفاده از ویژگی src و alt در تگ img ضروری است. ویژگی src آدرس فایل و alt متن توضیحات تصویر برای موتورهای جستجو می باشد.
مثال تگ img در HTML
مثال 1: قرار دادن عکس در صفحه
<img src="images/car.jpg">
مثال 2: استفاده از ویژگی alt
<img src="images/apple.jpg" alt="گوشی اپل">
مثال 3: تنظیم اندازه عکس
<img src="images/spring.jpg" width="400" height="300">
مثال 4: عکس لینک دار
برای پیوند یک تصویر، فقط تگ img را در تگ a جای گذاری کنید.
<a href="https://rasanehpardaz.com">
<img src="images/logo.png">
</a>
<img src="images/logo.png">
</a>
مثال 5: نقشه تصویری
<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
<area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
</map>
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
<area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
</map>
پشتیبانی مرورگرها
تگ img در مرورگرهای کروم، فایرفاکس، اپرا، سافاری، اینترنت اکسپلورر و اج پشتیبانی می شود.
| مرورگر | کروم | فایرفاکس | اپرا | سافاری | اینترنت اکسپلورر / اج |
| پشتیبانی | بله | بله | بله | بله | بله |
ویژگی ها
| ویژگی | مقدار | توضیحات |
| align | top bottom middle left right |
شیوه ترازبندی تصویر نسبت به عناصر اطراف را مشخص می کند. این ویژگی در HTML5 پشتیبانی نمی شود. |
| alt | text | یک متن جایگزین را برای تصویر مشخص می کند. این ویژگی در HTML5 پشتیبانی نمی شود. |
| border | pixels | ضخامت کادر اطراف تصویر را مشخص می کند. این ویژگی در HTML5 پشتیبانی نمی شود. |
| crossorigin | anonymous use-credentials |
اجازه استفاده از تصاویر سایت های دیگر با استفاده از canvas را می دهد. |
| height | pixels | ارتفاع تصویر را تعیین می کند. |
| hspace | pixels | حاشیه سمت راست و چپ تصویر را تعیین می کند. این ویژگی در HTML5 پشتیبانی نمی شود. |
| ismap | ismap | تصویر را به عنوان یک image-map سمت سرور تعیین می کند. |
| longdesc | URL | آدرس فایل حاوی توصیف دقیق یک تصویر را مشخص می کند. |
| sizes | number | اندازه تصویر را برای طرح بندی صفحه های مختلف مشخص می کند. |
| src | URL | آدرس تصویر را مشخص می کند. |
| srcset | URL | آدرس تصویر را برای استفاده در موقعیت های مختلف مشخص می کند. |
| usemap | mapname# | یک تصویر را به عنوان یک image-map سمت کاربر تعیین می کند. |
| vspace | pixels | حاشیه بالا و پایین تصویر را مشخص می کند. این ویژگی در HTML5 پشتیبانی نمی شود. |
| width | pixels | پهنای تصویر را مشخص می کند. |
پشتیبانی از ویژگی ها و رویدادهای عمومی
تگ <img> از ویژگی های عمومی و رویدادهای عمومی در HTML پشتیبانی می کند.
دستورات CSS پیش فرض
معمولا مرورگرها تگ <img> را بصورت پیش فرض با دستورات CSS زیر نمایش می دهند.
img {
display: inline-block;
}
display: inline-block;
}
موضوع: آموزش HTML
نظرات نظرات تا اطلاع ثانوی غیر فعال است.