مثال ـ نحوي درج تصوير
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
تگ<img> براي قراردادن تصوير در صفحه HTML مورد استفاده قرارميگيرد .
تصاوير از نظر فني در صفحات وب درج نميشوند، بلكه آنها بيك فضاي صفحات وب پيوند داده ميشوند.
اين فضا را براي تصوير، تگ<img> معرفي مي نمايد ومرورگر با استفاده از ويژگي ها آنرا درج ونمايش ميدهد.
تگ فوق داراي دو ويژگي ضروري مطابق زير دارد.
نكته ـ هميشه طول وعرض تصوير را مشخص نمائيد .در غيراينحالت ممكن صفحه درهنگام لود سو سوبزند.
نكته ـ براي پيوند دادن تصوير بيك سند ديگر، تگ<img> را در داخل تگ <a>قرار دهيد .مثال بعدي را مشاهده كنيد.
Element | |||||
---|---|---|---|---|---|
<img> | Yes | Yes | Yes | Yes | Yes |
ويژگي | مقدار | شــرح |
---|---|---|
alt | text | متن جايگزيني رامعرفي مي نمايد. |
crossorigin | anonymous use-credentials | اجاره نمايش در فضاي بوم"canvas"ازطريق دسترسي متقابل سايت مبداء |
height | pixels | ارتفاع تصوير را مشخص مي نمايد. |
ismap | ismap | براي ايجاد نقشه تصويري سمت سرور |
longdesc | URL | مشخص نمودن يك آدرسURL كه شامل اطلاعات تكميلي تصويراست. |
sizes | pixels | اندازه تصاوير را براي طرح بندي صفحات مختلف مشخص ميكند. |
src | URL | مسير تصوير را مشخص ميكند. |
srcset | URL-list | ليستي از تصاوير براي موقعيت هاي مختلف مشخص مي نمايد. |
usemap | #mapname | مشخص كردن تصوير بعنوان نقشه تصويري سمت كاربر |
width | pixels | عرض تصوير رامشخص ميكند. |
تگ<img> از ويژگي هاي جهانيHTML پيروي ميكند.
تگ فوق همچنين از ويژگي هاي رويدادي پيروي ميكند.
مثال ـ تنظيم تراز تصوير باCSS
<img src="smiley.gif" alt="Smiley face" width="42" height="42" style="vertical-align:bottom"> <img src="smiley.gif" alt="Smiley face" width="42" height="42" style="vertical-align:middle"> <img src="smiley.gif" alt="Smiley face" width="42" height="42" style="vertical-align:top"> <img src="smiley.gif" alt="Smiley face" width="42" height="42" style="float:right"> <img src="smiley.gif" alt="Smiley face" width="42" height="42" style="float:left">
مثال ـ افزودن حاشيه تصوير باCSS
<img src="smiley.gif" alt="Smiley face" width="42" height="42" style="border:5px solid black">
مثال ـ تنظيم حاشيه سمت چپ وراست تصوير باCSS
<img src="smiley.gif" alt="Smiley face" width="42" height="42" style="vertical-align:middle;margin:50px 0px">
مثال ـ تنظيم حاشيه بالا وپائين تصوير
<img src="smiley.gif" alt="Smiley face" width="42" height="42" style="vertical-align:middle;margin:50px 0px">
مثال ـ نحو درج تصوير از پوشه يا وبسايت ديگر
<img src="images/stickman.gif" alt="Stickman" width="24" height="39"> <img src="https://www.w3schools.com/images/lamp.jpg" alt="Lamp" width="32" height="32">
مثال ـ افزودن تصوير براي لينك
<a href="https://www.w3schools.com"> <img src="w3html.gif" alt="W3Schools.com" width="100" height="132"> </a>
مثال ـ ايجاد نقشه تصويري با نواحي قابل كليك
<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 >
اغلب مرورگرها نمايش عنصر<img> مطابق تنظيمات پيش فرضي زيرانجام ميدهند.
img { display: inline-block; }