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

تگ 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 لطفا به انتهای این آموزش مراجعه کنید.

برای سهولت کار می توانیم تصویر مورد نظر را در برنامه 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>

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