របៀបបង្កើតរូបភាព Rollover នៅក្នុង Dreamweaver

រូបភាពវិលជុំគឺជារូបភាពដែលផ្លាស់ប្តូររូបភាពផ្សេងទៀតនៅពេលដែលអ្នកឬអតិថិជនរបស់អ្នករមៀលកណ្តុរលើវា។ ទាំងនេះត្រូវបានប្រើជាទូទៅដើម្បីបង្កើតអារម្មណ៍អន្តរកម្មដូចជាប៊ូតុងឬផ្ទាំង។ ប៉ុន្តែអ្នកអាចបង្កើតរូបភាពរវើរវាយចេញពីអ្វីគ្រប់យ៉ាង។

ឯកសារបង្រៀននេះត្រូវបានបង្កើតឡើងដើម្បីជួយអ្នកបង្កើតរូបភាពវិលជុំមួយនៅក្នុង Dreamweaver ។ វាត្រូវបានបម្រុងទុកសម្រាប់ប្រើដោយមនុស្សដែលប្រើកំណែ Dreamweaver ដូចខាងក្រោម:

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

តម្រូវការសម្រាប់ការបង្រៀននេះ

• Dreamweaver
  កំណែមួយក្នុងចំណោមកំណែដែលបានរាយខាងលើ។
• រូបភាពដើម
  ធ្វើឱ្យប្រាកដថាដើម្បីបង្កើនប្រសិទ្ធភាពរូបភាពនេះ។ វានឹងជួយឱ្យទំព័ររបស់អ្នកដំណើរការលឿនជាងមុន។
• រូបភាពវិលជុំ
  រូបភាពនេះគួរតែជាវិមាត្រដូចរូបភាពដើម។ និង, ដូចជារូបភាពដើម, គួរត្រូវបានធ្វើឱ្យប្រសើរឡើងដើម្បីជួយដងផ្ទុកទំព័រ។
• ទំព័របណ្ដាញ
  នេះជាទំព័រ HTML ដែលអ្នកនឹងដាក់រូបភាពវិលជុំរបស់អ្នក។

01 នៃ 06

ចាប់ផ្ដើម

1. ចាប់ផ្តើម Dreamweaver
2. បើកទំព័របណ្ដាញដែលអ្នកចង់ឱ្យការភ្នាល់វិលជុំរបស់អ្នក

02 នៃ 06

បញ្ចូលវត្ថុរូបភាពរូបភាពលើសលប់

Dreamweaver ធ្វើឱ្យមានភាពងាយស្រួលក្នុងការបង្កើតរូបភាពវិលជុំមួយ។

1. ចូលទៅម៉ឺនុយបញ្ចូលនិងចុះក្រោមទៅម៉ឺនុយរង "វត្ថុរូបភាព" ។
2. ជ្រើសយក "រូបភាពវិលជុំ" ឬ "រូបភាពដែលបានតំរែតំរង់"

កំណែចាស់របស់ Dreamweaver ហៅវត្ថុរូបភាព "រូបភាពអន្តរកម្ម" ជំនួសវិញ។

03 នៃ 06

ប្រាប់ឌីវីឌីវ៉េសអ្វីដែលរូបភាពត្រូវប្រើ

Dreamweaver បង្ហាញប្រអប់មួយដែលមានវាលដែលអ្នកត្រូវការបំពេញដើម្បីបង្កើតរូបភាពវិលជុំរបស់អ្នក។

ឈ្មោះរូបភាព

ជ្រើសរើសឈ្មោះរូបភាពដែលមានតែមួយសម្រាប់ទំព័រ។ វាគួរតែជាពាក្យមួយប៉ុន្តែអ្នកអាចប្រើលេខ, សញ្ញាគូសក្រោម (_) និងសហសញ្ញា (-) ។ វានឹងត្រូវបានប្រើដើម្បីកំណត់អត្តសញ្ញាណរូបភាពដើម្បីផ្លាស់ប្តូរ។

រូបភាពដើម

នេះគឺជា URL ឬទីតាំងនៃរូបភាពដែលនឹងចាប់ផ្តើមនៅលើទំព័រ។ អ្នកអាចប្រើ URLs ដែលទាក់ទងឬពេញលេញ នៅក្នុងវាលនេះ។ នេះគួរជារូបភាពដែលមាននៅលើម៉ាស៊ីនបម្រើបណ្ដាញរបស់អ្នកឬអ្នកនឹងផ្ទុកឡើងជាមួយទំព័រ។

រូបភាពវិលជុំ

