For Android device For iOS device
២៩
សីហា

ការពង្រីកពង្រួម​រូបភាព​ដោយ​ប្រើ Javascript

ដើម្បី​ធ្វើការ​ពង្រីកពង្រួម​រូបភាព​ដែល​មាន​លក្ខណៈ​ដូចរូប​ខាងក្រោម​យើងត្រូវ​ប្រើ​ប្រាស់​ Javascript ​ជាមួយនឹង​ CSS

ដើម្បី​សរសេរ​បានយើងត្រូវយល់​នូវ​ចំណុច​សំខាន់​ៗ​ពីរ៖

1. ការ​ប្រើ​ប្រាស់​ DOM (Document Object Model) របស់ Javascript សំដៅ​ទៅលើ​ការចាប់យក ​ឈ្មោះ​សម្គាល់ របស់ HTML Tag ​តាមរយៈ​ការ​ប្រើ​ប្រាស់​

2. ​ប្រើ​ប្រាស់​ style ជាមួយ Javascript

យើងដឹងហើយថា javascript អាច​សរសេរ​ជាមួយ style CSS និងអាច​ប្រើ​ប្រាស់​នូវ property ជា​ច្រើន​ដែល​មាននៅ​ក្នុង​ CSS imgcar គឺជាអថេរ​ដែល​តំណាង​ឲ្យ​រូបភាព​ដែល គេចាប់យក​តាមរយៈ​កូដ Javascript ដូច​ខាងលើ ។

របៀប​សរសេរ​មាន​លក្ខណៈ​ដូច​ខាងក្រោម ៖

img.style.propertyname = “value”

ឧទាហរណ៍​

imgcar.style.width=”300px”

​ខាងក្រោម​នេះគឺជាកូដទាំងស្រុងនៃការពង្រីកពង្រួម​រូបភាព​របស់យើង

ពន្យល់កូដ

· បន្ទាត់ទី ៣២៖ ជាការ​បង្ហាញ​រូបភាព​ឡាន​នៅពេល​ដែល​យើង run

· បន្ទាត់ទី ៣៤ ដល់ ៣៦៖ នេះជា HTML កូដ​ប្រើ​សម្រាប់​បង្កើត​ប៊ូតុង ដោយប៊ូតុងទី១ មានពាក្យថា តូចប៊ូតុងទី២ មានពាក្យថា មធ្យមនិង ប៊ូតុងទី៣ មានពាក្យថា ធំ ។ ប៊ូតុងទាំង៣នឹងអនុវត្តន៍​នូវ OnClick event ​ដែល​មាន​ន័យថាវា​នឹងអនុវត្ត function ​ដែល​យើងបាន​បង្កើត ។ នៅក្រោយសញ្ញាស្មើនៃពាក្យ OnClick ដាក់​ក្នុង​ចន្លោះសញ្ញាធ្មេញកណ្តុរ វាគឺជា event ​ដែល​អនុវត្ត function នោះ​នៅពេល​ដែល user បាន click ​ទៅលើ​ប៊ុតុង​ណាមួយ ។

· បន្ទាត់ទី ៨ ដល់ ២៤៖ យើងបាន​បង្កើត​ function ចំនួន ៣ គឺ function small () , normal () និង big () ​ដែល​នៅ​ក្នុង​ function នោះមាន ការប្រកាស អថេរ imgcar ដើម្បី​ធ្វើការ​ចាប់យក ​ឈ្មោះ​របស់រូប ភាព​ដែល​មាន id សំគាល់ (car) ​បន្ទាប់មក​ទៀតយើងយក អរថេរ​ដែល​យើង បានប្រកាស​ខាងលើ​មក​ប្រើ​ ជាមួយ style ដើម្បី​ធ្វើការ​ផ្លាស់ប្តូរ ទទឹង (width) និង ​កម្ពស់​ (height) របស់​រូបភាព​ទៅតាម​ កូដដូច​ខាងក្រោម ៖

*** ដកស្រង់ចេញពី​ទស្សនាវដ្ដី​អាន-ANT ច្បាប់​ទី ៣៨ ប្រចាំខែ ឩសភា ឆ្នាំ ២០១៦

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

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