در این پست قصد دارم آموزش ساخت دکمه های غلطان یا RollOver رو قرار بدم. این دکمه غلطان نامیده می شوند زیرا وقتی با ماوس روی آنها می ایستید عکس دکمه عوض می شود.
بسیار خوب بهتر است آموزش رو شروع کنیم.
ابتدا در فتوشاپ یه صفحه با اندازه ۱۲۰پیکسل پهنا و ۱۰۰ پیکسل ارتفاع ایجاد کنید.حالا روی خطکش بالایی کلیک کنید و کلیک را دقیقا وسط صفحه رها کنید تا یک خط راهنما ایجاد شود.
با ابزار Rounded Rectangle tool با میزان Radius 5px یک مستطیل در نیمه بالایی با رنگ دلخواه ایجاد کنید.
حالا لایه ایجاد شده را کپی کنید (در پنجره layers،بر روی لایه ایجاد شده راست کلیک کنید و گزینه ی Duplicate Layer را برگزینید) مانند شکل زیر
حالا با ماوس عکس را به نیمه پایینی بیاورید و رنگ آن را بنابه سلیقه خودتان تغییر دهید.مثلا من رنگ نارنجی را انتخاب کردم و عکس به صورت زیر در آمد :
این عکس را با فرمت png و نام rpw ذخیره کنید.
حالا یک فایل html ایجاد نموده و آن را توسط یک ادیتور برای ویرایش باز و کدهای زیر را در آن کپی کنید.
<<html
<head>
<title>rollover</title>
<style type=”text/css”>
a:link.btn,a:visited.btn{
background:url(rpw.png) right top;
width:120px;
height:50px;
display:block;
text-decoration:none;
text-align:center;
line-height:2.7em;
color:#FFFFFF;
font-family:tahoma,sans-serif;
}
a:hover.btn{
background:url(rpw.png) right bottom;
width:120px;
height:50px;
display:block;
text-decoration:none;
text-align:center;
color:#000000;
}
</style>
</head>
<body>
<a href=”#” class=”btn” >send</a>
</body>
</html>
در پایان این فایل را با نام rollover.html ذخیره کنید.
دقت کنید : عکس دکمه (rpw.png) و فایل html ایجاد شده باید در یک فولدر باشند.