آگهی
article

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

html-img-tag

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

تگ img در HTML


همان طور که گفتیم از تگ img برای نمایش تصویر در صفحات وب استفاده می شود، این تگ باید به همراه ویژگی src درج شود و عبارت src در واقع مخفف source یا مسیر (path) منبع تصویر است که در اینجا آدرس کامل تصویر یا آدرس آن به صورت دایرکتوری مد نظر است، مثال زیر نحوه نمایش یک تصویر ساده را در وب نشان می دهد:
<img src="photo.jpg">
با توجه به نمونه کد بالا باید فایل فرضی photo.jpg در کنار فایل HTML در یک دایرکتوری موجود باشند.
نکته: تگ img به صورت تکی (Singleton) است و نیازی به بستن آن با تگ img دیگری نیست.

ویژگی alt در تگ img


برای اینکه مرورگر به نحو درستی تصاویر را پردازش کرده و نمایش دهد بهتر است در کنار تگ img از خاصیت های جانبی آن استفاده کنیم، اولین خاصیت ویژگی alt یا متن جایگزین تصویر است، alt در واقع متنی است که اگر تصویر به هر دلیل بارگذاری نشود جایگزین قاب خالی محل درج تصویر خواهد شد و به نوعی راهنمای کاربران است تا حداقل از محتوای تصویر مطلع شوند.
<img src="photo.jpg" alt="My Photo">

ویژگی title در تگ img


علاوه بر ویژگی alt که متن جایگزین تصویر است، از ویژگی title می توانیم برای هنگامی که کاربر ماوس را روی تصویر می برد جهت نمایش پیام به صورت بالن (Tooltip) استفاده کنیم، مقدار این ویژگی متن برای توضیح بیشتر در مورد تصویر است.
<img src="photo.jpg" alt="My Photo" title="نمایش تصویر در HTML">
هنگامی که کاربر نشانه گر ماوس را روی تصویر فرضی photo.jpg ببرد متن "نمایش تصویر در HTML" به صورت بالن ظاهر خواهد شد.

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


برای اینکه ارتفاع و عرض تصویر را در صفحات وب تعریف کنیم از دو ویژگی width و height در کنار سایر ویژگی های تگ img استفاده می کنیم، انجام این کار مخصوصا از نظر کسب رتبه بهتر در سئو و موتورهای جستجو اهمیت زیادی دارد.
<img src="photo.jpg" alt="My Photo" title="نمایش تصویر در HTML" width="200" height="100">
در ویژگی width و height مقادیر به صورت پیکسلی در نظر گرفته می شوند.
نکته: با توجه به اینکه امروزه کاربران از طیف وسیعی از دستگاه ها (موبایل، تبلت، لپ تاپ و...) برای پیمایش صفحات وب استفاده می کنند که ممکن است اندازه صفحه نمایش کوچکتری نسبت به مانیتورهای متداول داشته باشند، معمولا از استایل CSS برای ایجاد حالت تصاویر واکنشگرا (Responsive) استفاده می شود:
<style>
img {
    width: 100%;
}
</style>
در این خصوص در آموزش های مقدماتی CSS مفصلا صحبت خواهیم کرد.

ویژگی border در تگ img


از ویژگی border مخصوصا در مواقعی که به تصویر خود لینک می دهیم برای حذف حاشیه ها استفاده می شود، در برخی مرورگرها وقتی یک تصویر به صورت لینک شده (با تگ a) باشد در حالت پیش فرض نوار معمولا آب رنگی به عنوان حاشیه تصویر در نظر گرفته می شود، برای حذف این حالت می توانیم مقدار صفر را برای ویژگی border در نظر بگیریم، به طور مثال:
<img src="photo.jpg" alt="My Photo" title="نمایش تصویر در HTML" width="200" height="100" border="0">
نکته: در نسخه 5 HTML این ویژگی منسوخ شده و نباید دیگر استفاده شود، به جای ویژگی border می توانیم از معادل CSS آن استفاده کنیم:
<style>
img {
    border: 0;
}
</style>
مقادیر در این ویژگی عمدتا به صورت پیکسلی در نظر گرفته می شود.
کاربرد ویژگی border صرفا برای حذف خطوط حاشیه ای نیست، در صورت نیاز برای ترسیم این خطوط نیز می توانیم از خاصیت border در CSS استفاده کنیم:
<style>
img {
    border: 1px solid #E5E5E5;
    padding: 4px;
}
</style>
با در نظر گرفتن مقدار برای خاصیت padding خط ترسیم شده از لبه های تصویر به میزان 4 پیکسل فاصله می گیرد که جلوه ظاهری بهتری ایجاد خواهد کرد.

