تغییر رنگ آیکن در جوملا

[gamentech]

سلام دوستان گل
پیشاپیش عیدتون مبارک
یک سوالی دارم که فکر کنم مربوط به کد می شه
تصویر زیر رو نگاه کنید

من چطوری می تونم کاری کنم که وقتی تصویر رو در ادیتور گذاشتم
زمانی که ماوس رو ان نیست مثل عکس اولی خاکستری باشه ولی وقتی ماوس رو روی اون می برم عکسش رنگی بشه؟

[صدرا حسابی]

باید از background-position در css استفاده کنی، مثلا برای این عکس من می خوام در یک موقعیت این سبد خرید نشون داده بشه و وقتی موس روش رفت رنگش آبی بشه، برای این کار از این کد استفاده می کنم:

کد: (انتخاب همه)

#myposition {
    background: url( http://img4up.com/up2/21168446768461756247.png) no-repeat scroll 0 0;
    width: 50px;
    height: 30px;
}

کد: (انتخاب همه)

#myposition:hover {
    background-position: 0 -40px;
}

0 0 در کد اول مربوط به background-position هست که دقیقا گوشه بالای چپ نصویر می شه، و می گم از اون جا به عرض 50 و ارتفاع 30 عکس رو نشون بده، و در کد دوم در حالت hover، همین عکس موقعیت -40، یعنی نسبت به ارتفاع 40 تا پایین بیاد، و به همون اندازه قبلی یه برش بزنه.