בדרך כלל, חצים גרפיים באתרים משמשים לארגון הניווט. כשלוחצים על מצביע כזה, עוברים לדף אחר או לחלק אחר בדף הנוכחי. לפעמים פעולות מסוימות קשורות אליהן - הדגשת תוכן שדה התג, השקת סקריפט JavaScript וכו '. כדי להדגיש כי חץ זה הוא אלמנט פעיל, השתמש באפקט "הדגשה", כלומר. שינויים במראה בעת העברת העכבר.
נחוץ
ידע בסיסי בשפות HTML ו- CSS
הוראות
שלב 1
קבעו איזה מנגנון ליישום הדגשת החץ מתאים לכם ביותר. יש כמה כאלה, שניים פשוטים ניתנים בשלבים הבאים של הוראה זו. שניהם משתמשים בכיתת הפסאודו של CSS. כאשר סמן העכבר נמצא מעל אלמנט גרפי (חץ), הסגנון המתואר במחלקת פסאודו זו מוחל עליו, ובשאר הזמן סגנון זה אינו פעיל. בשתי האפשרויות המתוארות להלן, ניתן להשתמש באותו HTML קוד, אך תיאורי סגנון שונים. את קוד החץ במקור הדף ניתן לכתוב באופן הבא: תכונת id מציינת את מזהה הקישור (arrowA), לפיו הדפדפן יקבע איזה מתיאורי הסגנון יש להחיל עליו.
שלב 2
האפשרות הראשונה תדרוש מכם להכין שתי תמונות חץ - עם ובלי תאורה אחורית. שמור אותם בקבצים עם שמות כגון arrON.
# חץ A, חץ #: ביקר {
בלוק תצוגה;
גובה: 30 פיקסלים;
רוחב: 100 פיקסלים;
רקע: url (arrOFF.gif) ללא חזרה;
גבול: 0;
}
חץ # A: רחף {
רקע: url (arrON.gif) ללא חזרה;
גבול: 0;
}
הבלוק הראשון מכיל את ממדי החץ (גובה: 30 פיקסלים; רוחב: 100 פיקסלים;) - החלף אותם במידות של תמונות החץ שהוכנו.
שלב 3
האפשרות השנייה מאפשרת להסתדר עם קובץ תמונה אחד בלבד. עליך למקם בו את שתי תמונות החץ - הן מודגשות והן לא פעילות. אתה יכול למקם אותם זה לצד זה, אתה יכול אחד מעל השני. בקוד הדוגמה, נניח שהחץ המודגש ממוקם מתחת לזה הלא פעיל, והקובץ נקרא על ידך arr.gif. תמונה זו, כמו בגרסה הקודמת, משמשת כרקע לקישור. מכיוון שממדי האובייקט מצוינים בתיאור הסגנון, כל שאר הרקע (חץ מודגש) שאינו משתלב בהם לא יהיה גלוי לגולש האינטרנט. בתיאור המרחף בסגנון פסאודו מוגדר שינוי במיקום תמונת הרקע, כך שכאשר אתה מעביר את הסמן מעל הקישור, קטע אחר ייראה ועכשיו החץ הפסיבי יופיע "מחוץ למסך".
# חץ A, חץ # A: ביקר {
בלוק תצוגה;
רוחב: 100 פיקסלים;
גובה: 30 פיקסלים;
רקע: url (arr.gif) ללא חזרה;
גבול: 0;
}
חץ # A: רחף {
רקע: url (arr.gif) 31px ללא חזרה;
גבול: 0;
}
אל תשכח לשנות את גודל גם כאן.