ویژگی usemap در تگ img


ویژگی هایی که پیشتر گفتیم معمولا برای اغلب تصاویر در صفحات وب کفایت می کنند، اما برای ایجاد قابلیت های تعاملی بیشتر در صورت نیاز می توانیم از خاصیت usemap و تگ های map و area برای تعریف نقاط قابل کلیک در تصویر استفاده کنیم، گاهی نیاز است که بیش از یک لینک را در تصویر قرار دهیم یا بخش خاصی از آن را قابل کلیک شدن کنیم، این دسته از قابلیت ها با خاصیت usemap در تگ img بر روی تصاویر قابل اعمال هستند، به طور مثال:
<img src="photo.jpg" alt="My Photo" title="نمایش تصویر در HTML" width="200" height="100" border="0" usemap="#map-id">
<map name="img-map" id="map-id">
<area shape="rect" coords="100,120,250,170" alt="محدوده مستطیل مربع" href="image-page-1.html">
<area shape="poly" coords="30,180,150,155,180,230" alt="محدوده چند ضلعی" href="image-page-2.html">
<area shape="circle" coords="50,60,20" alt="محدوده دایره ای" href="image-page-3.html">
</map>
نکته مهم در این حالت استفاده درست از شکل اشیاء و نحوه مقداردهی محدوده ای از تصویر است که می خواهیم قابل کلیک شدن باشد، سه مقدار circle ،poly و rect برای قسمت shape در area کاربرد دارند:
- rect به معنی rectangle یا مربع مستطیل (چهار ضلعی) است.
- poly یک شیء چند ضلعی است.
- circle برای ترسیم محدوده قابل کلیک شدن به شکل دایره کاربرد دارد.
نکته 1: همان طور که در نمونه کد مشخص است مقادیر ویژگی usemap آی دی در نظر گرفته شده برای تگ map است.
نکته 2: برای مشاهده پیش نمایش آنلاین خاصیت usemap و تگ های map و area لطفا به انتهای این آموزش مراجعه کنید.

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


برای اینکه نقاط قابل کلیک شدن تصاویر را به درستی تعریف کنیم باید با نحوه مقداردهی صحیح برای شکل های متفاوت در تگ area آشنا باشیم:
- برای تعیین محدوده اشیاء rect یا مربع مستطیل (چهار ضلعی) در تصویر به ترتیب از چهار عدد به عنوان تعیین فاصله اضلاع محدوده، ضلع چپ از سمت چپ (left)، ضلع بالا از سمت بالا (top)، ضلع راست از چپ به راست (right) و ظلع پائین از بالا به پائین (bottom) استفاده می شود، به عبارتی میزان فاصله چهار ضلع از سمت چپ و بالای تصویر و همچنین به سمت راست و پائین تصویر را برای قابل کلیک بودن تعریف می کنیم:
<area shape="rect" coords="0,0,100,100" href="https://webgoo.ir">
- برای محدوده اشیاء چندگانه یا poly باید از 6 مقدار یا بیشتر استفاده کنیم، این مقادیر به صورت x1,y1,x2,y2,x3,y3 نقاطی را به هم متصل و موقعیت محل قابل کلیک شدن را به شکل چند ضلعی ترسیم می کنند:
<area shape="poly" coords="25,100,120,50,260,220" href="https://webgoo.ir">
- نهایتا برای محدوده اشیاء دایره ای شکل یا circle باید سه مقدار فاصله مرکز دایره از سمت چپ، بالا و شعاع (center-x، center-y و radius) را تعیین کنیم:
<area shape="circle" coords="100,100,40" href="https://webgoo.ir">
نکته: برای مشاهده پیش نمایش آنلاین خاصیت usemap و تگ های map و area لطفا به انتهای این آموزش مراجعه کنید.
HTML Map Area
برای سهولت کار می توانیم تصویر مورد نظر را در برنامه Paint ویندوز اجرا و از قسمت View گزینه Ruler را انتخاب نمائیم، در این حالت با بردن نشانه گر ماوس روی نقاط مختلف تصویر مختصات پیکسلی در گوشه چپ برنامه نمایش داده می شود.

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


