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 مطالب بیشتر:
» آشنایی با مفهوم Semantic در HTML
» نحوه ایجاد لینک در HTML
» فرمت بندی و کار با متن و پاراگراف در HTML
» لایه بندی در HTML با تگ div و span
» تگ های اصلی و کلیدی 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 لطفا پیش از ارسال یادداشت نکات زیر را مد نظر داشته باشید:
- مواردی که به کلی خارج از موضوع این مطلب هستند را در فرم منوی "تماس با ما" مطرح و پاسخ را از طریق ایمیل دریافت کنید.
- به سوالات کلی، مبهم، غیرضروری و مشکلاتی که تلاشی برای رفع آن نکرده باشید پاسخ خاصی داده نخواهد شد.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین قرار دهید تا امکان تست و بررسی وجود داشته باشد.
- تمام یادداشت ها بررسی و برای هر کاربر زمان مشخصی جهت پاسخگویی در نظر گرفته می شود، لذا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.




8 × 8
 refresh
نکته:
با توجه به تاریخ نگارش آموزش های سایت و پیشرفت تکنولوژی های مرتبط با وب در سالیان اخیر، محتوای برخی از مطالب قدیمی ممکن است نیاز به ویرایش و به روزرسانی داشته باشد که این کار هم زمان با تهیه نسخه جدید «وبگو» به مرور در حال انجام است، لطفا در استفاده از مطالب سایت به این نکته دقت داشته و حتی المقدور از چند منبع مختلف استفاده نمائید.
آخرین دیدگاه ها
form مصطفی
در:
سلام لطفا بررسی کنید کد زیر چه مرگشه عمل نمی کنه ممنون
<?php $servername = "localhost"; ...
۱۶:۴۸:۲۲ ۱۳۹۸/۰۹/۱۸

form حسن
در:
سلام خسته نباشید میخواستم بدونم تابع
file_get_contents
سمت سرور اجرا میشه؟ یعنی یوزر نمیفهمه که تابع اجرا شده؟ و اینکه ادرس url...
۱۱:۳۱:۳۵ ۱۳۹۸/۰۹/۱۶

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

form نرگس
در:
یه سوال دبیرمون بهم داده که با استفاده از آرایه پنج نمره رو دریافت کرده و در حلقه for معدلشان را محاسبه کرده و نمایش...
۱۳:۰۳:۵۵ ۱۳۹۸/۰۹/۱۳

form محمد صادق نصرتی رامش
در:
چکونه لینک بگذارم و پول در بیاورم؟
۱۶:۰۵:۳۴ ۱۳۹۸/۰۹/۱۱

form مصطفی
در:
ببخشید چرا قسمت جستجوی سایتتون عمل نمیکنه!؟ دنبال مقاله راجع سشن ها و ساخت پنل مدیریت برای سی ام اسم میگردم یادمه یه مقاله قبلا...
۰۰:۱۹:۰۳ ۱۳۹۸/۰۹/۰۸

form مصطفی
در:
سلام نه هر چه کردم کد درست عمل نکرد و مجبور شدم یک ایندکس بسازم لینک بزارم با این کار قصد دارم هم بتونم سایت...
۲۱:۵۶:۰۱ ۱۳۹۸/۰۹/۰۷

form مصطفی
در:
سلام ادرس سایت من
www.ory.ir
است من 2 تا قالب درست کردم در دو پوشه اما با دستور زیر در روت مشکل دارم و...
۰۸:۰۳:۳۵ ۱۳۹۸/۰۹/۰۷

form مصطفی
در:
سلام . وقتی داریم یک رکورد رو آپدیت میکنیم ، چطوری بفهمیم کدوم ستون ها داره آپدیت میشه و اونارو بفرستیم به یک view ؟
۱۴:۳۴:۵۵ ۱۳۹۸/۰۹/۰۶

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

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

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

form پرتو
در:
با عرض سلام و خسته نباشید امیدوارم حالتون خوب باشه من دو سه سال پیش وبلاگم رو حذف کردم ایا امکانش هست برگرده؟ ادرس...
۱۴:۵۵:۵۲ ۱۳۹۸/۰۸/۲۰

form علی
در:
سلام من نمی تونم html tag رو چطور در وبلاگم قرار بدم وبلاگم اینه
tagtak.blog.ir
۱۰:۲۳:۳۴ ۱۳۹۸/۰۸/۲۰

form حمید
در:
سلام. خسته نباشید. من میخاستم استایل فیلدهای فرمم رو تغییر بدم منتهی نمیدونم از چه کدهایی باید استفاده کنم. برای اینکه فرمی به شکل...
۱۰:۳۶:۱۹ ۱۳۹۸/۰۸/۱۹
آگهی
موسسه خیریه سگال