دكمه‌هاي متحرك با ‌CSS

این مقاله از ضمیمه کلیک روزنامه جام جم آنلاین انتخاب شده است.

روش سنتي كه براي حل اين مشكل وجود دارد، بارگذاري تمام عكس‌ها قبل از زمان نياز به آن‌هاست. به‌عبارت ديگر، در هنگام بارگذاري اوليه صفحه‌وب و با اين رخداد بارگذاري شوند. البته اين عمل بايد از كد طول و دراز جاوااسكريپتي استفاده كرد كه خودش وقت زيادي مصرف مي‌كند.

روش دوم كه با استفاده از ‌CSS‌ است، راه‌حل بهتري به ما مي‌دهد. در اين روش سه حالت يك دكمه (معمولي، ماوس بر رو، و حالت كليك) را در يك عكس مي‌گنجانيم و سپس به‌سادگي عكس را جابجا مي‌كنيم. ‌ ‌

بياييد فرض كنيم كه منوي ما به‌اين شكل است: ‌

<div class="rollover">
   <a href="#">Item1</a>
   <a href="#">Item2</a>
   <a href="#">Item3</a>
</div>

همان‌طور كه مشاهده مي‌كنيد، كد ‌HTML‌ بسيار ساده‌اي است و تنها شامل تعدادي لينك معمولي درون تگ ‌div‌ و كلاس ‌rollover‌ مي‌شود.

اولين قدم براي ساختن يك دكمه، ساختن يك پس‌زمينه براي دكمه در نرم‌افزار ويژه طراحي و ويرايش عكس مانند فتوشاپ است. پس از طراحي عكس، (مثالي از شيوه طراحي را در تصوير ملاحظه مي‌كنيد.) پس‌زمينه آن را به سه قسمت كاملا مساوي تقسيم مي‌كنيم و هر قسمت را براي يكي از حالات دكمه درنظر مي‌گيريم.

1– معمولي ‌(Normal)‌، حالتي است كه دكمه به‌طور پيش‌فرض اين‌شكلي است ‌ ‌

2– شناوري ‌(Hover‌)، اين حالت زماني رخ مي‌دهد كه با ماوس روي دكمه برويم، به‌عبارت ديگر، نشانگر ماوس روي آن شناور مي‌شود.

3– فعال (Active‌)، اين حالت زماني رخ مي‌دهد كه با ماوس روي دكمه كليك مي‌كنيم.

تا اينجا، تنها چيزي كه داريد، يك مشت عكس در اين سوي ماجرا، و مشتي كد ‌HTML‌ آن‌طرف‌تر است. چيزي كه اين‌دو را به شيوه‌اي زيبا به‌هم متصل مي‌كند، ‌CSS‌ نسخه 2 است. به كد زير توجه كنيد:‌

.rollover a {
   display:block;
   width:90px;
   padding :7px 10px 10px 10px;
   font: Tahoma bold;
   color:#333333;
   background: url("rollover -image.gif")  no-repeat 0 0;
   text-decoration: none; 
}

.rollover a:hover{
   background-position:-35 0 px;
   color: #049;
}

.rollover a:active {
   background-position:-70px 0;
   color:#fff;
}

نكته‌1: ‌rollover a‌. به تمام تگ‌هاي لينكي اشاره دارد كه داخل تگ ديگري قرار دارند، و كلاس آن تگ، ‌rollover‌. است. ‌ ‌

نكته 2: در ‌CSS‌، hover‌ ‌: هنگامي رخ مي‌دهد كه ماوس روي تگ مذكور برود، ‌a:active‌ وقتي رخ مي‌دهد كه ماوس روي آن كليك كند. ‌ ‌

چيزي كه مهم است و بايد در اينجا يادآور شويم، عكسي است كه براي استفاده به‌عنوان پس‌زمينه‌ي لينك‌ها طراحي شده است. وضعيت پس‌زمينه، در دو حالت ‌ a:hover‌ (در هنگام برجسته‌تر شدن عكس) و ‌ a:active ‌(در هنگام كليك كردن) تغيير مي‌يابد.

در قطعه كد بالا، ارتفاع عكس 105 پيكسل بوده كه به سه بخش كه هر كدام 35 پيكسل است تقسيم شده است. در ابتدا موقعيت پس‌زمينه در هنگام محو شدن عكس، ‌(a:hover)‌ روي 35– پيكسل قرارداده شده كه بتوان بعدا آن را به 35 پيكسل تغيير داد. همان‌طور كه در اين قطعه كد مشاهده مي‌كنيد، موقعيت پس‌زمينه در هنگام كليك ‌(a:active)‌ به 70– پيكسل تغيير كرده، بطوري كه تنها قسمت پائين عكس ديده مي‌شود. و تمام جادو همين است، جابه‌جا كردن عكس در حالت‌هاي مختلف دكمه. ‌ ‌

نكته 3: اين اندازه‌ها فقط براي تصاوير اين مثال ممكن است كاربرد داشته باشند، بنابراين، در گام اول دكمه مورد علاقه خود را بسازيد، و بعد اندازه‌ها را بر اساس آن تعيين كنيد.