Dreamweaver дээр өнхрөх зургийг хэрхэн үүсгэх вэ?

Орлуулах зураг гэдэг нь та эсвэл таны хэрэглэгч хулгана дээр хулганаа эргүүлэх үед өөр ямар нэгэн дүрс рүү шилжсэн зураг юм. Эдгээр нь товчлуурууд эсвэл табууд гэх мэт интерактив мэдрэмжийг бий болгоход ашиглагддаг. Гэхдээ та өнхрөхөөс өөр юу ч хийх боломжтой.

Энэхүү гарын авлага нь Dreamweaver-ийн өнхрөх дүрсийг үүсгэхэд туслах зорилготой юм. Энэ нь Dreamweaver дараах хувилбаруудыг ашигладаг хүмүүст зориулагдсан болно:

Энэ зааварт тавигдах шаардлагууд

01 - 06

Эхэлцгээе

Shasta өнхрөх зураг дүрсний жишээ. Фото © 2001-2012 J Kyrnin - зураг тухай About.com лицензтэй
  1. Dreamweaver эхлэх
  2. Өөрийн ролл байршуулахыг хүсч буй вэб хуудас нээх

02 of 06

Rollover Image Image Object-г оруулна

Зургийн объект оруулах. J Kyrnin-ийн дэлгэцийн зураг

Dreamweaver нь өнхрөхөөс хамгаалах дүрсийг бүтээхэд хялбар болгодог.

  1. Insert цэс рүү очоод "Image Objects" дэд цэс рүү очно уу.
  2. "Зургийн өнхрөх" эсвэл "Орлуулах зураг" -ыг сонго

Dreamweaver-ийн зарим хуучин хувилбарууд нь "Зураг дээрх Интерактив Images" -ийг дуудаж байна.

03 - 06

Dreamweaver ямар дүрс ашиглахыг хэл

Wizard-ийг бөглөнө үү. J Kyrnin-ийн дэлгэцийн зураг

Dreamweaver таны өнхрөх зургийг үүсгэхийн тулд бөглөх ёстой талбаруудтай харилцах цонхыг өгдөг.

Зургийн нэр

Хуудасны онцгой цорын ганц зургийн нэрийг сонгоно уу. Энэ нь нэг л үг байх ёстой боловч тоонууд, доогуур зураас (_) болон гипhенүүдийг (-) хэрэглэж болно. Үүнийг өөрчлөхийн тулд дүрсийг тодорхойлоход ашиглана.

Эх зураг

Энэ бол хуудасны эхлэл болох зураг эсвэл URL юм. Та энэ талбарт харьцангуй эсвэл үнэмлэхүй замыг ашиглаж болно. Энэ нь таны веб сервер дээр эсвэл хуудасны хуудсанд байршуулсан зураг байх ёстой.

Орлуулсан зураг

Энэ бол таны хулганыг зураг дээр харуулах зураг юм. Анхны дүрсний адил энэ нь зурган дээр үнэмлэхүй эсвэл харьцангуй зам байж болох бөгөөд энэ хуудсыг байршуулах үед байршуулсан эсвэл байршуулсан байх ёстой.

Ачаалал өнгөний зураг

Энэ сонголт нь анхдагчаар сонгосон учир дахин байршуулалт илүү хурдан харагддаг. Өнхрүүлгийн дүрсийг урьдчилан байрлуулахаар сонгосоноор, Вэб хөтөч хулганыг эргүүлэх хүртэл үүнийг хадгалж байх болно.

Өөр текст

Сайн хувилбар текст нь таны зургийг илүү хүртээмжтэй болгодог. Аливаа зургийг нэмэхэд та ямар нэгэн өөр текстийг үргэлж ашиглах хэрэгтэй.

Утсан дээр дарж URL руу орно уу

Ихэнх хүмүүс хуудас дээр нэгийг нь хараад зураг дээр дарна. Тиймээс та үүнийг дарагдах боломжтой болгодог хэвшмэл байх ёстой. Энэ сонголт нь зураг дээр дарах үед үзэгчийг авахын тулд хуудас буюу URL-г тодорхойлох боломжтой болно. Гэхдээ энэ сонголт нь өнхрөхийг бий болгох шаардлагагүй.

Та бүх талбарыг бөглөсөн бол Dreamweaver дээр дарж таны өнхрөх зургийг үүсгэхийн тулд товшино уу.

Дараагийн хуудас нь Dreamweaver бичсэн скриптийг харуулдаг.

04 - 06

Dreamweaver танд зориулсан JavaScript-г бичдэг

JavaScript байна. J Kyrnin-ийн дэлгэцийн зураг

Хэрвээ та кодыг харахад хуудсыг нээвэл Dreamweaver таны HTML документэд JavaScript-ийг блоклохыг харах болно. Энэ блок нь хулганаа нүүлгэх үед зурагнууд солилцох 3 функцийг агуулах бөгөөд хэрэв та сонгосон бол урьдчилан ажиллуулах функц орно.

функцийг MM_swapImgRestore ()
функц MM_findObj (n, d)
функц MM_swapImage ()
функц MM_preloadImages ()

05 - 06

Dreamweaver нь дахин байрлах HTML-ийг нэмдэг

HTML. J Kyrnin-ийн дэлгэцийн зураг

Хэрэв та Dreamweaver загварыг өнхрүүлгийн зургийг авахаар сонгосон бол, та баримтынхаа биед байгаа HTML кодыг урьдчилан дуудах скрипт руу залгахын тулд илүү хурдан ачаалах болно.

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

Dreamweaver таны зурагны бүх кодыг нэмж, холбоосыг (хэрэв та URL оруулсан бол). Өнхрөх хэсэг нь onmouseover болон onmouseout шинж чанаруудтай зангуугийн шошгонд нэмэгддэг.

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

06 - 06

Дуусгахаасаа шалга

Shasta өнхрөх зураг дүрсний жишээ. Фото © 2001-2012 J Kyrnin - зураг тухай About.com лицензтэй

Бүрэн ажиллагаатай өнхрөх дүрсийг үзнэ үү, Shasta'`s оюун бодолд юу байгааг мэдэж аваарай.