parsgreen.com
article

کاربرد تگ img و نمایش تصاویر در HTML

html-img-tag

یکی از پرکاربردترین تگ ها در صفحات وب، تگ نمایش تصاویر یا img است که امکان نمایش یک تصویر در صفحات سایت ها، وبلاگ ها و در کل امکان نمایش تصویر در وب را میسر می کند، در کنار تگ img به عنوان تگی کلیدی، می توان از عناصر دیگری از جمله alt، title، map، area، border و... استفاده کرد که قابلیت های بیشتری در نحوه نمایش و کنترل رفتارهای رویدادی (مانند تعیین محل کلیک کاربر) در اختیارمان قرار می دهند، از این رو در ادامه آموزش های مقدماتی HTML، این مطلب را اختصاص داده ایم به نحوه کاربرد تگ img و نمایش تصاویر در HTML.

تگ img در HTML


از تگ img برای نمایش یک تصویر در وب استفاده می شود، این تگ معمولا به همراه src می آید و src در واقع مخفف source یا منبع تصویر است که در اینجا معمولا آدرس کامل تصویر یا آدرس آن به صورت دایرکتوری مد نظر است، مثال زیر نحوه نمایش یک تصویر ساده را در وب نشان می دهد.
<img src="example-image.jpg" />

ویژگی alt در تگ img


برای اینکه مرورگر به نحو درستی تصاویر را نشان دهد، باید در کنار تگ img از خاصیت های جانبی آن استفاده کنیم، اولین خاصیت، ویژگی alt یا متن جایگزین تصویر است، alt در واقع متنی است که اگر تصویر به هر دلیل نشان داده نشود، داخل کادر خالی آن، به نمایش در می آید و به نوعی راهنمای کاربران است تا از محتوای آن تصویر، با خبر شوند.
<img src="example-image.jpg" alt="example-image" />

ویژگی title در تگ img


علاوه بر alt که متن جایگزین تصویر است، از عنصر title می توان برای هنگامی که کاربر ماوس را روی تصویر می برد، جهت نمایش یک پیام به صورت توصیف (tooltip) استفاده کرد، درون این ویژگی از متنی برای توضیح ماهیت تصویر استفاده کنید.
<img src="example-image.jpg" alt="example-image" title="نمایش تصویر در html" />

ویژگی height و width در تگ img


برای اینکه ارتفاع و عرض تصویر خود را تعریف کنید، از دو ویژگی width و height در کنار سایر ویژگی های تگ img استفاده کنید، این کار مخصوصا از نظر سئو و موتورهای جستجو اهمیت زیادی دارد.
<img src="example-image.jpg" alt="example-image" title="نمایش تصویر در html" height="100" width="200" />

ویژگی border در تگ img


از border مخصوصا در مواقعی که به تصویر خود لینک می دهید، می توان برای حذف حاشیه ها استفاده کرد، در برخی مرورگر ها وقتی یک تصویر را به صورت لینک شده درمی آورید، به صورت پیش فرض نواری آب رنگ به عنوان حاشیه تصویر در نظر گرفته می شود، برای حذف این حالت می توانید مقدار صفر را برای border در نظر بگیرید، به مثال زیر توجه کنید.
<img src="example-image.jpg" alt="example-image" title="نمایش تصویر در html" height="100" width="200" border="0" />

ویژگی usemap در تگ img


