For Android device For iOS device

កញ្ញា

ការ​បង្កើត Tooltip ស្រស់​ស្អាត​ជាមួយ JavaScript

កែ​សម្រួល​ឡើងវិញ ខែសីហា ឆ្នាំ ២០១៦​

​ក្នុង​អត្ថបទនេះ​អាន-ANT www.antkh.com នឹងលើកយកពីរបៀប​ក្នុង​កា​បង្កើត Tooltip រួម​ជាមួយនឹង​ការលេង Style មួយចំនួន​ទៅលើ​ Tooltip មក​បង្ហាញ​លោកអ្នក​ដោយ​ប្រើ​ប្រាស់ HTML, CSS និង JavaScript បញ្ចូល​ជាមួយ​គ្នា ។ សូមមើលរូ​ប​ខាងក្រោម​៖

កូដ​ខាងក្រោម​នេះគឺជា Style មួយចំនួន​សម្រាប់​ដាក់ទៅ​ឲ្យ Tooltip ​ក៏​ដូចជា Element ផ្សេងៗ​ទៀត ដើម្បី​ឲ្យ​ភាពស្រស់​ស្អាត ដូចជា ការដាក់ border, ការដាក់ផ្ទៃ Background, ការដាក់ពណ៌អក្សរ, ការ​កំណត់​ទំហំ​ទទឹង និងការ​កំណត់​ឲ្យ​វានៅចំកណ្ដាលជាដើម ។

​ខាងក្រោម​នេះគឺជាកូដ HTML 

​ក្នុង​កូដ HTML ​ខាងលើ​យើងសង្កេតឃើញមាន function ពីរគឺៈ function show () និង function moveOut () ​ដែល​បានហៅមក​ប្រើ​ប្រាស់​នៅ​ក្នុង កូដ HTML របស់យើង ដោយដាក់ Event ពីរទៅ​ឲ្យ​វា ។ នៅ​ក្នុង Event onousemove បានហៅ Function show (this) មក​ប្រើ ហើយ “this” នៅ​ក្នុង Function នេះ​សម្រាប់​ចាប់យក Current id (id=”1”, id=”2” , id=”3”) ​នៅពេល​ដែល​អ្នក​ប្រើ​ប្រាស់​យក mouse មកដាក់​ខាងលើ​រូបភាព វានឹង​បង្ហាញ tooltip ​ទៅតាម​រូបភាព​នីមួយៗ ។ ​ចំណែក​ឯ Event onmouseout បានហៅ Function moveOut () មក​ប្រើ វាមាន​តួនាទី សម្រាប់​លាក់ tooltip ទៅវិញ​នៅពេល​ដែល​អ្នក ផ្លាស់ប្ដូរទីតាំងរបស់ mouse ចេញពី block ​ដែល​ចង់​បង្ហាញ tooltip

​ខាងក្រោម​នេះគឺជាកូដនៅ​ក្នុង JavaScript :

កូដ​ខាងលើ​នេះ Function moveBox (event) មាន​តួនាទី​សម្រាប់​កំណត់​ឲ្យ Tooltip រត់តាម mouse ​នៅពេល​យើងរំកិល​នៅលើ​រូប​នីមួយៗ ។

·  var x = event.clientX; ​សម្រាប់​ចាប់យកទីតាំង x របស់​ Tooltip

· var y = event.clientY; សម្រាបចាប់យកទីតាំង y របស់ Tooltip

កូដ​ខាងលើ​នេះ Function show (getId) មាន​តួនាទី​សម្រាប់​ធ្វើការ​បង្ហាញ Tooltip ​នៅលើ​រូបភាព​នីមួយៗ ។ getId គឺជា parameter ​ដែល​ប្រើ​សម្រាប់​រក្សា id របស់ រូបភាព​នីមួយៗ ដែល​ចាប់បាន ដោយ show (this) នៅ​ក្នុង​ HTML ​ខាងលើ ។

· Block ​ដែល​បានគូសបន្ទាត់ក្រហមព័ទ្ធជុំវិញ គឺជាកន្លែង​សិក្សា​លក្ខខណ្ឌ ដើម្បី​បោះ​ទិន្នន័យ ទៅកាន់ Tooltip ​រូបភាព​តាម​រូបភាព​នីមួយៗ ។

· Document.getElementById (‘tooltip’) .innerHTML=text; ​សម្រាប់​ធ្វើការ​បញ្ចូន​តម្លៃ​ទៅ​ឲ្យ div មួយ​ដែល​មាន id=”tooltip”

· moveBox (event) គឺ​ធ្វើការ​ហៅ function មក​ប្រើ​នៅពេល move mouse ​នៅលើ​រូបភាព ។

កូដ​ខាងលើ​នេះ Function moveOut () មាន​តួនាទី​សម្រាប់​ធ្វើការ​លាក់ tooltip ទៅវិញ​នៅពេល move mouse ចេញក្រៅ ។

​ចំណាំ​៖ កូដ JavaScript នឹងមិន​ដំណើរ​ការ​នៅលើ Browser Firefox នោះទេ ។

*** មុខវិជ្ផា JavaScript តម្លៃ ៧០ដុល្លា ឬ ២៨០០០០រៀល សម្រាប់ Course Outline នៃ​វគ្គ​នេះ http://training.antkh.com/

*** សម្រាប់​ស្នាដៃសិស្ស​ដែល​បាន​បញ្ចប់​វគ្គ​គេហទំព័រជា​ច្រើន នៅអាន-ANT http://training.antkh.com/achievements/?c=web

*** សូម​ចូលរួម​ជាសមាជិក ANT Training Group ដើម្បី​តាមដានសម្មភាពប្រចាំ​ថ្ងៃ​ជាមួយអាន-ANT
*** ចុច Like គេហទំព័រ www.antkh.com ដើម្បី​ទទួលបានអត្ថបទថ្មីៗ​ដែល​ទាក់ទងនឹង​បច្ចេកវិទ្យា​រៀងរាល់​ថ្ងៃ​

*** ដកស្រង់ចេញពី​ទស្សនាវដ្ដី​អាន-ANT ច្បាប់​ទី ០២ ប្រចាំខែ សីហា ឆ្នាំ ២០០៨ បានកែ​សម្រួល​ឡើងវិញនៅខែ សីហា ឆ្នាំ ២០១៦

មតិ និង​យោបល់​ទៅលើ​អត្ថបទ​នេះ (តាម Facebook)

ខាងក្រោម​នេះ​ជា​យោបល់​ផ្សេងៗ​របស់​អ្នកទស្សនា