برای بررسی تمام ویژگی هایی که در این آموزش مرور کردیم می توانیم از کد و پیش نمایش آنلاین زیر استفاده کنیم:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | نمايش تصوير در صفحات وب</title>
<!-- Webgoo.ir -->
<style>
body{
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
direction:rtl;
}
img{
border: 0;
}
area{
    border: 1px solid #c00;
}
</style>
</head>
<body>
<img src="example-image.jpg" alt="Example Image" title="نمونه تصوير در HTML" width="338" height="338" usemap="#img-map">
<map name="img-map" id="img-map">
<area shape="rect" coords="26,150,130,185" alt="محدوده مستطيل مربع" href="#1">
<area shape="poly" coords="13,294,67,252,112,317" alt="محدوده چند ضلعي" href="#2">
<area shape="circle" coords="275,245,50" alt="محدوده دايره اي" href="#3">
</map>
<hr>
براي بررسي ويژگي usemap و تگ هاي map و area ماوس را بر روي نقاط مختلف تصوير ببريد.
</body>
</html>
پیش نمایش آنلاین
sectionدسته بندی: آموزش مقدماتی » HTML
related مطالب بیشتر:
» تگ های اصلی و کلیدی HTML
» متاتگ ها (Meta Tags) و کاربرد آنها در صفحات وب (HTML)
» آشنایی با مفهوم Semantic در HTML
» کاربرد تگ font و ویژگی های فونت در HTML
» فرمت بندی و کار با متن و پاراگراف در HTML
commentنظرات (۵۲ یادداشت برای این مطلب ارسال شده است)
more یادداشت های جدید بر اساس تاریخ ارسال در انتهای یادداشت های موجود نمایش داده می شوند.
نویسنده: 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 آشنا باشید، عکس را از سایت های گرافیکی دانلود کنید!
more لطفا پیش از ارسال یادداشت نکات زیر را مد نظر داشته باشید:
- مواردی که به کلی خارج از موضوع این مطلب هستند را در فرم منوی "تماس با ما" مطرح و پاسخ را از طریق ایمیل دریافت کنید.
- به سوالات کلی، مبهم، غیرضروری و مشکلاتی که تلاشی برای رفع آن نکرده باشید پاسخ خاصی داده نخواهد شد.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین قرار دهید تا امکان تست و بررسی وجود داشته باشد.
- تمام یادداشت ها بررسی و برای هر کاربر زمان مشخصی جهت پاسخگویی در نظر گرفته می شود، لذا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.




7 × 6
 refresh
نکته:
با توجه به تاریخ نگارش آموزش های سایت و پیشرفت تکنولوژی های مرتبط با وب در سالیان اخیر، محتوای برخی از مطالب قدیمی ممکن است نیاز به ویرایش و به روزرسانی داشته باشد که این کار هم زمان با تهیه نسخه جدید «وبگو» به مرور در حال انجام است، لطفا در استفاده از مطالب سایت به این نکته دقت داشته و حتی المقدور از چند منبع مختلف استفاده نمائید.
آخرین دیدگاه ها
form نادی
در:
سلام من دارم تو ری اکت از تگ p استفاده میکنم باید چیکار کنم که نقطه رو نچسبونه به اول خط!؟
۱۰:۵۹:۵۴ ۱۳۹۹/۰۱/۱۱