ویژگی هایی که پیش تر گفتیم، معمولا برای تصاویر معمولی در صفحات وب کفایت می کنند، اما برای مواردی پیشرفته تر می توان از خاصیت usemap و area برای تعریف نقاط قابل کلیک در یک تصویر استفاده کرد، گاهی نیاز به این داریم که بیش از چند لینک را در یک تصویر قرار دهیم یا بخش خاصی از آن را قابل کلیک شدن کنیم، این دسته از تنظیمات با ویژگی usemap و area در تگ img بر روی تصاویر قابل اعمال هستند.
<img src="example-image.jpg" alt="example-image" title="نمایش تصویر در html" height="100" width="200" border="0" usemap="#img-map" />
<map name="img-map" id="img-map">
<area shape="circle" coords="100,20,0" alt="تصویر دایره ای" href="image-html.html" />
<area shape="poly" coords="130,20,4,8,0,3" alt="تصویر چند ضلعی" href="image-html.html" />
<area shape="rect" coords="130,20,4,0" alt="تصویر مستطیل مربع" href="image-html.html" />
</map>
نکته مهم در این حالت، استفاده درست از شکل اشیائی است که می خواهیم قابل کلیک شدن باشند، سه مقدار circle ،poly و rect برای قسمت shape در area کاربرد دارند.
- rect به معنی rectangle یا مربع مستطیل است.
- poly یک شیء چند ضلعی است.
- circle برای ترسیم محیط قابل کلیک شدن به شکل دایره کاربرد دارد.

نحوه تنظیم مقادیر area در map


برای اینکه نقاط قابل کلیک شدن را به درستی برای تصاویر تعریف کنید، باید با نحوه مقدار دهی صحیح برای شکل های متفاوت، آشنا باشید.
- برای اشیاء rect یا مربع مستطیلی شکل، از چهار عدد به عنوان گوشه چپ - بالا و راست - پائین استفاده می شود، در واقع شما میزان فاصله سمت چپ و بالای تصویر و همچنین سمت راست و پائین تصویر را برای قابل کلیک بودن تعریف می کنید.
<area shape="rect" coords="0,0,13,16" href="http://webgoo.ir">
- برای اشیاء چندگانه یا poly باید از 6 مقدار استفاده کنید، این مقادیر موقعیت محل قابل کلیک شدن را نشان می دهند.
<area shape="poly" coords="13,0,11,3,7,12" href="http://webgoo.ir">
- نهایتا برای اشیاء دایره ای شکل یا circle کافی است دو مقدار را تعیین کنید، البته برای تعیین انحراف از مرکز دایره، مقدار سومی نیز می توان تنظیم کرد که به فرض دایره را به شکل بیضی تبدیل می کند.
<area shape="circle" coords="30,14,3" href="http://webgoo.ir">

پیش نمایش آنلاین


