تکه تکه کردن تصاویر در CSS
نمایش بخشی از عکس - تکه تکه کردن تصاویر
می توان مجموعه ای از تصاویر را داخل یک عکسِ تنها قرار داد.
یک صفه وب با تعداد زیادی عکس، می تواند زمان زیادی را برای بارگذاری بگیرد.
در این روش، تعداد درخواست هایی که برای سرور ارسال می شود، کاهش خواهد یافت و پهنای باند را آزاد می کند.
یک مثال ساده از تکه تکه کردن عکس
بجای استفاده از سه عکس، می توانیم از یک عکس تنها استفاده کنیم (img_navsprites.gif):
با CSS می توانیم فقط بخشی از عکس که نیاز داریم را نمایش دهیم.
در مثال زیر، مشخص می کنیم که کدام بخش از عکس "img_navsprites.gif" نمایش داده شود:
مثال (تکه تکه کردن تصاویر در CSS)
{
width:46px;
height:44px;
background:url(img_navsprites.gif) 0 0;
}
توضیح مثال:
- به خاطر اینکه ویژگی src در تگ </ img> نمی تواند خالی باشد آنرا با عکس "img_trans.gif" مقداردهی می کنیم که یک عکس 1*1 و کاملاً شفاف است.
- باید عرض و ارتفاع بخشی از تصویر اصلی که می خواهیم نمایش داده شود را مشخص کنیم. (width:46px و height:44px)
- در قسمت آخر یعنی background:url(img_navsprites.gif) 0 0 ، عکس پس زمینه و مکان آنرا مشخص می کند. (ابتدا فاصله از سمت چپ و بعد فاصله از بالا)
این آسان ترین روش استفاده از تکه تکه کردن تصاویر است، در قسمت بعد استفاده از آن در لینک ها و افکت Hover را توضیح می دهیم.
ساخت لیست های هدایتی (navigation list)
می توان از تکه تکه کردن تصاویر در ساخت، لیست های هدایتی (navigation list) استفاده کرد.
ما از لیست های HTML استفاده خواهیم کرد، چونکه آنها می توانند لینک باشند و همچنین خصوصیت background را پشتیبانی می کنند:
مثال (تکه تکه کردن تصاویر در CSS)
#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
#navlist li, #navlist a{height:44px;display:block;}
#home{left:0px;width:46px;}
#home{background:url('img_navsprites.gif') 0 0;}
#prev{left:63px;width:43px;}
#prev{background:url('img_navsprites.gif') -47px 0;}
#next{left:129px;width:43px;}
#next{background:url('img_navsprites.gif') -91px 0;}
توضیح مثال:
- در گزینشگر اول یعنی navlist# خصوصیت position را با مقدار "relative" تنظیم کردیم تا اجازه دهد که عناصری که به صورت مطلق (absolute) مکان دهی شده اند داخل آن قرار گیرد.
- در گزینشگر دوم، در تمام تگ های <li> خصوصیت margin و padding آنها با مقدار "0" تنظیم می شود و با مقداردهی خصوصیت list-style با "none"، علامتگذاری لیست حذف می شود و در نهایت آنها را به صورت مطلق (absolute) مکان دهی می کنیم و فاصله از بالا را با مقدار "0" تنظیم می کنیم.
- در گزینشگر سوم، ارتفاع تمام تصاویر را با مقدار "44px" تنظیم می کنیم.
در ادامه Style و موقعیت هر بخش را مشخص می کنیم:
- در گزینشگر home# ، فاصله از سمت چپ "0" و عرض آن با مقدار "46px" تنظیم شده است، همچنین عکس پس زمینه و مکان آنرا مشخص می کنیم.
- در گزینگشر prev# ، فاصله از سمت چپ را با مقدار "63px" تنظیم می کنیم (در home# عرض با "46px" تنظیم شد که آنرا با مقدار 17px به عنوان فضای خالی جمع می کنیم) و در ادامه مانند قبل عرض را با مقدار "43px" تنظیم می کنیم و همچنین عکس پس زمینه و مکان آنرا نیر مشخص می کنیم.
- ...
افکت Hover
حالا می خواهیم افکت Hover را به لیست هدایتیمان اضافه کنیم.
عکس جدیدمان ("img_navsprites_hover.gif") شامل 6 تکه تصویر کوچک است، 3 عکس برای حالت معمولی و 3 عکس دیگر برای موقعی که اشاره گر موس روی آنها قرار بگیرد:
بخاطر اینکه 6 عکس مختلف را داخل یک عکس تنها قرار دادیم، زمانی که اشاره گر موس روی تصاویر قرار می گیرد تأخیر بارگذاری وجود نخواهد داشت.
برای اضافه کردن افکت Hover تنها 3 خط کد به مثال قبلی اضافه می کنیم:
مثال (تکه تکه کردن تصاویر در CSS)
#prev a:hover{background: url('img_navsprites_hover.gif') -47px -45px;}
#next a:hover{background: url('img_navsprites_hover.gif') -91px -45px;}
توضیح مثال:
- چونکه آیتم های لیست شامل تگ <a> هستند، ما می توانیم از شبه کلاس hover: استفاده کنیم.
- برای 3 گزینشگر بالا عکس "img_navsprites_hover.gif" را به عنوان پس زمینه تنظیم می کنیم.
- باید عکس پس زمینه را "45px" پایین تر مکان دهی کنیم.
- نوشته شده توسط امیر پهلوان صادق
- بازدید: 27040
دیدگاه‌ها
سلام خسته نباشید
ببخشید در اولین کد که یک تصویر 1*1 برای تگ image قرار دادین، کمی در مورد اون تصویر توضیح میدین یعنی زیر تصویر اصلی قرار میگیره !
تکه تکه کردن تصاویر رو اصلا متوجه نشدم!!
سلام
قبل از هر چیز باید هدف از این کار یعنی تکه تکه کردن تصاویر را متوجه شوید.
همان طور که می دانید در یک صفحه وب، می توان تصاویر مختلفی استفاده نمود، چه بخواهیم و چه نخواهیم تعداد این تصاویر زیاد است و باید همگی سمت کلاینت لود شود. اما لود شدن تصاویر سمت کاربر هزینه بر است یعنی کاربر باید منتظر بماند تا تصاویر لود شود. از طرفی هر چه تعداد تصاویر و درخواست ها از سرور کمتر باشد، نمره بهتری از نظر الکسا و گوگل خواهیم گرفت.
خوب راه حل چیست ...!؟
یکی از راه حل های خوبی که ارائه شده این است که تمام آیکن ها و تصاویر مورد نیاز سایتمان را تحت یک تصویر آماده کنیم و در جاهای مختلف از آن استفاده کنیم. یعنی مثلا اگر در بالا و سمت چپ تصویر مذکور، آیکن جستجو یا همان ذره بین را قرار داده ایم باید توسط آموزشی که در مطلب بالا داده شده است، همان قسمت مورد نظر را از تصویر اصلی استخراج کرده و در جای مورد نظرمان نمایش دهیم.
به این ترتیب بجای لود تک تک تصاویر، فقط یک تصویر سمت کاربر لود می شود که بسیار در راندمان سایتمان تأثیر خواهد گذاشت.
اما درباره قسمت اول سوالتون که فرموده بودید از یک تصویر 1x1 برای ویژگی Src استفاده شده باید عرض کنم که در مطلب بالا هدف ما آموزش بوده و در عمل هیچ گاه این کار رو نمی کنیم. یعنی بجای اینکه از تگ img برای نمایش تصویر استفاده کنیم می توانیم از تگ li استفاده کنیم.
با سلام و تشکر از زحمت های فراوانتان
ایا راهی هست که بشه موقعیت تکه ای از عکس را با نرم افزار فتوشاپ و یا... بدست اورد؟
چون به صورت دستی واقعا سخت و طاقت فرساست و کلی باید جهت هارو کم و زیاد کرد
در فتوشاپ کلید ctrl + R را بزنید تا خط کش بیاد. اونوقت به کمک اون اندازه ها رو ببینید.
اگر از مرورگر گوگل کروم استفاده می کنید، به قسمت Apps در گوشه ی بالا و سمت چپ برید. وارد بخش webstore شوید و در صفحه ی بازشده عبارت page ruler را سرچ کنید و این افزونه را نصب کنید. با این افزونه که به نوعی یک خط کش است مشکلتان حل خواهد شد.
میشه عکس بک گراند یک تگ را این طوری انتخاب کرد؟
اگر میشه بگید چگونه؟
ببشخید متوجه سوالتون نمی شم...! توجه داشته باشید که علامت های < و > برای حفظ امنیت سایت بصورت اتوماتیک حذف می شوند.
نه این علامت ها را به کار نبردم. منظورم از اینطوری اینه که مثلا یک قسمتی از یک عکس را برای بک گراند انتخاب کرد.
توجه داشته باشید که در آموش بالا قسمت "افکت Hover" دقیقاً همین کار را انجام داده ایم.
جل الخالق. چه کارا که نمی کنه این css
به نقل از mahde:
بهترین تیتر "انتخاب بخشی از تصویر برای نمایش" هستش
این تیتر، از کادر می زنه بیرون ...! ولی بروی چشم، تیتر رو به "نمایش بخشی از عکس" تغییر دادم.
تکه کردن تصاویر یعنی چی
تکه تکه کردن تصاویر درسته
دو ساعت فکر میکردم که تکه کردن تصاویر یعنی چی!!!!
سلام
یعنی شما چندتا عکس بهم وصل کنید و یک عکس کلی بسازید .
بعد فقط با یک بار لود عکس کلی می توانید با بریدن آن به روشی که توضیح داده شده ("به نظر من عالی گفتند")می توانید آن قسمتی را که می خواهید به کاربر نشان دهید.