Dreamweaver-dagi Rollover Image qanday yaratiladi

Rollover tasvirni siz yoki sizning mijozingiz sichqoncha ustida siljiganida boshqa tasvirga o'zgartiradigan tasvirdir. Ular odatda tugmalar yoki yorliqlar kabi interaktiv his qilish uchun ishlatiladi. Biroq, siz shunchaki biror narsadan tortib olingan tasvirlarni yaratishingiz mumkin.

Ushbu o'quv qo'llanma Dreamweaver- da rollover tasvirini yaratishda yordam berish uchun mo'ljallangan. Quyidagi Dreamweaver versiyalarini ishlatib, odamlar tomonidan ishlatilishi mumkin:

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

Ushbu qo'llanmaning talablari

• Dreamweaver
  Yuqorida sanab o'tilgan variantlardan biri.
• Asl rasm
  Ushbu tasvirni optimallashtirishga ishonch hosil qiling. Bu sizning sahifalaringiz tezroq yuklab olishga yordam beradi.
• Rollover tasvir
  Bu tasvir original tasvir bilan bir xil o'lchamlarda bo'lishi kerak. Va asl qiyofasi kabi, sahifani yuklash vaqtlariga yordam berish uchun optimallashtirilgan bo'lishi kerak.
• Veb-sahifa
  Bu sizning rollover rasmingizni joylashtiradigan HTML-sahifa.

01dan 06gacha

Boshlang

1. Dreamweaver dasturini ishga tushiring
2. Veb-sahifani ochish uchun joyni oching

02 of 06

Rollover Image Image ob'ektini joylashtiring

Dreamweaver bir rollover tasvirini yaratishni osonlashtiradi.

1. Qo'shish menyusiga va pastga "Image Objects" pastki menyusiga o'ting.
2. "Image rollover" yoki "Rollover image" ni tanlang

Dreamweaver ning ba'zi eski versiyalari Image Ob'ektlari "Interactive Images" deb nomlanadi.

03 ning 06

Dreamweaver-ga qanday rasmlarni ishlatishini ayting

Dreamweaver sizning rollover rasmingizni yaratish uchun to'ldirishingiz kerak bo'lgan joylar bilan dialog oynasini ochadi.

Rasm nomi

Sahifa uchun noyob rasm nomini tanlang. Har bir so'z bo'lishi kerak, lekin siz raqamlar, pastki chiziq (_) va tire (-) dan foydalanishingiz mumkin. Bu o'zgarishning rasmini aniqlash uchun ishlatiladi.

Original tasvir

Bu sahifada boshlangan tasvirning URL manzili yoki manzili. Ushbu sohada nisbatan yoki aniq yo'l URL-laridan foydalanishingiz mumkin. Bu sizning veb-serveringizda mavjud bo'lgan rasm yoki sahifani yuklashingiz kerak.

Rollover Image

Rasmni sichqonchaning ustida sichqoncha paydo bo'ladigan tasvir. Asl rasm kabi, bu rasm uchun mutlaq yoki nisbiy yo'l bo'lishi mumkin va siz sahifani yuklaganingizda mavjud bo'lishi yoki yuklanishi kerak.

Rollover tasvirni oldindan yuklash

Ushbu tanlov avtomatik ravishda tanlanadi, chunki bu rolloverning tezroq ko'rinishiga yordam beradi. Rollover tasvirini oldindan yuklashni tanlab, brauzer uni sichqonchaning ustiga siljmaguncha uni keshda saqlaydi.

Muqobil matn

Yaxshi muqobil matn sizning tasvirlaringizni yanada qulayroq qiladi. Har qanday rasmni qo'shganda, siz har doim muqobil matnning bir turini qo'llashingiz kerak.

Tugatganingizda URL ga o'tish

Ko'pchilik odamlar bir sahifada ko'rganingizda rasmni bosadi. Shunday qilib, ularni tıklanabilir qilish odat bo'lish kerak. Ushbu parametr, tomoshabinni tasvirni bosganingizda ko'rib chiqish uchun sahifani yoki URLni belgilash imkonini beradi. Biroq, bu variantni qayta ishlashni yaratish talab qilinmaydi.

Barcha maydonlarni to'ldirganingizda, Dreamweaver-ning rollover rasmini yaratishi uchun OK ni bosing.

Keyingi sahifada Dreamweaver yozgan skript ko'rsatilgan.

04 of 06

Dreamweaver siz uchun JavaScript-ni yozadi

Agar kodni ko`rsatishda sahifani ochsangiz, Dreamweaver HTML hujjati da JavaScript-ni bloklarini ko`rayotganini ko`rasiz. Bu blok sichqonchani siljitganda va ushbu parametrni tanlasangiz preload funktsiyasida tasvirlarni almashtirish uchun kerak bo'lgan 3 funksiyani o'z ichiga oladi.

vazifasi MM_swapImgRestore ()
vazifasi MM_findObj (n, d)
vazifasi MM_swapImage ()
vazifasi MM_preloadImages ()

05 of 06

Dreamweaver Rollover uchun HTML qo'shimchalar

Dreamweaver-ning rollover rasmlarini oldindan yuklashni tanlagan bo'lsangiz, sizning suratlaringizning korpusidagi HTML-kodlarni oldindan yuklangan skriptga qo'ng'iroq qilishingiz mumkin.

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

Dreamweaver shuningdek, rasmingiz uchun barcha kodlarni qo'shib, uni bog'laydi (URL kiritgan bo'lsangiz). Devralma qismi ankraj yorlig'iga onmouseover va onmouseout atributlari sifatida qo'shiladi.

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

06 of 06

Rolloverni sinash

To'liq ishlab chiqilgan rasmni ko'rib chiqing va Shastaning fikrini biling.