Rollover təsviri siz və ya müştərinizin üzərinə siçan vurduqda başqa bir görüntüyə dəyişən bir görüntüdir. Bunlar, düymələr və ya sekmeler kimi interaktiv hiss yaratmaq üçün istifadə olunur. Amma yalnız bir şeydən kənarlaşdırma şəkilləri yarada bilərsiniz.
Bu təlimçi Dreamweaver-da bir rollover image yaratmaq üçün hazırlanmışdır. Dreamweaver'ın aşağıdakı versiyalarını istifadə edən insanlar tərəfindən istifadə üçün nəzərdə tutulmuşdur:
- Dreamweaver MX
- Dreamweaver MX 2004
- Dreamweaver 8
- Dreamweaver CS3
- Dreamweaver CS4
- Dreamweaver CS5
- Dreamweaver CS6
Bu təlimatın tələbləri
- Dreamweaver
Yuxarıda göstərilən versiyalardan biri. - Orijinal bir şəkil
Bu görüntüyü optimallaşdırdığınızdan əmin olun. Bu, səhifələrinizin daha tez yüklənməsinə kömək edəcəkdir. - Rollover görüntüsü
Bu şəkil orijinal görünüşü ilə eyni ölçüdə olmalıdır. Və orijinal görüntü kimi, səhifənin yükləmə müddətlərinə kömək etmək üçün optimallaşdırılmalıdır. - Veb səhifə
Bu rollover şəklini qoyacağınız HTML səhifəsidir.
01 ilə 06
Başlamaq
- Dreamweaver başlayın
- Rozetinizi istədiyiniz veb səhifəni açın
02-dən 06-dək
Rollover Image Image obyektini daxil edin
Dreamweaver bir rollover image yaratmaq üçün asanlaşdırır.
- Insert menyusuna və "Image Objects" alt menyusuna gedin.
- "Image rollover" və ya "Rollover image" seçin
Dreamweaver'ın bəzi köhnə versiyaları yerinə Image Objects "Interactive Images" adlanır.
03 ilə 06
Dreamweaver-a nə istifadə edəcəyini deyin
Dreamweaver, rollover imicinizi yaratmaq üçün doldurmaq üçün lazım olan sahələri olan bir informasiya qutusu açır.
Şəkil adı
Səhifə üçün unikal bir şəkil adı seçin. Bütün bir söz olmalıdır, ancaq nömrələri, alt qisimləri (_) və tireləri (-) istifadə edə bilərsiniz. Bu dəyişikliyin təsvirini müəyyən etmək üçün istifadə olunacaq.
Orijinal Şəkil
Bu, səhifədən başlayacaq olan görüntünün URL və ya yeridir. Bu sahədə nisbi və ya mütləq yol URL - lərindən istifadə edə bilərsiniz. Bu web serverinizdə olan və ya səhifəni yüklədiyiniz bir şəkil olmalıdır.
Rollover Image
Bu şəkil üzərinə siçan vurduğunuzda görünən şəkil. Orijinal görünüş kimi, bu şəkil üçün mütləq və ya nisbi bir yol ola bilər və səhifəni yüklədiyinizdə mövcud olmalıdır və ya yüklənə bilər.
Rollover Image ön yüklə
Bu seçim silinmənin daha tez görünməsinə kömək etdiyindən, default olaraq seçilir. Rollover image öncək yükləməyi seçərək, brauzer onu siçan üzərində silinməyincə onu bir önbellekte saxlayacaq.
Alternativ Mətn
Yaxşı alternativ mətn şəkilləri daha əlçatan edir. Hər hansı bir şəkil əlavə edərkən həmişə alternativ bir mətn növü istifadə etməlisiniz.
Tıkladığınızda URL'ye Git
Çoxu bir səhifədə birini gördükdə bir görüntüyə tıklayacaq. Beləliklə, siz onları tıklanabilir etmək vərdişində olmalısınız. Bu seçim, görüntüyü tıkladıklarında görüntüleyiciyi almaq üçün sayfayı və ya URL'yi belirtmenize imkan verir. Amma bu seçim bir rollover yaratmaq üçün tələb olunmur.
Bütün sahələri tamamladığınızda, Dreamweaver'ın rollover şəklini yaratması üçün Tamam'ı basın.
Növbəti səhifə Dreamweaver yazan scripti göstərir.
06 04
Dreamweaver sizin üçün JavaScript yazır
Kodu açarkən səhifəni açarsanız, Dreamweaver HTML sənədinizin
səhifəsində JavaScript bloku qoyduğunu görürsünüz. Bu blok, seçdiyiniz təqdirdə siçanların üzərindən silinməsi və ön yükləmə funksiyasını dəyişdikdə 3 şəkildən ibarətdir.funksiyası MM_swapImgRestore ()
funksiyası MM_findObj (n, d)
funksiyası MM_swapImage ()
funksiyası MM_preloadImages ()
05-dən 06-dək
Dreamweaver Rollover üçün HTML əlavə edir
Dreamweaver'ın rollover şəkillərini önceden yükləməsini seçsəniz, şəkillərinizin daha tez yüklənməsi üçün sənədin gövdəsində HTML kodunu preload skriptinə zəng etmək üçün görəcəksiniz.
onload = "MM_preloadImages ('shasta2.jpg')"
Dreamweaver, həmçinin şəklinizin bütün kodunu əlavə edir və onu birləşdirir (bir URL daxil etsəniz). Rollover bölməsi onmouseover və onmouseout xüsusiyyətləri kimi bağlama etiketinə əlavə olunur.
onmouseout = "MM_swapImgRestore ()"
onmouseover = "MM_swapImage ('Image1', '', 'shasta1.jpg', 1)"
06-dan 06-a
Rollover sınayın
Tam funksional rollover imicinə baxın və Shasta`ın ağılında olanları öyrənin.