استفاده از تصاویر در صفحات وب باعث جذابیت مطالب و محتوای صفحه ی شما می شود. همیشه سعی کنید تا بیشترین استفاده از تصاویر را داشته باشید تا کاربران مطالب سایت شما را ورق بزنند. استفاده بهینه نه بیش از اندازه مانند برخی سایت های زرد یا تبلیغاتی که باعث رنجش کاربر و زدگی از سایت می شوند. استفاده از تصاویر مناسب در جای مناسب. همیشه سعی کنید از تصاویر اورجینال استفاده کنید نه استفاده از تصاویر آماده. روی طراحی تصاویر (هرچند ساده) وقت بذارین. در این مطلب به طور ریز و تخصصی با قرار دادن تصاویر در صفحات HTML آشنا می شیم. با ما در ادامه مطلب همراه باشید…

قرار دادن تصاویر در html با تگ <img> امکان پذیر است. شکل کلی این تگ و صفات مهم آن در زیر آمده است:

 

ویژگی src:

این ویژگی آدرس فایل تصویر را دریافت می کند. اگر فایل تصویر در کنار فایل html باشد، شما می توانید تنها نام فایل تصویر را بنویسید. مثلا اگر فایل html شما در آدرس D:\index.html باشد و تصویر شما نیز در همان دایرکتوری باشد مثلا در آدرس D:\image.jpg باشد، کد شما به شکل زیر خواهد بود:

 

ویژگیalt:

اگر تصویر شما به دلایلی نتواند لود شود این عبارت جایگزین تصویر می شود. بنابراین مقدار این ویژگی باید یک عبارت رشته ای باشد.

ویژگیheight:

ارتفاع تصویر را بر اساس پیکسل تعیین می کند.

ویژگیwidth:

عرض تصویر را بر اساس پیکسل تعیین می کند.

ویژگیtitle:

توضیحات به طور کامل داده شده.

ویژگیborder:

مقدار قطر لبه را تنظیم می کند. گاهی اوقات ناخواسته مرورگر در لبه تصویر خطی می اندازد که مربوط به ویژگی border است. اگر نمی خواهید این لبه در کنار تصویر ایجاد شود مقدار این ویژگی را برابر با 0 قرار دهید و اگر می خواهید تصویرتان لبه داشته باشد مقدار دلخواه خود را به آن بدهید.

تصویر بدون لبه:

کار با تصاویر در HTML

تصویر بدون لبه

تصویر با لبه به قطر 2:

کار با تصاویر در HTML

تصویر با لبه به قطر 2

ویژگیusemap:

در ادامه توضیحات داده خواهد شد.

 

چگونه یک تصویر مانند یک لینک عمل کند؟

گاهی اوقات به جای اینکه لینک ما حاوی عبارتی باشد و با کلیک کردن روی عبارتی به آدرسی برویم لازم است که به جای عبارت از یک تصویر استفاده کنیم و با کلیک روی تصویر به آدرسی برویم. این عمل بسیار ساده است و تنها باید یک لینک را با یک تصویر ترکیب کنیم و به جای عبارتی که برای لینک نمایش داده می شود تگ تصویر را جایگزین کنیم. مثال آن در زیر نمایش داده شده است:

 

و خروجی آن به شکل زیر است:

کار با تصاویر در HTML

که با کلیک بر روی تصویر سایت گوگل باز می شود.

 

نقشه ی تصویری:

با استفاده از نقشه ی تصویری شما این امکان را دارید که بر روی تصویر چند لینک در قسمت های مختلف تصویر قرار دهید. شما باید برای لینک ها و قسمت های مختلف تصویر یک نقشه درست کرده و آن را به تصویر پیوست کنید. همچنین شما می توانید یک نقشه را برای چندین تصویر استفاده کنید. پس ابتدا باید نقشه را طراحی کنید. تگ نقشه برابر با <map> است. چنانکه گفته شد هر تصویر می تواند شامل چند لینک باشد. این لینک ها بین دو تگ <map> و </map> قرار می گیرند و با <area/> تعریف می شوند. شکل و ساختار کلی تگ های <map> و <area/> نمایش داده شده است:

 

ویژگی id در تگ <map> وسیله ی اتصال به تصویر ماست. همانطور که گفته شد هر لینک با تگ <area/> تعریف می شود.

ویژگیshape:

این ویژگی می تواند دارای مقادیر مختلف باشد که در زیر به آنها اشاره شده است:

Rect: این مقدار برابر با مستطیل است که از آن بیشتر از بقیه استفاده می شود.

Circle: دایره شکل

Poly: چند ضلعی

ویژگیcords:

این ویژگی مختصات لینک را بر اساس ویژگی shape دریافت می کند. در زیر به مقایر مورد نیاز برای هریک اشاره شده است:

Rect: برای این مفدار 4 عدد دریافت می شود که شامل x و y های مختصات گوشه و بالا سمت چپ و مختصات گوشه پایین سمت راست می باشد.

Circle: برای این مقدار 3 عدد دریافت می کند که شامل x و y مرکز دایره و سومین عدد شعاع دایره است.

Poly: تعداد دریافت های آن دلخواه است و شامل x و y های n ضلعی دلخواه می باشد.

 

در زیر مثالی از کدهای بالا آمده است:

 

این نقشه شامل دو لینک می باشد که هر دو به شکل مستطیل است با مختصات داده شده.

حالا برای اتصال به تصویر کافی است تا ویژگی usemap از تگ تصویر (<img/>) را برابر با id تگ <map> قرار دهیم.

توجه: همان طور که قبلا گفته شده برای شناخت تگ ها با استفاده از id آن ها باید قبل از مقدار id از کاراکتر # استفاده کنیم.

بنابراین کد تصویر انتهایی برابر با کد زیر می باشد:

 

که خروجی آن به شکل زیر خواهد بود:

کار با تصاویر در HTML

البته تصویر به صورت عادی نمایش داده می شود و نوشته های روی تصویر فقط برای درک بهتر موضوع می باشد.