انتخاب یک قسمت از عکس با css

[mehdi.web]

با سلام به همه دوستان . میخواهم با سی اس اس یک قسمت از یک عکس رو انتخاب کنم . برای مثال اگر در پایین سایت میهن بلاگ مشاهده کرده باشید با رفتن بر روی لوگوی سایت عکس رنگی میشه . میدونم که با فایرباگ میشه کدشو فهمید . اینکار رو هم کردم اما میخوام درباره کدش اگه زحمتی نیست برام توضیح بدین که چجوری میشه که اینجوری میشه

 

[dexted]

سلام خدمت شما دوست عزیز

این تکنیکی که شما دنبالش هستی رو CSS Sprite میگن که با کمتر کردن request های عکس های درون صفحه باعث بالارفتن سرعت لود صفحه میشه.

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

کار به این صورت هست که عکس ما یه عکس چند قسمتی هست که هر قسمت در یک مختصاتی از عکس قرار دارن.مثلا در اینجا اون عکس لوگو که قرار داده شده وقتی که غیر فعال هست در حقیقت مختصات 0و0 رو داره به ما نشون میده و وقتی موس میاد روش مختصات به 0و-200 تغییر پیدا میکنه

بزارین همینجا مثال بزنم:
[CSSS]
.footer_logo{
background: url("../../images/template_ver2/footer_logo.png") no-repeat scroll 0 0 transparent;
float: right;
height: 66px;
width: 114px;
}
.footer_logo:hover{
background-position:0 -200px;
}
[/CSSS]
خوب حالا توضیحش:
اول کد یعنی وقتی موس روی عنصر مورد نظر نیست اینجا ما اون قسمت غیر فعال عکس رو نشون میدیم.البته توجه کنید که حتما باید height و width رو به اندازه مورد نظر بذاریم تا فقط قسمتی که میخواهیم رو ببینیم.(اون 0 0 که در background هست یعنی مختصات 0و0 عکس رو به ما نشون بده)
قسمت دوم کد :
:hover یعنی اینکه هر موقع موس روی عنصر با کلاس مورد نظر رفت تغییرات زیر اعمال بشه
در اینجا ما نیاز داریم قسمت فعال رو نشون بدیم (یعنی لوگوی رنگی) که در مختصات 0 و -200 عکس قرار داره.

امیدوارم مشکلتون حل شده باشه
یه لینک هم گذاشتم که خیلی بهتر از من توضیح داده
http://css-tricks.com/css-sprites/

مشکلی بود در خدمتم

 

[mehdi.web]

با سلام به همه دوستان و تشکر از dexted عزیز
خیلی ممنون از راهنمایی تون .
یه سوالی برام پیش اومد (ببخشید من مبتدی هستم)
از کجا مختصات بفهمیم .
سوال بعدی این هستش که در پایین سایت کلوب همین تروفند اجرا شده ولی مختصات رو 0 قرار داده
بببینید :
[HTMLS].footerNew_copy_logo {
background: url("../../images/logo/logo_footer.gif") no-repeat scroll 0 -40px transparent;
float: right;
height: 37px;
width: 114px;


}

.footerNew_copy_logo:hover {
background-position: right 0;


}


[/HTMLS]
چجوری ؟؟؟
با تشکر از شما
دوستون دارم

 

[dexted]

سلام دوباره
خواهش می کنم دوست من . ما اینجا هستیم که دانسته های خودمون رو (کم یا زیاد) با هم به اشتراک بذاریم

خوب .ببینید همون طور که گفتم ما میایم هر دو عکس رو (حالت فعال و غیر فعال) در یک عکس با هم ذخیره می کنیم.عکس های دوتا مثال رو ذخیره کردم و ضمیمه هست
در مورد سایت کلوب قسمت غیر فعال پایین قرار گرفته پس در حالتی که موس روی اون نیست باید قسمت پایین رو نشون بده یعنی :
[CSSS]
background-position:0 -40px
[/CSSS]
که به خاطر اینکه به صورت کوتاه شده هست به صورت 0 -40px در ادامه background اومده
و در حالت hover قسمت بالایی رو نشون میده:
[CSSS]
background-position:0 0
[/CSSS]
حالا چون توی سایت میهن بلاگ خود عکس برعکس بود اول به طور پیش فرض 0 0 رو داشتیم و در حالت فعال 0 -400 بوده

در مورد اینکه مختصات رو چه جوری بفهمیم : من معمولا خودم اول عکس رو بدونه درست کردن جایگاهش اول میذارم بعد با فایر باگ این دو تا عدد رو تغییر میدم تا به نتیجه برسم (این دو تا عدد اولی محور x و دومی محور y هست یعنی مثلا وقتی عدد دوم رو میزنی -200 یعنی 200px در راستای خلاف جهت محور y)و البته مختصات از گوشه بالا سمت چپ عکس محاسبه میشه.

به هر حال امیدوارم رسونده باشم.
اون لینکی که دادم بسیار عالی و بهتر از من توضیح داده باز هم برای توضیح بیشتر لینک زیر هم مفید هست.
http://www.webtarget.ir/blog/آموزش-css-sprite-افزایش-سرعت/