כיצד ליצור תמונת Rollover ב

תמונת גלגול היא תמונה שמשתנה לתמונה אחרת כאשר אתה או הלקוח שלך מגלגלים את העכבר מעליה. אלה משמשים בדרך כלל כדי ליצור תחושה אינטראקטיבית כגון לחצנים או כרטיסיות. אבל אתה יכול ליצור תמונות rollover מתוך כמעט כל דבר.

הדרכה זו נועדה לסייע לך ליצור תמונת גלגול ב- Dreamweaver . הוא מיועד לשימוש על ידי אנשים המשתמשים בגרסאות הבאות של Dreamweaver:

• MX
• MX 2004
• 8
• CS3
• CS4
• CS5
• CS6

דרישות עבור הדרכה זו

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

01 of 06

להתחיל

1. הפעל את Dreamweaver
2. פתח את דף האינטרנט שבו אתה רוצה את הגלילה שלך

02 מתוך 06

הוסף אובייקט Image Image Rollover

Dreamweaver מקל ליצור תמונת Rollover.

1. עבור אל התפריט הוספה ולאחר מכן אל תת התפריט 'אובייקטים של תמונות'.
2. בחר "גלילת תמונות" או "תמונת Rollover"

חלק מהדורות הקודמות של Dreamweaver מתקשרות לאובייקטים של תמונות "תמונות אינטראקטיביות" במקום זאת.

03 מתוך 06

תגיד Dreamweaver מה תמונות לשימוש

Dreamweaver יצוץ תיבת דו-שיח עם השדות שעליך למלא כדי ליצור את תמונת הגלגול.

שם תמונה

בחר שם תמונה ייחודי עבור הדף. זה צריך להיות כל מילה אחת, אבל אתה יכול להשתמש מספרים, קו תחתון (_) ו מקפים (-). זה ישמש כדי לזהות את התמונה כדי לשנות.

תמונה מקורית

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

תמונת גלגול

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

טען מחדש את התמונה

אפשרות זו נבחרת כברירת מחדל משום שהיא עוזרת לגלילה להופיע במהירות רבה יותר. על ידי בחירה מראש את התמונה rollover, דפדפן האינטרנט יהיה לאחסן אותו במטמון עד העכבר מתגלגל מעל זה.

טקסט חלופי

טקסט חלופי טוב הופך את התמונות שלך לזמינות יותר. אתה תמיד צריך להשתמש איזה סוג של טקסט חלופי בעת הוספת תמונות.

כאשר לוחצים, עבור אל כתובת אתר

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

לאחר השלמת כל השדות, לחץ על אישור כדי ש- Dreamweaver ייצור את תמונת הגלגול.

הדף הבא מציג את התסריט ש- Dreamweaver כותב.

04 מתוך 06

כותב את JavaScript בשבילך

אם תפתח את הדף בתצוגת קוד, תראה ש- Dreamweaver יוסיף בלוק של JavaScript ב- של מסמך ה- HTML שלך. בלוק זה כולל את 3 הפונקציות שאתה צריך לקבל את התמונות להחליף כאשר העכבר מתגלגל מעל אותם ואת preload פונקציה אם בחרת את זה.

פונקציה MM_swapImgRestore ()
פונקציה MM_findObj (n, d)
פונקציה MM_swapImage ()
פונקציה MM_preloadImages ()

05 מתוך 06

Dreamweaver מוסיף את ה- HTML עבור Rollover

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

onload = "MM_preloadImages ('shasta2.jpg')"

Dreamweaver גם מוסיף את כל הקוד לתמונה וקושר אותו (אם כלל כתובת אתר). החלק rollover נוסף לתג עוגן כמו תכונות onmouseover ו onmouseout.

onmouseout = "MM_swapImgRestore ()"
onmouseover = "MM_swapImage ('Image1', '', 'shasta1.jpg', 1)

06 מתוך 06

לבדוק את Rollover

לראות את התמונה rollover מתפקדת במלואה וללמוד מה על Shasta' ¯ s המוח.