قرار دادن عکس در صفحه وب

یکی از عناصری که باعث جذابیت در وب سایت میشود عنصر عکس یا همان  image  است. عکسها زیبایی خاصی به صفحات میبخشند ولی از طرف دیگر تولید دردسر هم میکنند، اگر شما تعداد زیادی عکس در یک صفحه بگذارید یا از عکسهایی با حجم زیاد استفاده کنید آن موقع است که بیننده باید مدت طولانی را صرف کند تا صفحه سایت شما را به طور کامل ببیند و همین موضوع باعث از دست دادن یک بیننده و یک نمره منفی به حساب میاید. همانطور که میدانید در کشور عزیزمان ایران سرعتهای اینترنت خیلی پایین هست و دیدن صفحات سنگین بسیارعذاب آور است البته بماند که بعضی وقتها همان یک ذره سرعت هم نداریم. پس همیشه تا جایی که میتوانید صفحه را سبک کنید تا برای بیننده خسته کننده نباشد. یک سایت موفق سایتی است که بیننده زیاد داشته باشد.

فرمتهای عکس در وب:

 خب بپردازیم به ادامه بحث ، عکسها دارای فرمتهای زیادی میباشند ولی فرمتهایی که در وب بکار برده میشوند، عبارتند از:

.gif (Graphic Interchange Format)

.jpeg (Joint Photographic Experts Group)

  .png (Portable Network Graphics)

عکسها با فرمت   .gif بیشترین استفاده را در وب دارند و محبوبترین نوع عکس است. این نوع فرمت 256 رنگ را پشتیبانی میکند و از ویژگیهای دیگر آن animation,  transparency, interlacing    است . البته محبوبیت آن بیشتر برای حجم کم آن است.

Transparency   به شفافیت یک عکس میگویند که آنرا پشت نما هم مینامند. این ویژگی است که یک عکس آنقدر شفاف است که شما میتوانید تا تصویر ، متن یا رنگ زیر آن عکس را ببینید.

Interlacing     گاهی وقتها شما منتظر میشوید تا یک عکس به دلیل بزرگی اندازه بارگذاری شود بعد آنرا ببینید اما اگر عکسی این ویژگی را داشته باشد کم کم عکس کامل خواهد شد یعنی خط به خط به عکس اضافه میشود تا کامل بارگذاری شود.مثال

Animation   عکسهای متحرک را می گویند وفقط این فرمت هست که از متحرک سازی عکس حمایت میکند.

 عکسهایی با فرمت   .jpeg حدود 16 میلیون رنگ را پشتیبانی میکنند ، نسبت به فرمت   .gif از حجم بالاتری برخوردار است ولی کیفیتش  بهتر است ، تمام ویژگیهای   gif    را دارد به غیر از Animation  . فرمت   .png نسبت به قبلیها جدیدتر است و مخلوطی از آنهاست یعنی کیفیت   jpeg   و حجم کم   gif    را دارد.

افزودن عکس به صفحه وب:

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

  <img src="images/pic01.gif">

  <img src="www.sitename.com/images/pic01.gif">

مثال

 Height, Width

این تگ خصوصیات دیگری هم دارد، یکی از آنها که کاربرد زیادی هم دارد خصوصیات طول   height و عرض width  میباشد که توسط آنها اندازه یک عکس را داخل صفحه میتوانید کنترل کنید. مقیاس اندازه گیری طول و عرض بر حسب پیکسل Pixel  میباشد، اگر شما این خصوصیات را کنترل نکنید عکس در اندازه اصلی خود ظاهر میشود. بطور مثال شما میخواهید عکسی را وارد کنید که در صفحه باید به اندازه 100×100 فضا اشغال کند:

<img src="images/pic01.gif" height="100" width="100">

مثال

این نکته را در نظر داشته باشید که سرعت کامل شدن عکس یعنی download  شدن آن در صفحه بستگی به حجم آن دارد نه اندازه عکس، پس میتوانید اندازه های یک عکس را اضافه کنید ولی دقت کنید که کیفیت عکس خراب نشود.

Alignment

شما میتوانید محل قرارگرفتن عکس را نسبت به عناصر اطراف خودش با خصوصیت align=” “تعیین کنید و میتوانید کلمات left,right,top,middle,bottom  را برای این خصوصیت بکار برید. بر فرض میخواهید که یک متن بعد از عکس و در وسط قرار گیرد:

<img src="images/pic01.gif"  align="middle"> This is a text

مثال

 در ضمن اگر میخواهید خود عکس در وسط صفحه قرارگیرد باید از تگ<center> قبل از تگ <img> استفاده کنید و بعد از آن </center> را بنویسید:

<center><img src="pic01.gif"></center>

مثال

 Border

اگر مایل هستید برای عکس کادر بگذارید میتوانید از خصوصیت border=” “   استفاده کنید و آنرا برابر با یک عدد قرار دهید که هر چه این عدد بزرگتر باشد ، کادر دور عکس هم ضخیم تر است به صورت پیش فرض border=”0”  است یعنی هیچ کادری مشاهده نمیشود.مثال

Alt

 تا حالا متوجه شدید که در یک وب سایت هنگامیکه نشانگر موس بر روی یک عکس که قرار میگیرد یک کادر متنی کوچک باز شده بنام tooltip و اطلاعاتی را راجع به آن عکس میدهد؟ پس شما هم اینکار را انجام دهید، خصوصیت alt="  "  را داخل تگ گذاشته و هر متنی را که جلویش بنویسید در صفحه هنگامیکه موس بر روی عکس قرار گیرد ، زیرنشانگر نمایان میشود. بهتر است که شما همیشه این کار را انجام دهید چون مرورگرهایی وجود دارد که عکس را نمایش نمیدهد پس با اینکار بیننده از حضور آن عکس خبر دار میشود.مثال

hspace, vspace

 دو خصوصیت دیگر هست که حاشیه و فضای خالی دور عکس را کنترل می کند، hspace=” “برای حاشیه چپ و راست عکس وvspace=” “ برای بالا و پایین. عددی را که وارد میکنید در مقیاس پیکسل است.مثال

Image link

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

<a href="www.sitename.com"><img src="images/sitelogo.gif"></a>

بر روی لوگوی زیر کلیک کنید تا به صفحه اصلی سایت هدایت شوید

 در ضمن میشود برای قسمتهای مختلف یک عکس لینکهایی به جاهای مختلف درست کرد. به فرض مثال ما یک عکس از نقشه ایران داریم و میخواهیم که روی هر استان کلیک شود ، آن قسمت لینک شود به صفحه مورد نظر. این حالت را Image map  می گویند که در بخش بعد آنرا توضیح خواهم داد.