سی اس اس – تغییر عکس در حالت Mouse Over

تغییر تصویر در حالت Mouse Over سی اس اس
برخی از طراحان برای نمایش یک تصویر دیگر در حالت Mouse Over از یک فایل دیگر استفاده می کنند.
این امر باعث می شود، زمانیکه کاربر با موس روی تصویر یا دکمه سایت می رود، چند ثانیه ای برای دانلود و سپس نمایش تصویر بعدی زمان صرف شود.
اما در صورت استفاده از یک تصویر، تصویر دوم برای نمایش، قبلا در کامپیوتر کاربر ذخیره شده است
در واقع زمانیکه می خواهید در فتوشاپ طراحی کنید، یک لایه Duplicate از حالت اولی دکمه بگیرید و در زیر دکمه اولی قرار دهید.
حالا می توانید به دکمه یا تصویر خود هر افکتی که می خواهید بدهید.
مثلا تصویر را سیاه و سفید و رنگی کنید و یا تصویر را مات و واضح و یا هر افکتی که به ذهنتان می رسد پیاده کنید.
برای مثال از تصویر زیر استفاده نمایید

تصویر زیر هم متعلق سایت اپل است که برای هر حالت ماوس یک تغییر در تصویر دکمه داده شده است.

کد سی اس اس هم خیلی واضح است.
بعد از ایجاد کردن، حالت UP ماوس فقط باید موقعیت تصویر پس زمینه را در حالت Over آن کلاس تغییر دهید.
کافی است با سی اس اس به اندازه نصف ارتفاع تصویر ، تصویر را بالا و یا پایین ببریم.
به کد ساده زیر توجه کنید:

.mybutten{width:128px; padding-right:30px; height:27px;float:left;
background:url(http://img.zabet.ir/2010/07/menu.png) 0 0px;}
.mybutten:hover{background:url(http://img.zabet.ir/2010/07/menu.png) 0 -29px;}

کد اچ تی ام ال:
کافی است که یک تگ A را با کلاس mybutten ایجاد کنید، مانند:

 Link 

مولف: میثم ضابط – ۲۵ تیر ۸۹
سطح: مقدماتی