برای دیدن تمام ویژگی هایی که در این آموزش مرور کردیم به صورت آنلاین، می توانید از کد و پیش نمایش زیر استفاده کنید.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>وبگو | نمایش یک تصویر در وب</title>
<!-- http://webgoo.ir -->
<style type="text/css">
body{
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    direction:rtl;
}
</style>
</head>
<body>
<img src="example-image.jpg" alt="example-image" title="نمایش تصویر در html" height="194" width="259" border="0" usemap="#img-map" />
<map name="img-map" id="img-map">
<area shape="rect" coords="0,0,100,100" alt="تصویر مستطیل مربع" href="http://webgoo.ir" />
</map>
<hr />
برای دیدن ویژگی map و area کافی است ماوس خود را بر روی گوشه بالای سمت چپ تصویر ببرید.
</body>
</html>
پیش نمایش
sectionدسته بندی: آموزش مقدماتی » HTML
related مطالب بیشتر:
» کار با تگ های ایجاد کننده لیست در HTML
» کار با تگ فرم (form) در HTML
» نحوه ایجاد لینک در HTML
» ایجاد جدول با تگ table در html
» لایه بندی در html با تگ div و span
commentنظرات (۴۷ یادداشت برای این مطلب ارسال شده است)
نویسنده: roya
زمان: ۱۹:۳۲:۳۷ - تاریخ: ۱۳۹۱/۱۰/۱۰
ممنونم
نویسنده: Tesla
زمان: ۲۳:۴۹:۴۴ - تاریخ: ۱۳۹۲/۰۳/۲۸
این ویژگی usemap رو اولین باره میبینم! تو هیچ آموزش دیگه ای از html حداقل من ندیده بودم! خیــــــلی ممنون :)
نویسنده: nima
زمان: ۱۴:۱۳:۱۹ - تاریخ: ۱۳۹۲/۰۵/۱۰
مطالبتون عالیه
واقعا ممنون
نویسنده: sh
زمان: ۱۷:۳۵:۱۲ - تاریخ: ۱۳۹۲/۰۵/۱۱
فرض کنید بخوایم یه textfield در پس یه تصویر بذاریم و به این ترتیب یه طرح گرافیکی از فرم لاگین داشته باشیم، چطور میشه این کار رو کرد؟
پاسخ: 
احتمالا منظور شما قرار دادن یک تصویر در پس زمینه فیلد است، در این صورت باید از CSS برای تنظیم استایل عناصر HTML استفاده کنید که خود مبحث جداگانه دارد.
نویسنده: حمید
زمان: ۲۰:۵۱:۳۳ - تاریخ: ۱۳۹۲/۰۷/۲۲
سلام
ایا میشه نقشه ی تصویری map رو روی عکس بکگراند اجرا کرد یا اینکه این صفت رو به عکس هایی که از css وارد میشن وارد کرد
پاسخ: 
سلام
خیر، این امکان تنها بر روی تگ img قابل اعمال است، در سایر موارد باید از تکنیک های CSS استفاده کنید که خود مبحث جداگانه دارد.
نویسنده: حمید
زمان: ۰۰:۵۸:۲۳ - تاریخ: ۱۳۹۲/۰۷/۲۴
دستون درد نکنه فقط یه سوال چطور میشه عکسی رو که یه عنوان بکگراند تصویر قرار دادیم با مانیتور بیننده ست کنیم مثلا اندازه ی عکس به اندازه ی مانیتور بیننده تغییر کنه
پاسخ: 
انجام این کار به صورتی که می خواهید به سادگی امکانپذیر نیست، یعنی نمی توانید تصویر را با توجه به اندازه مانیتور کوچک و بزرگ کنید (مگر اینکه از کدهای جاوا اسکریپت و... استفاده کنید که روش قابل اطمینان و صد در صدی نیست)، به همین خاطر در طراحی حرفه ای معمولا یک تصویر با اندازه استاندارد (متناسب با عرض مانیتورهای فعلی) انتخاب و حاشیه های آن با رنگ پس زمینه همپوشانی می شود.
نویسنده: پیمان
زمان: ۱۳:۴۱:۲۰ - تاریخ: ۱۳۹۲/۰۷/۲۶
اقا و خانم نمیدونم کلیه نویسندگان واقعا دستتون درد نکنه خیلی استفاده میکنم خیلی دوست دارم واقعا عالی.
نویسنده: amir
زمان: ۱۴:۲۱:۳۳ - تاریخ: ۱۳۹۲/۰۷/۲۸
سلام بنده میخوام یه عکسی رو وسط صفحه وبم قرار بدم مثل لوگو گوگل، از چه عنصری باید استفاده کنم؟
پاسخ: 
سلام
برای اینکه محتوا در وسط قرار بگیرند از تگ زیر در HTML استفاده کنید:
<center>محتوا</center>
یا اگر با CSS آشنایی دارید از این خاصیت استفاده کنید:
<div style="text-align:center;">محتوا</div>
همچنین برای img خاصیت align به صورت خطی نیز قابل استفاده است (توصیه نمی شود).
نویسنده: محمد
زمان: ۲۱:۲۴:۲۱ - تاریخ: ۱۳۹۲/۰۸/۰۸
سلام. خسته نباشید.
من همه مراحل رو رفتم همه هم درست. ولی تو قسمت map و برای rect هر کدوم از اون 4 تا عدد رو عوض می کنم باز فقط بالا سمت چپ قابل کلیک کردنه. دو تای اولی رو عدد دادم دو تای دوم صفر این طوری بود، دو تای دومی رو عدد دادم دو تای اول صفر باز هم بالا سمت چپ بود.
چرا؟
پاسخ: 
سلام
این خاصیت در عملکرد کمی حساس است و باید مقادیر را با آزمایش و خطا نسبت دهید! به طور مثال این حالت را تست کنید:
coords="40,40,194,194"
نویسنده: نینا
زمان: ۱۰:۲۸:۵۶ - تاریخ: ۱۳۹۲/۰۸/۱۹
با سلام
وقتی عکس مثلا در درایو E قرار داره برای نمایش ان باید چکار کرد
پاسخ: 
سلام
در این حالت ابتدا باید تصویر را در یک سایت یا هاست آپلود و سپس از لینک آن در قسمت src استفاده نمائید.
زمان: ۱۹:۳۶:۲۹ - تاریخ: ۱۳۹۲/۰۹/۰۱
سلام
از آموزشهاي خوبتون ممنونم. من هم اولين بار بود ويژگي usemap رو مي ديدم.
نویسنده: مبتدی
زمان: ۱۷:۵۸:۲۶ - تاریخ: ۱۳۹۲/۰۹/۰۳
عالی بود خیلی بهم کمک کرد
نویسنده: نازیلا
زمان: ۰۰:۰۱:۴۷ - تاریخ: ۱۳۹۲/۱۰/۰۷
ممنون از زحماتتون
نویسنده: رويا
زمان: ۱۲:۴۴:۵۵ - تاریخ: ۱۳۹۲/۱۰/۰۷
سلام خسته نباشيد من دانشجوي كارشناسي نرم افزار هستم درس طراحي وب بايد وب سايت بسازم همه چيز رو ميدونم به غير از منو ساختن من با برنامه Dhtml منو ساختم و در صفحه homepage قرار دادم فقط براي قراردادن در صفحات ديگر وبم بايد چيكار كنم؟ آيا كد ايجاد شده رو در يكي يكي صفحات insert كنم يا از masterpage استفاده كنم؟ و سوال ديگرم براي لينك دادن به صفحات ديگم از همين منو بايد از تگ a استفاده كرد ؟ يا در خود برنامه dhtml لينك كنم؟ لطفا راهنماييم كنيد با تشكر
پاسخ: 
سلام
به نظر نیاز به مرور بیشتر مباحث مقدماتی دارید! منو برای نمایش صحیح نیاز به ارجاع صحیح به فایل های (js, css ,تصاویر و...) دارد، مهم نیست در چه صفحه ای کدها درج می شوند، فقط باید آدرس به دایرکتوری فایل های منو صحیح تنظیم شود، لذا می توانید در همه صفحات از یک کد مشابه استفاده کنید، به شرطی که دایرکتوری آنها نیز یکی باشد، در غیر این صورت باید آدرس فایل ها را در سورس هر صفحه تنظیم کنید، در مورد سوال دوم نیز اگر از برنامه این کار را انجام دهید ساده تر خواهد بود، هر چند نتیجه نهیاتا به صورت کد تولید می شود و لذا به صورت دستی نیز قابل تنظیم است.
نویسنده: نیلوفر
زمان: ۰۱:۲۷:۴۶ - تاریخ: ۱۳۹۲/۱۱/۰۶
سلام
من میخوام به جای بله و خیر، علامت های تیک سبز یا ضربدر قرمز بذارم. کد خاصی داره یا باید عکسشون رو بذارم. و از کجا عکس رو دانلود کنم.؟؟؟؟
ممنون. 
پاسخ: 
سلام
برای اینگونه موارد باید با CSS و خاصیت های مربوط به background آشنا باشید، عکس را از سایت های گرافیکی دانلود کنید!
paged صفحه 1 از 4




more لطفا دقت کنید که یادداشت های زیر منتشر نشده و حذف خواهند شد:
- یادداشت های خارج از موضوع این مطلب.
- سوالات کلی، غیر ضروری و مشکلاتی که هیچ تلاشی برای رفع آن نکرده باشید.
- نظرات حاوی کدها و اسکریپت های خیلی طولانی (به طور مثال کد کامل قالب وبلاگ).

5 × 3
 refresh
آگهی
seonab.com
طراحی نرم افزار اندروید
رنگین کمان عکس
Ranginkamaan.com

آرشیو عکس های باکیفیت با موضوعات متنوع...