نور پس زمینه دکمه ها در صفحات وب معمولاً با استفاده از دو تصویر تنظیم می شود. هنگامی که نشانگر ماوس را روی عنصر مربوط به سند (پیوند یا دکمه) قرار می دهید ، رویدادی ایجاد می شود که مطابق دستورالعمل های نوشته شده به زبان CSS ، از مرورگر می خواهد یک عکس را به تصویر دیگری تغییر دهد. وقتی نشانگر ماوس از دکمه دور شد ، جایگزینی معکوس اتفاق می افتد.
ضروری است
دانش اولیه زبانهای HTML و CSS
دستورالعمل ها
مرحله 1
گزینه های مختلفی برای اجرای چنین مکانیزم برجسته سازی وجود دارد. برای هر یک از آنها ، می توانید از کد HTML یکسان استفاده کنید ، فقط توصیف سبک مربوطه را تغییر دهید. کد HTML دکمه ممکن است به این شکل باشد: متن روی دکمه در اینجا شناسه این عنصر صفحه است (id = "btnA") که شرح سبک به آن پیوست خواهد شد.
گام 2
برای پیاده سازی یکی از گزینه ها ، باید دو تصویر تهیه کنید که یکی از آنها دکمه را در حالت غیر فعال نشان می دهد و دیگری با نور پس زمینه. از آنها به عنوان تصویر پس زمینه پیوند استفاده خواهد شد. دستورالعمل های CSS برای این دکمه ممکن است به این شکل باشد:
a # btnA ، a # btnA: بازدید شده از {
نمایش: بلوک؛
عرض: 50 پیکسل
ارتفاع: 20 پیکسل؛
پس زمینه: url (btnA.gif) بدون تکرار ؛
حاشیه: 0؛
}
a # btnA: شناور {
پس زمینه: url (btnA_hover.gif) بدون تکرار
حاشیه: 0؛
}
در اینجا ، در بلوک اول ، ابعاد تصویر دکمه نشان داده شده است (عرض: 50 پیکسل ؛ ارتفاع: 20 پیکسل ؛). شما باید آنها را با ابعاد تصویر خود جایگزین کنید. نام پرونده های تصویری باید به همین ترتیب تغییر کند: btnA.
مرحله 3
یکی از گزینه ها قرار دادن هر دو تصویر در یک تصویر است. می تواند یکی بالاتر از دیگری باشد ، یا در کنار هم باشد. همچنین از این لینک به عنوان پس زمینه استفاده خواهد شد. از آنجا که اندازه دکمه ها در توضیحات سبک دکمه مشخص شده است ، هر آنچه در آنها نباشد قابل مشاهده نخواهد بود. در این حالت ، دستورالعمل های قرار داده شده در توضیحات CSS باید هنگام قرار دادن نشانگر ماوس ، تصویر پس زمینه را پیمایش کنید تا ناحیه با تصویر دکمه برجسته شده در کادر قرار گیرد. برای این گزینه ، کد مرحله قبل باید به شرح زیر تغییر کند:
a # btnA ، a # btnA: بازدید شده از {
نمایش: بلوک؛
عرض: 50 پیکسل
ارتفاع: 20 پیکسل؛
پس زمینه: url (btnA.gif) بدون تکرار ؛
حاشیه: 0؛
}
a # btnA: شناور {
پس زمینه: url (btnA.gif) بدون تکرار 21px؛
حاشیه: 0؛
}
این فرض می کند که شما تصاویر را بالاتر از دیگری قرار داده اید (در پایین برجسته شده است) و در فایلی به نام btnA.gif"
