ວິທີການສ້າງຮູບພາບ Rollover ໃນ Dreamweaver

ຮູບພາບ rollover ແມ່ນຮູບພາບທີ່ປ່ຽນແປງຮູບພາບອື່ນບາງຄັ້ງເມື່ອທ່ານຫຼືລູກຄ້າຂອງທ່ານເລື່ອນຫນູໃນໄລຍະມັນ. ເຫຼົ່ານີ້ແມ່ນຖືກນໍາໃຊ້ທົ່ວໄປເພື່ອສ້າງຄວາມຮູ້ສຶກແບບໂຕ້ຕອບເຊັ່ນປຸ່ມຫຼືແຖບ. ແຕ່ທ່ານສາມາດສ້າງຮູບພາບໂລໂວລ໌ອອກຈາກສິ່ງໃດກໍ່ຕາມ.

tutorial ນີ້ຖືກອອກແບບມາເພື່ອຊ່ວຍໃຫ້ທ່ານສ້າງຮູບພາບ rollover ໃນ Dreamweaver . ມັນຖືກໃຊ້ສໍາລັບການນໍາໃຊ້ໂດຍຜູ້ທີ່ໃຊ້ຮູບແບບ Dreamweaver ດັ່ງຕໍ່ໄປນີ້:

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

ຂໍ້ກໍານົດສໍາລັບບົດຮຽນນີ້

• Dreamweaver
  ຫນຶ່ງໃນສະບັບທີ່ໄດ້ລະບຸໄວ້ຂ້າງເທິງ.
• ຮູບພາບຕົ້ນສະບັບ
  ໃຫ້ແນ່ໃຈວ່າເພື່ອເພີ່ມປະສິດທິພາບຮູບພາບນີ້. ນີ້ຈະຊ່ວຍໃຫ້ຫນ້າເວັບຂອງທ່ານໂຫລດໄດ້ໄວຂຶ້ນ.
• ຮູບພາບ rollover
  ຮູບພາບນີ້ຄວນມີຂະຫນາດດຽວກັນກັບຮູບພາບຕົ້ນສະບັບ. ແລະ, ເຊັ່ນດຽວກັນກັບຮູບພາບຕົ້ນສະບັບ, ຄວນຈະໄດ້ຮັບການ optimized ເພື່ອຊ່ວຍໃຫ້ເວລາໂຫຼດຫນ້າ.
• ຫນ້າເວັບໄຊຕ໌
  ນີ້ແມ່ນຫນ້າ HTML ບ່ອນທີ່ທ່ານຈະໃສ່ຮູບພາບຂອງທ່ານ.

01 of 06

ເລີ່ມ​ຕົ້ນ

1. ເລີ່ມ Dreamweaver
2. ເປີດຫນ້າເວັບໄຊຕ໌ທີ່ທ່ານຕ້ອງການ rollover ຂອງທ່ານ

02 of 06

ໃສ່ Rollover Image Image Object

Dreamweaver ເຮັດໃຫ້ມັນງ່າຍທີ່ຈະສ້າງຮູບພາບ rollover.

1. ໄປທີ່ເມນູ Insert ແລະລົງໄປຫາເມນູຍ່ອຍ "Image Objects".
2. ເລືອກເອົາ "ຮູບພາບ rollover" ຫຼື "ຮູບພາບ Rollover"

ບາງຮຸ່ນເກົ່າຂອງ Dreamweaver ເອີ້ນວ່າ Objects ຮູບພາບ "ຮູບພາບທີ່ພົວພັນກັນ" ແທນ.

03 of 06

ບອກ Dreamweaver ຮູບພາບຕ່າງໆທີ່ຈະໃຊ້

Dreamweaver pops ໂຕກ່ອງໂຕ້ຕອບທີ່ມີຂໍ້ມູນທີ່ທ່ານຕ້ອງການຕື່ມໃນການສ້າງຮູບພາບຂອງທ່ານ rollover.

ຊື່ຮູບພາບ

ເລືອກຊື່ຮູບພາບທີ່ເປັນເອກະລັກສໍາລັບຫນ້າ. ມັນຄວນຈະເປັນຄໍາດຽວກັນ, ແຕ່ວ່າທ່ານສາມາດນໍາໃຊ້ຕົວເລກ, ເນັ້ນ (_) ແລະກົດຫມາຍ (-). ນີ້ຈະຖືກນໍາໃຊ້ເພື່ອກໍານົດຮູບພາບທີ່ຈະປ່ຽນແປງ.

ຮູບພາບຕົ້ນສະບັບ

ນີ້ແມ່ນ URL ຫຼືສະຖານທີ່ຂອງຮູບພາບທີ່ຈະເລີ່ມຕົ້ນໃນຫນ້າເວັບ. ທ່ານສາມາດນໍາໃຊ້ ເສັ້ນທາງເສັ້ນທາງທີ່ກ່ຽວຂ້ອງຫຼືຢ່າງເຕັມທີ່ ໃນພາກສະຫນາມນີ້. ນີ້ຄວນເປັນຮູບພາບທີ່ມີຢູ່ໃນເຄື່ອງແມ່ຂ່າຍເວັບໄຊຕ໌ຂອງທ່ານຫຼືວ່າທ່ານຈະອັບໂຫລດກັບຫນ້າເວັບ.

Rollover Image

