سبد خرید (0)

تبلیغات

تکه تکه کردن تصاویر در CSS

نمایش بخشی از عکس - تکه تکه کردن تصاویر

Wiki

می توان مجموعه ای از تصاویر را داخل یک عکسِ تنها قرار داد.

یک صفه وب با تعداد زیادی عکس، می تواند زمان زیادی را برای بارگذاری بگیرد.

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


یک مثال ساده از تکه تکه کردن عکس

Wiki

بجای استفاده از سه عکس، می توانیم از یک عکس تنها استفاده کنیم (img_navsprites.gif):

navigation images

با CSS می توانیم فقط بخشی از عکس که نیاز داریم را نمایش دهیم.

در مثال زیر، مشخص می کنیم که کدام بخش از عکس "img_navsprites.gif" نمایش داده شود:

مثال (تکه تکه کردن تصاویر در CSS)

img.home
{
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)

Wiki

می توان از تکه تکه کردن تصاویر در ساخت، لیست های هدایتی (navigation list) استفاده کرد.

ما از لیست های HTML استفاده خواهیم کرد، چونکه آنها می توانند لینک باشند و همچنین خصوصیت background را پشتیبانی می کنند:

مثال (تکه تکه کردن تصاویر در CSS)

#navlist{position:relative;}
#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

Wiki

حالا می خواهیم افکت Hover را به لیست هدایتیمان اضافه کنیم.

عکس جدیدمان ("img_navsprites_hover.gif") شامل 6 تکه تصویر کوچک است، 3 عکس برای حالت معمولی و 3 عکس دیگر برای موقعی که اشاره گر موس روی آنها قرار بگیرد:

navigation images

بخاطر اینکه 6 عکس مختلف را داخل یک عکس تنها قرار دادیم، زمانی که اشاره گر موس روی تصاویر قرار می گیرد تأخیر بارگذاری وجود نخواهد داشت.

برای اضافه کردن افکت Hover تنها 3 خط کد به مثال قبلی اضافه می کنیم:

مثال (تکه تکه کردن تصاویر در CSS)

#home a:hover{background: url('img_navsprites_hover.gif') 0 -45px;}
#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" پایین تر مکان دهی کنیم.

دیدگاه‌ها  

0 # Guest 1396-07-07 10:00
سلام خسته نباشید
ببخشید در اولین کد که یک تصویر 1*1 برای تگ image قرار دادین، کمی در مورد اون تصویر توضیح میدین یعنی زیر تصویر اصلی قرار میگیره !
تکه تکه کردن تصاویر رو اصلا متوجه نشدم!!
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # امیر پهلوان صادق 1396-07-10 13:57
سلام
قبل از هر چیز باید هدف از این کار یعنی تکه تکه کردن تصاویر را متوجه شوید.
همان طور که می دانید در یک صفحه وب، می توان تصاویر مختلفی استفاده نمود، چه بخواهیم و چه نخواهیم تعداد این تصاویر زیاد است و باید همگی سمت کلاینت لود شود. اما لود شدن تصاویر سمت کاربر هزینه بر است یعنی کاربر باید منتظر بماند تا تصاویر لود شود. از طرفی هر چه تعداد تصاویر و درخواست ها از سرور کمتر باشد، نمره بهتری از نظر الکسا و گوگل خواهیم گرفت.
خوب راه حل چیست ...!؟
یکی از راه حل های خوبی که ارائه شده این است که تمام آیکن ها و تصاویر مورد نیاز سایتمان را تحت یک تصویر آماده کنیم و در جاهای مختلف از آن استفاده کنیم. یعنی مثلا اگر در بالا و سمت چپ تصویر مذکور، آیکن جستجو یا همان ذره بین را قرار داده ایم باید توسط آموزشی که در مطلب بالا داده شده است، همان قسمت مورد نظر را از تصویر اصلی استخراج کرده و در جای مورد نظرمان نمایش دهیم.
به این ترتیب بجای لود تک تک تصاویر، فقط یک تصویر سمت کاربر لود می شود که بسیار در راندمان سایتمان تأثیر خواهد گذاشت.
اما درباره قسمت اول سوالتون که فرموده بودید از یک تصویر 1x1 برای ویژگی Src استفاده شده باید عرض کنم که در مطلب بالا هدف ما آموزش بوده و در عمل هیچ گاه این کار رو نمی کنیم. یعنی بجای اینکه از تگ img برای نمایش تصویر استفاده کنیم می توانیم از تگ li استفاده کنیم.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # Ashkan Jamshidi 1394-04-27 15:19
با سلام و تشکر از زحمت های فراوانتان

