دکمههای متحرک با CSS
در حالت عادی، وقتی که ماوس از درون محدوده دکمه خارج میشود، عملیات تبدیل عکس توسط جایگزینی یک عکس با عکس دیگر صورت میگیرد. اما این کار مشکلی را بهوجود میآورد و آن این است که وقتی ماوس از محدوده دکمه خارج شد، عکس جدید باید بارگذاری شود. اختلاف زمانیای که بین زمان خارج شدن ماوس از محدوده دکمه و زمان بارگذاری عکس جدید، وجود دارد، باعث رخ دادن چیزی شبیه به چشمک زدن در دکمه ایجاد شده میشود. برای جلوگیری از ایناتفاق، دو روش وجود دارد:
روش سنتی که برای حل این مشکل وجود دارد، بارگذاری تمام عکسها قبل از زمان نیاز به آنهاست. بهعبارت دیگر، در هنگام بارگذاری اولیه صفحهوب و با این رخداد بارگذاری شوند. البته این عمل باید از کد طول و دراز جاوااسکریپتی استفاده کرد که خودش وقت زیادی مصرف میکند.
روش دوم که با استفاده از CSS است، راهحل بهتری به ما میدهد. در این روش سه حالت یک دکمه (معمولی، ماوس بر رو، و حالت کلیک) را در یک عکس میگنجانیم و سپس بهسادگی عکس را جابجا میکنیم.
کد HTML
بیایید فرض کنیم که منوی ما بهاین شکل است:
<div class="rollover">
</a>1 </a> <a href="#">Item2 </a> <a href="#">Item3 <a href="#">Item
</a>4 <a href="#">Item
</div>
همانطور که مشاهده میکنید، کد HTML بسیار سادهای است و تنها شامل تعدادی لینک معمولی درون تگ div و کلاس rollover میشود.
اولین قدم برای ساختن یک دکمه، ساختن یک پسزمینه برای دکمه در نرمافزار ویژه طراحی و ویرایش عکس مانند فتوشاپ است. پس از طراحی عکس، (مثالی از شیوه طراحی را در تصویر ملاحظه میکنید.) پسزمینه آن را به سه قسمت کاملا مساوی تقسیم میکنیم و هر قسمت را برای یکی از حالات دکمه درنظر میگیریم.
1– معمولی (Normal)، حالتی است که دکمه بهطور پیشفرض اینشکلی است
2– شناوری (Hover)، این حالت زمانی رخ میدهد که با ماوس روی دکمه برویم، بهعبارت دیگر، نشانگر ماوس روی آن شناور میشود.
3– فعال (Active)، این حالت زمانی رخ میدهد که با ماوس روی دکمه کلیک میکنیم.
کد CSS
تا اینجا، تنها چیزی که دارید، یک مشت عکس در این سوی ماجرا، و مشتی کد HTML آنطرفتر است. چیزی که ایندو را به شیوهای زیبا بههم متصل میکند، CSS نسخه 2 است. به کد زیر توجه کنید:
}.rollover a
display:block;
px;90 :width
px;7 px10 px10 px10:padding
px sans-serif;13 font: bold
;333color:#
background: url("rollover
no-repeat; 0 0 -image.gif")
text-decoration: none;
{
.rollover a:hover
px;35- 0 :background-position
;049color: #
{
}.rollover a:active
px;70- 0 :background-position
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: این اندازهها فقط برای تصاویر این مثال ممکن است کاربرد داشته باشند، بنابراین، در گام اول دکمه مورد علاقه خود را بسازید، و بعد اندازهها را بر اساس آن تعیین کنید.
تازه ها
گوناگون
پیشنهاد سردبیر
در تپش این هفته، ماجرای فریب و تعرض در پوشش عرفانهای دروغین و رمالی را بررسی کردیم
پشت پرده اتاقهای دود و طلسـم
