پارس جوم ::  انجمن های تخصصی جوملا
تغییر رنگ آیکن در جوملا - نسخه‌ی قابل چاپ

+- پارس جوم :: انجمن های تخصصی جوملا (https://forums.parsjoom.ir)
+-- انجمن: پشتیبانی (/forum-70.html)
+--- انجمن: مباحث و مشکلات عمومی (/forum-33.html)
+--- موضوع: تغییر رنگ آیکن در جوملا (/thread-8839.html)



تغییر رنگ آیکن در جوملا - gamentech - ۱۳-۸-۱۳۹۱ ۰۲:۳۵ صبح

سلام دوستان گل
پیشاپیش عیدتون مبارک
یک سوالی دارم که فکر کنم مربوط به کد می شه
تصویر زیر رو نگاه کنید
[تصویر:  21168446768461756247.png]
من چطوری می تونم کاری کنم که وقتی تصویر رو در ادیتور گذاشتم
زمانی که ماوس رو ان نیست مثل عکس اولی خاکستری باشه ولی وقتی ماوس رو روی اون می برم عکسش رنگی بشه؟


RE: تغییر رنگ آیکن در جوملا - صدرا حسابی - ۱۳-۸-۱۳۹۱ ۰۵:۰۲ صبح

باید از 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 تا پایین بیاد، و به همون اندازه قبلی یه برش بزنه.