សីហា
របៀបបង្កើត រូបភាព Slide Show ប្រើប្រាស់ JavaScript
កន្លងមកអ្នកទាំងអស់គ្នា បានយល់ដឹងច្រើនអំពីវិធីក្នុងការបង្កើតគេហទំព័រដោយប្រើប្រាស់ HTML, CSS Style ហើយព្រមទាំង JavaScript ផងដែរ ។
យើងខ្ញុំ បានលើកយកពីរបៀបនៃការសរសេរកូដដោយប្រើប្រាស់ JavaScript ដើម្បីបង្ហាញរូបភាពជា Slide Show ។
មិត្តអ្នកអានធ្លាប់បានដឹងពីលេខមុនរួចមកហើយថាហេតុអ្វីបានជាយើងចុះផ្សាយអំពីវិធីក្នុងការបិទ Flash លើគេហទំព័រពេលដែលវា បើកមកភ្លាម?មូលហេតុនេះមកពី Flash វាធ្វើឲ្យគេហទំព័ររបស់អ្នកយឺតសម្រាប់អ្នកចូលទស្សនាដូចោ្នះហើយការសរសេរកូដក្នុង កម្មវិធី Flash ក៍អាចឲ្យលោកអ្នកបង្កើតរូបភាពជាលក្ខណៈ SlideShow បានដែរក៏ ប៉ុន្តែវានឹងធ្វើឲ្យគេហទំព័ររបស់អ្នកមានភាពយឺត ។ ដូចនេះហើយទើបបានជា ទស្សនាវដ្ដីយើងខ្ញុំបានលើកយកពីវិធីក្នុងការបង្កើត ¬រូបភាព Slide show ជាមួយកូដ JavaScript វិញវាអាចជួយឲ្យគេហទំព័រមានភាពលឿនជាងការសរសេរជាមួយ Flash កូដ ។ វិធីក្នុងការបង្កើត
សូមអ្នកអនុវត្តន៍តាមជំហានដូចខាងក្រោម៖
១. ការបង្កើត File សម្រាប់បង្ហាញរូបភាព
/* Style Definitions */ table.MsoNormalTable {mso-style-name:"Table Normal"; mso-tstyle-rowband-size:0; mso-tstyle-colband-size:0; mso-style-noshow:yes; mso-style-priority:99; mso-style-qformat:yes; mso-style-parent:""; mso-padding-alt:0in 5.4pt 0in 5.4pt; mso-para-margin:0in; mso-para-margin-bottom:.0001pt; mso-pagination:widow-orphan; font-size:11.0pt; font-family:"Calibri","sans-serif"; mso-ascii-font-family:Calibri; mso-ascii-theme-font:minor-latin; mso-hansi-font-family:Calibri; mso-hansi-theme-font:minor-latin; mso-bidi-font-family:DaunPenh; mso-bidi-theme-font:minor-bidi;}
ដំបូងសូមអ្នកធ្វើការបើក Text Editor ណាមួយក៏បាន រួចធើ្វការសរសេរកូដដូចខាងក្រោមបន្ទាប់មកដាក់ឈ្មោះវាថា slideshow.html
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/ DTD/ xhtml1-transitional.dtd"><html><head>
<title>Image Slide Show</title></head>
<body><div class="content_titleimage">Image Slide Show</div>
<div class="content_image">
<img src="images/image2.png" id="myImage" />
</div></body>
</html>
២. ការង្កើត CSS Style សម្រាប់រូបភាព
សូមអ្នកបង្កើត File ថ្មីមួយទៀតដាក់ឈ្មោះថា style.css រួចសរសេរកូដដូចខាងក្រោម.content_titleimage {
margin:0 auto;
width:200px;
color:#FF0000;
background-color:#CCCCCC;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
font-size:14px; border:#666666 dashed 1px;
padding-top:10px;
padding-bottom:10px;}
.content_image { text-align:center;margin:0 auto; width:200px;
font-family:Arial, Helvetica, sans-serif;
background-color:#E2E2E2; padding-top:20px; padding-bottom:20px; border:#666666 dashed 1px;}
- .content_titleimage ប្រើសម្រាប់កំណត់ style ទៅឲ្យ div tag ដែលបានបង្កើតនៅក្នុង slideshow.html មានមុខងារ សម្រាប់បង្ហាញ Title របស់រូបភាព ។
- .content_image ប្រើសម្រាប់កំណត់ style ទៅឲ្យ div tag ដែលបានបង្កើតនៅក្នុង slideshow.html មានមុខងារ សម្រាប់បង្ហាញ Style ទាំងមូលនៃរូបភាព ។
៣ របៀបបញ្ចូល Style ទៅក្នុង slideshow
អ្នកត្រូវបញ្ចូល style.css file ទៅកាន់ slideshow.hmtl ដើម្បីធ្វើបានដូចនេះសូមធ្វើដូចខាងក្រោម៖
<head>
<title>Image Slide Show</title><link href="style.css" rel="stylesheet" type="text/css" />
</head>
- លោកអ្នកត្រូវចងចាំថា នៅពេលដែលអ្នកចង់ប្រើប្រាស់ Style របស់ CSS ពីខាងក្រៅ File អ្នកត្រូវ បញ្ចូលវានៅក្នុង <head>…</head> ជាដាច់ខាត ។
¬-រួចសូមអ្នកបង្កើតនៅ folder មួយដាក់ឈ្មោះវាថា images ដោយ ដាក់រូបភាពដូចរូបខាងក្រោម៖
បន្ទាប់មកសូមអ្នកធ្វើការ ចុចពីរដងលើ slideshow.html អ្នកនឹងឃើញលទ្ធផលដូចខាងក្រោម៖
៤. ដាក់រូបភាពមានចលនាជា Slide show
ជំហាននេះជាជំហានមួយដែលអ្នកត្រូវធ្វើការសរសេរ កូដ JavaScript ដើម្បីធ្វើឲ្យរូបភាពរបស់អ្នក មានចលនាផ្លាស់ប្តូរជា Slide show ។ សូមអ្នកបង្កើតនៅ file មួយពី Text Editor ដោយធ្វើការសរសេរកូដដូចខាងក្រោម រូចដាក់ឈ្មោះឲ្យវាថា script.js ៖
var count=0;function imageSlideShow () {//define image' name as arrayvar img = new Array ("image1","image2","image3","image4") ;
if (count<img.length) {
document.getElementById ("myImage") .src = "images/"+img [count] +".png"; count++;
}
else {
count=0; //show image after count equal array size document.getElementById ("myImage") .src = "images/image5.png";
}
//Set Timeout for image slide show setTimeout ("imageSlideShow () ", 2000) ;}
- var count=0 សម្រាប់កំណត់ឲ្យការចាប់ផ្តើមរបស់រូបភាពនៅក្នុង Array ។
- function imageSlideShow () {
//កន្លែងសរសេរកូដ} ជាឈ្មោះនៃ Function ដែលត្រូវយកទៅប្រើប្រាស់ដើមបង្កើត រូបភាពឲ្យមានចលនា ជា Slide Show ។
- var img = new Array ("image1","image2","image3","image4") ;
កំណត់ចំនួននៃឈ្មោះរបស់រូបភាពដែលត្រូវប្រើប្រាស់ក្នុងការបង្ហាញ ត្រូវកំណត់ឈ្មោះរូបភាពទាំងអស់នៅក្នុង Array ដែលមានឈ្មោះថា img ។
- if (count<img.length) សម្រាប់ធ្វើការបង្ហាញឲ្យរូបភាមានការផ្លាស់ប្តូរពីរូបភាពមួយទៅរូបភាពមួយនៅ ពេលដែល ការរាប់រូបភាពតាមរយៈ count តូចជាង ចំនួនរូបភាពដែលផ្ទុកនៅក្នុង img array ត្រង់លក្ខខ័ណ្ឌ នេះរូបភាពនឹងធ្វើការបង្ហាញខុសៗគ្នានៃរូបភាពទាំងអស់ ។
- document.getElementById ("myImage") .src = "images/"+img [count] +".png";
ជាកន្លែងដែលរូបភាពត្រូវការបង្ហាញតាមរយៈ count តូចជាង ចំនួន រូបភាពក្នុង img array ។ ដូចោ្នះត្រង់ <img/> ដែលមាន id= “myImage” នឹងត្រូវប្រើប្រាស់ដោយកូដ JavaScript ដើម្បីផ្លាស់ប្តូររូបភាព ។
- else { …. } ជាប្លុកនៃកូដនៅពេលដែល ចំនួននៃ count ធំជាង ចំនួនរូបភាពដែលស្ថិតនៅក្នុង img array បន្ទាប់មកយើងត្រូវឲ្យរូបភាពនេះចាប់ផ្តើមពីរូបភាពទី១វិញ អ្នកត្រូវកំណត់ឲ្យ count ស្មើនឹងសូន្យ ។ - setTimeout ("imageSlideShow () ", 2000) ; សម្រាប់កំណត់រយៈពេលនៃការបង្ហាញពី រូបភាពមួយទៅរូបភាពមួយទៀតដែលមានលក្ខណៈជា Slide Show ។
- បន្ទាប់មកសូមអ្នកបញ្ចូល ¬file នេះទៅក្នុង slideshow.html សូមមើលដូចខាងក្រោម៖
<head>
<title>Image Slide Show</title>
<link href="style.css" rel="stylesheet" type="text/css" /><script src="script.js" type="text/javascript">
</script></head>
- ដើម្បីដំណើរការកូដក្នុង script.js ទៅក្នុង file slideshow.html អ្នកត្រូវធ្វើការហៅឈ្មោះ imageSlideShow () function កូដយកមកប្រើប្រាស់ដូចខាងក្រោមនេះ៖
<body onload="imageSlideShow () ">... </body> រាល់ពេលដែល គេហទំព័ររបស់អ្នក បើកវានឹងដំណើរនៅ កូដនេះ ។ បន្ទាប់ពីអ្នកបង្កើតវារូចរាល់ហើយ សូមអ្នកចុចលើ sldeshow.html ពីរដងអ្នកនឹងឃើញរូបភាពរបស់អ្នកផ្លាស់ប្តូរ ជាលក្ខណៈ Slide show ។ អ្នកនឹងឃើញលទ្ធផលដូចខាងក្រោម៖ 
អត្ថបទនេះដកស្រង់ចេញពីទស្សនាវដ្ដី អាន "ANT" ច្បាប់ទី ២១ ចេញផ្សាយខែ ធ្នូ ឆ្នាំ ២០១០ ។
មតិ និងយោបល់ទៅលើអត្ថបទនេះ (តាម Facebook)
ខាងក្រោមនេះជាយោបល់ផ្សេងៗរបស់អ្នកទស្សនា