השתלטות על Rollovers תמונה

על דפדפני אינטרנט ביותר, יש גבול מחדל כי התמונות המקיף המשמשים כקישורים. הוא בדרך כלל גדול, מגעיל, גבול עבה כחול בהיר. זהו כנראה לא רצויים, ולכן במאמר זה אנו יהיה לחפש דרכים תוכל לטפל בזה ב-CSS שלך ...

כדי להסיר את הגבול מחדל להשתמש ב-CSS שלך:


a img { border: none; }


ניתן גם להסיר את הגבול מחדל על תמונות מקושרים על ידי כולל "border = 0" בתוך תג התמונה, אבל זה מאפיין deprecated וזה לא מומלץ. למרבה הצער זה כלול עותק רבים ו-דוגמאות קוד להדביק אותו מאז כוחות התוצאה הרצויה מבלי לסמוך על בעל האתר שומר CSS טוב.

כי ברירת המחדל של הגבול הכחול הוא לא רשע, זה רק מנסה לעזור ולתת את יודעת את התמונה זה הוא סביב קישור. בוא ניקח את האחריות על עצמנו ולראות אם אנחנו יכולים לבוא עם כמה rollovers עבור התמונות הן קצת יותר נחמד ויותר מעניין.

הדרך הטובה ביותר לראות את הדוגמאות הללו הוא כדי להציג את הדף למשל ואת הדרך הטובה ביותר להבין כיצד הן פועלות הוא להוריד את הדוגמה ואת לעיין בקוד בעצמך.

דוגמה 1: הגבול עבה

דוגמה זו נותנת תמונה של כמה פיקסלים ריפוד ו גבול במצב נורמלי זה ומוסיף צבע רקע על הגלגול.

דוגמה 2: רצתי עבה הגבול

זוהי טכניקה דומה רק את הגלגול מוסיף גבול עבה מקווקו את התמונה. הטריק כאן הוא כי הגבול שם הוא במצב נורמלי זה גם, רק שזה לבן בדיוק כמו צבע הרקע. אם כי הגבול לא היה שם במצב נורמלי זה היה התווסף במהלך הגלגול, התמונה היתה משמרת המיקום כדי לפנות מקום הגבול, אשר תהיה התוצאה צורם ולא רצויה.

דוגמה 3: שחור לבן אל צבע

טכניקה זו גורמת התמונה כדי "לצבוע" על הגלגול. זה קצת יותר מסובך כי אתה לא תוכל להשתמש בתגיות img רגילה ב-HTML. תשתמש אלמנטים עוגן עם שמות מחלקה ייחודית. עוגנים אלה יהיו עמדות ספציפיות רוחב ו תמונת רקע. אז על הגלגול, אתה יכול להחליף את תמונת הרקע עבור גירסת צבע.

דוגמה 4: הוספת רקע Gradient

במקום להוסיף צבע מוצק כמו בדוגמה 1, אתה יכול להשתמש בתמונה. רק תן את התמונה קצת ריפוד משני צדי כך שיש מקום הגרפיקה להופיע.

דוגמה 5: הצגת מידע

טכניקה זו עושה את הטקסט מופיע מתחת לתמונה על הגלגול. זה עושה שימוש ברקע-הנכס התמונה ב-CSS כמו בדוגמה 3, אבל במקרה הזה, את תמונת הרקע נשאר זהה. ההבדל הוא במצב רגיל, הטקסט הוא בעט מעל מסך ענק עם קיזוז שלילי אשר הוסר על הגלגול. כדי לקבל את הטקסט יופיע מתחת התמונה במקום על גבי זה לתת את העוגן ריפוד העליון של קצת יותר גדול בגובה של התמונה.