ایا راهی هست که بشه موقعیت تکه ای از عکس را با نرم افزار فتوشاپ و یا... بدست اورد؟
چون به صورت دستی واقعا سخت و طاقت فرساست و کلی باید جهت هارو کم و زیاد کرد
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # AliReza3688 1395-08-05 09:05
در فتوشاپ کلید ctrl + R را بزنید تا خط کش بیاد. اونوقت به کمک اون اندازه ها رو ببینید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # احسان عباسی 1394-04-27 15:56
اگر از مرورگر گوگل کروم استفاده می کنید، به قسمت Apps در گوشه ی بالا و سمت چپ برید. وارد بخش webstore شوید و در صفحه ی بازشده عبارت page ruler را سرچ کنید و این افزونه را نصب کنید. با این افزونه که به نوعی یک خط کش است مشکلتان حل خواهد شد.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # مهدی ربانی 1394-01-27 17:19
میشه عکس بک گراند یک تگ را این طوری انتخاب کرد؟
اگر میشه بگید چگونه؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # امیر پهلوان صادق 1394-01-28 11:48
ببشخید متوجه سوالتون نمی شم...! توجه داشته باشید که علامت های < و > برای حفظ امنیت سایت بصورت اتوماتیک حذف می شوند.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # مهدی ربانی 1394-01-28 11:55
نه این علامت ها را به کار نبردم. منظورم از اینطوری اینه که مثلا یک قسمتی از یک عکس را برای بک گراند انتخاب کرد.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # امیر پهلوان صادق 1394-01-28 12:07
توجه داشته باشید که در آموش بالا قسمت "افکت Hover" دقیقاً همین کار را انجام داده ایم.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # مهدی ربانی 1393-12-23 00:12
جل الخالق. چه کارا که نمی کنه این css
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # مجتبی آخوندی 1393-08-27 13:47
به نقل از mahde:
تکه کردن تصاویر یعنی چی
تکه تکه کردن تصاویر درسته
دو ساعت فکر میکردم که تکه کردن تصاویر یعنی چی!!!!


بهترین تیتر "انتخاب بخشی از تصویر برای نمایش" هستش
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # امیر پهلوان صادق 1393-08-28 15:24
این تیتر، از کادر می زنه بیرون ...! ولی بروی چشم، تیتر رو به "نمایش بخشی از عکس" تغییر دادم.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # mahde 1393-01-01 01:15
تکه کردن تصاویر یعنی چی
تکه تکه کردن تصاویر درسته
دو ساعت فکر میکردم که تکه کردن تصاویر یعنی چی!!!!
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # milad6to9 1395-09-15 18:29
سلام
یعنی شما چندتا عکس بهم وصل کنید و یک عکس کلی بسازید .
بعد فقط با یک بار لود عکس کلی می توانید با بریدن آن به روشی که توضیح داده شده ("به نظر من عالی گفتند")می توانید آن قسمتی را که می خواهید به کاربر نشان دهید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن

آموزش صوتی CSS

بستن
مدرس:
سوال و جواب:

ابزاری که در پیش روی دارید یکی از ابزارهای بسیار کاربردی سایت بیاموز در زمینه آموزش است، این ابزار برای سهولت یادگیری شما کاربران محترم طراحی شده است.

فقط کافی است روی عنوان پاراگراف مورد نظرتان کلیک کنید تا پخش صدا آغاز شود ...!

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت پرداخت آنلاین - بانک پارسیان پرداخت آنلاین - بانک اقتصاد نوین پرداخت آنلاین - بانک سامان
 
دوره های آموزشی راه اندازی کسب و کارهای اینترنتی
تبلیغات اینترنتی