នេះជារូបភាពដែលនឹងលេចឡើងនៅពេលអ្នក mouse លើរូបភាព។ ដូចរូបភាពដើមនេះអាចជាផ្លូវពេញលេញឬទាក់ទងចំពោះរូបភាពហើយវាគួរតែមានឬត្រូវបានផ្ទុកឡើងនៅពេលដែលអ្នកអាប់ឡូតទំព័រ។

ផ្ទុករូបភាពវិលជុំមុន

ជម្រើសនេះត្រូវបានជ្រើសរើសតាមលំនាំដើមពីព្រោះវាជួយឱ្យការភ្នាល់វិលលឿនជាងមុន។ ដោយជ្រើសរើសការផ្ទុករូបភាពវិលជុំជាមុនកម្មវិធីរុករកបណ្តាញនឹងរក្សាទុកវានៅក្នុងឃ្លាំងសម្ងាត់មួយរហូតដល់កណ្តុររមៀលលើវា។

អត្ថបទជំនួស

អត្ថបទជំនួសដ៏ល្អ ធ្វើឱ្យរូបភាពរបស់អ្នកអាចចូលដំណើរការបានកាន់តែច្រើន។ អ្នកគួរតែប្រើប្រភេទនៃអត្ថបទជំនួសនៅពេលបញ្ចូលរូបណាមួយ។

នៅពេលចុចត្រូវទៅ URL

មនុស្សភាគច្រើននឹងចុចលើរូបភាពនៅពេលពួកគេឃើញរូបមួយនៅលើទំព័រ។ ដូច្នេះអ្នកគួរតែស្ថិតនៅក្នុងទម្លាប់នៃការធ្វើឱ្យពួកគេអាចចុចបាន។ ជម្រើសនេះអនុញ្ញាតឱ្យអ្នកបញ្ជាក់ទំព័រឬ URL ដើម្បីឱ្យអ្នកមើលនៅពេលដែលពួកគេចុចលើរូបភាព។ ប៉ុន្តែជម្រើសនេះមិនចាំបាច់ដើម្បីបង្កើតការភ្នាល់វិលជុំទេ។

នៅពេលដែលអ្នកបានបំពេញវាលទាំងអស់, ចុចយល់ព្រមដើម្បីឱ្យ Dreamweaver បង្កើតរូបភាពវិលជុំរបស់អ្នក។

ទំព័របន្ទាប់បង្ហាញស្គ្រីបដែល Dreamweaver សរសេរ។

04 នៃ 06

Dreamweaver សរសេរ JavaScript សម្រាប់អ្នក

ប្រសិនបើអ្នកបើកទំព័រជាទិដ្ឋភាពកូដអ្នកនឹងឃើញថា Dreamweaver បញ្ចូលប្លុក JavaScript នៅក្នុង នៃឯកសារ HTML របស់អ្នក។ ប្លុកនេះរួមបញ្ចូលទាំងអនុគមន៍ 3 ដែលអ្នកត្រូវការដើម្បីឱ្យរូបភាពផ្លាស់ប្តូរនៅពេលដែលកណ្តុររមៀលលើពួកវានិងមុខងារផ្ទុកមុនប្រសិនបើអ្នកជ្រើសរើសយកវា។

មុខងារ MM_swapImgRestore ()
មុខងារ MM_findObj (n, d)
មុខងារ MM_swapImage ()
មុខងារ MM_preloadImages ()

05 នៃ 06

Dreamweaver បន្ថែម HTML សម្រាប់ Rollover

ប្រសិនបើអ្នកជ្រើសរើស Dreamweaver មុនផ្ទុករូបភាពវិលជុំបន្ទាប់មកអ្នកនឹងឃើញកូដ HTML នៅក្នុងតួនៃឯកសាររបស់អ្នកដើម្បីហៅស្គ្រីបមុនដើម្បីឱ្យរូបភាពរបស់អ្នកផ្ទុកច្រើនយ៉ាងឆាប់រហ័ស។

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

Dreamweaver ក៏បន្ថែមកូដទាំងអស់សម្រាប់រូបភាពរបស់អ្នកហើយភ្ជាប់វាផងដែរ (ប្រសិនបើអ្នកបញ្ចូល URL) ។ ផ្នែករ៉ូបូតត្រូវបានបន្ថែមទៅស្លាកយុថ្កាជាគុណលក្ខណៈ onmouseover និង onmouseout ។

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

06 នៃ 06

សាកល្បងការភ្នាល់វិលជុំ

សូមមើលរូបភាពវិលជុំដែលមានមុខងារពេញលេញនិងរៀនពីអ្វីដែលមាននៅក្នុងចិត្តរបស់ Shasta'` ។