ນີ້ແມ່ນຮູບພາບທີ່ຈະປາກົດໃນເວລາທີ່ທ່ານຫນູເຫນືອຮູບ. ເຊັ່ນດຽວກັນກັບຮູບພາບຕົ້ນສະບັບ, ນີ້ສາມາດເປັນເສັ້ນທາງທີ່ແທ້ຈິງຫຼືທີ່ກ່ຽວຂ້ອງກັບຮູບພາບ, ແລະມັນຄວນມີຢູ່ຫຼືຖືກອັບໂຫລດເມື່ອທ່ານອັບໂຫລດຫນ້າ.

Preload Rollover Image

ຕົວເລືອກນີ້ຖືກເລືອກໄວ້ໃນຕອນຕົ້ນເນື່ອງຈາກວ່າມັນຊ່ວຍ rollover ປາກົດຂຶ້ນຢ່າງໄວວາ. ໂດຍເລືອກທີ່ຈະ preload ຮູບພາບ rollover, ຕົວທ່ອງເວັບເວັບໄຊຕ໌ຈະເກັບຮັກສາມັນໃນ cache ຈົນກ່ວາຫນູ rolls ມັນ.

Alternate Text

ຂໍ້ຄວາມທີ່ດີທີ່ ເຮັດໃຫ້ຮູບພາບຂອງທ່ານສາມາດເຂົ້າເຖິງໄດ້ຫຼາຍຂຶ້ນ. ທ່ານຄວນໃຊ້ຂໍ້ຄວາມສະເພາະໃດຫນຶ່ງໃນເວລາທີ່ທ່ານເພີ່ມຮູບພາບຕ່າງໆ.

ເມື່ອກົດ, ໄປທີ່ URL

ປະຊາຊົນສ່ວນໃຫຍ່ຈະຄລິກໃສ່ຮູບພາບໃນເວລາທີ່ເຂົາເຈົ້າເຫັນຫນຶ່ງໃນຫນ້າ. ດັ່ງນັ້ນທ່ານຄວນຈະຢູ່ໃນນິໄສຂອງການເຮັດໃຫ້ພວກເຂົາສາມາດກົດໄດ້. ຕົວເລືອກນີ້ອະນຸຍາດໃຫ້ທ່ານລະບຸຫນ້າຫຼື URL ທີ່ຈະເອົາຜູ້ຊົມໃນເວລາທີ່ພວກເຂົາຄລິກໃສ່ຮູບພາບ. ແຕ່ຕົວເລືອກນີ້ບໍ່ຈໍາເປັນຕ້ອງສ້າງ rollover.

ໃນເວລາທີ່ທ່ານເຮັດສໍາເລັດທົ່ງນາທັງຫມົດ, ໃຫ້ຄລິກໃສ່ OK ເພື່ອໃຫ້ Dreamweaver ສ້າງຮູບພາບ rollover ຂອງທ່ານ.

ຫນ້າຕໍ່ໄປສະແດງໃຫ້ເຫັນ script ທີ່ Dreamweaver ຂຽນ.

04 of 06

Dreamweaver ຂຽນ JavaScript ສໍາລັບທ່ານ

ຖ້າທ່ານເປີດຫນ້າໃນຮູບແບບເບິ່ງທ່ານຈະເຫັນວ່າ Dreamweaver ໃສ່ບລັອກ JavaScript ໃນ ຂອງເອກະສານ HTML ຂອງທ່ານ. ບລັອກນີ້ປະກອບມີ 3 ຫນ້າທີ່ທ່ານຈໍາເປັນຕ້ອງມີການແລກປ່ຽນຮູບພາບເມື່ອເມົາມ້ວນກວ່າພວກເຂົາແລະຫນ້າທີ່ preload ຖ້າທ່ານເລືອກເອົານັ້ນ.

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

05 of 06

Dreamweaver ເພີ່ມ HTML ສໍາລັບ Rollover

ຖ້າທ່ານເລືອກທີ່ຈະມີ Dreamweaver preload ຮູບພາບ rollover, ຫຼັງຈາກນັ້ນທ່ານຈະເຫັນລະຫັດ HTML ໃນຮ່າງກາຍຂອງເອກະສານຂອງທ່ານທີ່ຈະໂທຫາສະຄິຄ preload ເພື່ອໃຫ້ຮູບພາບຂອງທ່ານໂຫຼດໄວຂຶ້ນ.

onload = "MM_preloadImages ('shasta2jpg')"

Dreamweaver ຍັງເພີ່ມລະຫັດທັງຫມົດສໍາລັບຮູບພາບຂອງທ່ານແລະເຊື່ອມໂຍງມັນ (ຖ້າທ່ານລວມເອົາ URL). ສ່ວນ rollover ແມ່ນຖືກເພີ່ມໃສ່ແທັບມໍເຕີເປັນຄຸນລັກສະນະ onmouseover ແລະ onmouseout.

onmouseout = "MM_swapImgRestore ()"
onmouseover = "MM_swapImage ('Image1', '', 'shasta1jpg', 1)"

06 of 06

ທົດສອບ Rollover ໄດ້

ເບິ່ງຮູບພາບ rollover ທີ່ມີປະໂຫຍດຢ່າງເຕັມສ່ວນແລະຮຽນຮູ້ກ່ຽວກັບຄວາມຄິດຂອງ Shasta'`s.