form amir
در:
سلام و ارادت سال نو مبارک ... من یه صفحه دارم که شامل یه سری پست هست و میخوام امکان لایک مطالب پست...
۱۳:۲۲:۲۱ ۱۳۹۹/۰۱/۱۰

form hadis
در:
سلام من تازه کارم میخاستم بدون اون قسمت درباره وبلاگ تعداد سطرها رو بیشتر و هم طرف راست و هم طرف چپ باشه میشه...
۰۴:۵۲:۱۸ ۱۳۹۹/۰۱/۱۰

form نیلوفر
در:
سلام من منوی سایتم فونتش بهم ریخته من هیچ دستکاری نکردم سایت وردپرسی هستش لطفا اگر اطلاعاتی دارین به من بدید ممنونم
۱۸:۵۹:۵۲ ۱۳۹۹/۰۱/۰۵

form محمود
در:
سلام. ممنون از راهنمایتان و متشکرم. دوباره مزاحم می شوم.
۱۰:۵۹:۴۷ ۱۳۹۹/۰۱/۰۵

form mahdi
در:
سلام استاد عزیز ، عذر میخوام من سوال زیاد میپرسم ، میخواستم بدونم چه توی css و چه javascript ما ie8 رو در نظر بگیریم...
۱۲:۱۳:۲۸ ۱۳۹۹/۰۱/۰۴

form محمود
در:
سلام و عرض ادب. وقتی روی فایل pdf روی سایتم کلیک می شود ،PDF در همان تب باز می شود ولی من می خام...
۱۱:۵۵:۱۸ ۱۳۹۹/۰۱/۰۴

form mahdi
در:
سلام استاد عزیز ، Bubble یا حباب دقیقا یعنی چی ؟ یعنی گسترده شدن رویداد یک عنصر تا عنصر فرزندش؟
۱۰:۴۱:۵۴ ۱۳۹۹/۰۱/۰۴

form D.A.Y.A.N.A
در:
سلام یه سوال داشتم وقتی که میخوام وب رو تو موتورهای جست و جو قرار بدیم اون که کد به ما...
۱۴:۵۳:۲۶ ۱۳۹۹/۰۱/۰۳

form محمود
در:
سلام و احترام. خیلی عالی بود، بسیار متشکر هستم، تمام.
۱۲:۵۴:۲۳ ۱۳۹۹/۰۱/۰۳

form mimi
در:
سلام. روی میهن بلاگ وبلاگ دارم و قالبش رو خودم تهیه کردم. چند ماهه که قالب وبلاگ همینه. رفرنس کدهای css در یک سایت...
۱۰:۰۲:۱۳ ۱۳۹۹/۰۱/۰۳

form محمود
در:
سلام استاد گرامی قبلن از اینکه سایت بسیار پر بار ، عالی و بدرد بخور دارید به شما تبریک می گویم. من می...
۱۳:۰۸:۲۰ ۱۳۹۹/۰۱/۰۲

form mahdi
در:
سلام استاد ، یه سوالی داشتم ، من باید دونه دونه ایونت ها رو یاد بگیرم ؟ چون خیلیاشون رو دیدم که اصلا الکی هستن...
۲۰:۲۸:۱۴ ۱۳۹۹/۰۱/۰۱

form mahdi
در:
سلام استاد عزیز و گرامی و با معرفت ، سال نو رو تبریک میگم بهت امیدوارم خودت و خانوادت سالم و سلامت و همدل و...
۱۹:۴۶:۴۰ ۱۳۹۸/۱۲/۲۹

form Meysam
در:
با سلام میخواستم وقتی پست وبلاگ باز میشه بجای post130 بیاد عنوان پست تو لینک قرار بگیره یجوری میخوام باشه که وقتی پست تو...
۱۱:۴۲:۴۴ ۱۳۹۸/۱۲/۲۸
آگهی