מדריך ליצירת תמונת Rollover ב - Dreamweaver

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

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

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

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

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

להתחיל

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

הוסף אובייקט תמונות Rollover

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

1. עבור לתפריט Insert ולחץ על הלחצן אובייקטים של תמונות תפריט משנה.
2. בחר גלילת תמונות או תמונת גלגול.

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

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

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

שם תמונה

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

תמונה מקורית

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

תמונת גלגול

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

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

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

טקסט חלופי

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

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

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

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

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

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

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

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

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

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

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

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

לבדוק את Rollover

לראות את התמונה rollover מתפקדת במלואה וללמוד מה על דעתו של Shasta.