របៀប​បង្ហាញ information ពេល ដាក់ Mouse នៅលើ​រូបភាព (Flipping) ជាមួយ CSS

សួស្ដីប្រិយមិត្តអាន-ANT ​ទាំងអស់​គ្នា កាលពីលេខមុន អាន-ANT បានលើកយកការ​បង្ហាញ Information នៃរូប​នីមួយៗ ដោយ​ប្រើ​ប្រាស់ JavaScript មក​បង្ហាញ​ជូន​លោកអ្នក ដែល​គេហៅថា Tooltip ។ ប៉ុន្តែ​ខណៈពេលនេះអាន-ANT សូមលើកយកការ​ប្រើ CSS ដើម្បី​បង្ហាញ Information អំពី​រូបភាព​វិញម្ដង ដែល​គេ​ឲ្យ​ឈ្មោះ​ថា Flipping ។ ការ​ប្រើ​ប្រាស់ Flipping អាចកាត់​បន្ថយ​ការ​សរសេរ​កូដនិង ចំណេញ​ Space នៅ​ក្នុង​គេហទំព័រ ម្យ៉ាង​វិញទៀតការ​ប្រើ​ប្រាស់ Flipping ជួយធ្វើ​ឲ្យ គេហទំព័រ របស់អ្នក​មានភាពស្រស់​ស្អាត និងភាពទាក់ទាញ ។

សូមចុច Like គេហទំព័រ www.antkh.com ដើម្បី​ទទួលបានអត្ថបទថ្មីៗ​ប្រចាំ​ថ្ងៃ​

កូដ HTML 

· រូប​ខាងលើ

- <div class=”flip-container”> </div> ​សម្រាប់​គ្រប់គ្រង Flipper យើង​ទាំងមូល​

- <div class=”flipper”> </div> ​សម្រាប់​គ្រប់គ្រង​ផ្នែក​ខាងមុខនិង ខាងក្រោយ

- <div class=”front”> </div> ​សម្រាប់​ដាក់​ព័ត៌មាន​នៅ​ផ្នែក​ខាងមុខ

- <div class=”class=”back”> </div> ​សម្រាប់​ដាក់​ព័ត៌មាន​នៅ​ផ្នែក​ខាងក្រោយ

 កូដ CSS

· រូប​ខាងលើ​

- បន្ទាត់ទី៨ ដល់ទី១២ សម្រាប់​ការដាក់ បន្ទាត់ជុំវិញ Information និង កម្ពស់​របស់វា

- បន្ទាត់ទី១៤ ដស់ទី១៦ គឺជា​ចំណុច​សំខាន់ ដើម្បី​ឲ្យ​មានការត្រឡប់​រូបភាព​ទៅខាងក្រោយ នៅពេល​ដាក់ Mouse ពីលើ រូបភាព​

- បន្ទាត់ទី២២ ដល់ទី២៦ សម្រាប់​ដាក់​ល្បឿន និង ចលនា​ទៅលើ Flipper

- បន្ទាត់ទី២៩ ដល់ទី៣៤ សម្រាប់​ដាក់​ឲ្យ <div class=”front”> </div> និង <div class=”back”> </div> នៅពីលើទីតាំងតែមួយ

- បន្ទាត់ទី៤១ ដល់ទី៤៥ សម្រាប់​ដាក់ <div class=”front”> </div> ​ឲ្យ​ទៅខាងក្រោយ

(នៅ​ក្នុង Browser Firefox) ​នៅពេល​ដាក់ Mouse ​នៅលើ​រូបភាព

- បន្ទាត់ទី៤៧ ដល់ទី៤៩ ក៏​ជា​ចំណុច​សំខាន់​ដែរ ដែល​ធ្វើ​ឲ្យ​អក្សរមិនមានការបញ្រ្ចាស់ និងធ្វើ​ឲ្យ​ត្រឡប់​រូបភាព​មកវិញ​នៅពេល​ដក Mouse ចេញ

♥♥ រៀបរៀងអត្ថបទដោយ៖ លោក សំ រិទ្ឋី ត្រួត​ពិនិត្យ និងកែ​សម្រួល​អត្ថបទដោយ៖ លោក ជា សែនកុសល

♥♥ មុខវិជ្ផា HTML+HTML5+Dreamweaver តម្លៃ ៥៥ដុល្លា ឬ ២២០០០០រៀល សម្រាប់ Course Outline នៃ​វគ្គ​ http://training.antkh.com/html.aspx

♥♥ មុខវិជ្ផា Web Design with CSS + Bootstrap តម្លៃ ៨០ដុល្លា ឬ ៣២០០០០រៀល សម្រាប់ Course Outline នៃ​វគ្គ​នេះ http://training.antkh.com/website_design_with_css.aspx

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

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