תאורה אחורית של לחצנים בדפי אינטרנט מסודרת בדרך כלל באמצעות שתי תמונות. כאשר אתה מעביר את סמן העכבר מעל האלמנט המתאים של המסמך (קישור או כפתור), נוצר אירוע, אשר בהתאם להוראות הכתובות בשפת 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. גובה הכפתורים הוא 20 פיקסלים, הרוחב הוא 50 פיקסלים - עליכם להחליף את הערכים הללו בערכים שלכם.
