6:14 PM
seyha hun
វា ទាក់ទងនៅកូដ JavaScript ដើម្បីដំណើរការ ក្នុងការពង្រីករូបភាព (Zoom out) របស់អ្នកនៅក្នុងគេហទំព័រដែលតូចឲ្យទៅជាធំបាន ឬក៏បង្រួមរូបភាព (Zoom in) ពីធំឲ្យទៅជាតូចវិញក៏បាន ។
មុននិងអ្នកចាំបាច់ ត្រូវប្រើប្រាស់កូដនេះ អ្នកត្រូវដឹងថា ហេតុអ្វីបានជាអ្នកត្រូវដឹងអំពីកូដនេះ? អ្នកត្រូវដឹងថាការប្រើនៅរូបភាពដែលធំៗនៅលើ គេហទំព័រអាចឲ្យ អ្នកចូលទស្សនាមានភាពពិបាកក្នុងការទស្សនា មិនថែមតែប៉ុណ្ណោះ វាអាចបណ្តាល ឲ្យគេហទំព័ររបស់អ្នក មានភាពយឺតនៅពេលបើកម្តងៗ ។
ដូច្នោះហើយអ្នកត្រូវចេះ ប្រើប្រាស់វិធីសាស្រ្តយ៉ាងណា ដើម្បីធ្វើឲ្យ រូបភាពរបស់អ្នក មានភាពតូចល្មម ដែលអ្នកអាចមើលវាបាន ។ បន្ទាប់មក បើសិនជាអ្នកចង់មើលរូបភាពធំនោះ អ្នកគ្រាន់តែចុចលើរូបភាពតូចនោះវានឹងបង្ហាញរូបភាពធំសម្រាប់អ្នក ។
សូមមើលការណែនាំក្នុងការបបង្កើតនៃជំហាននីមួយៗដូចខាងក្រោម៖
១.ជំហានទី១
សូមអ្នក ធ្វើការបើកនៅកម្មវិធី Text Editor មួយណាក៏បាន ដូចជាកម្មវិធី Notepad ដោយធ្វើការសរសេរកូដដូចខាងក្រោម រួចដាក់ឈ្មោះវាថា index.html ។<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
><head><title>Zoom in/Zoom out images</title>
</head>
<body>
<div class="hold_border">
<div class="title">NOKIA 2610</div>
<center><span id="contents">
<img onclick="zoomOut () " src="images/image1.png" title="Zoom Out" align="middle" /></span></center>
<p>The Nokia 2610 is an easy to use device thatcombines multiple messaging options including email, instant messaging, and more. You can even download MP3 ringtones, graphics, and games straight to the phone, or surf the Internet with Cingular's MEdia Net service. It's the perfect complement to Cingular service for those even remotely interested in mobile Web capabilities in an affordable handset.</p>
</div>
</div></body></html>- <div class="hold_border"> សម្រាប់ធ្វើការកំនត់ Style ទៅ ឲ្យទីតាំងនៃ គេហទំព័រទាំងមូល ត្រូវបានប្រើប្រាស់ដោយ កូដ Style sheet ។- <div class="title"> សម្រាប់កំនត់ដាក់ Style ទៅឲ្យ ចំណងជើងរបស់ រូបភាព ។ ត្រូវបានប្រើប្រាស់ដោយ កូដ Style sheet ។
- <span id="contents"> សម្រាប់ធ្វើការកំនត់ទីតាំងដែលត្រូវដាក់រូបភាព ដែលត្រូវផ្លាស់ប្តូរនៅពេលដែលអ្នកបានចុច លើរូបភាពនោះ ។ ហើយវាត្រូវបានប្រើប្រាស់ដោយ កូដ Style sheet ហើយនឹង JavaScript ។
១.ជំហានទី២
បន្ទាប់ពីអ្នកបាន ធ្វើការបង្កើតដូចជំហានទី១រួចហើយសូមអ្នក ធ្វើការបន្តជំហានទី២ ។ ជំហានទី២ជាជំហានមួយដែល អ្នកធ្វើការសេរសេរកូដទៅឲ្យ Style Sheet សូមអ្នកធ្វើការបើក កម្មវិធីសម្រាប់ដូចក្នុងជំហានទី១ រួចធ្វើការសេរសេរកូដដូចខាងក្រោម បន្ទាប់មកដាក់ឈ្មោះវាថា style.css ។-សម្រាប់កំនត់ Style ទៅឲ្យព្រំដែនរបស់គេហទំព័រទាំងមូល
.hold_border
{
width:500px;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
border:1px #999999 solid;
padding:0px 0 10px 0;
}
- សម្រាប់ធ្វើការកំនត់ Style ទៅឲ្យចំណងជើងរបស់រូបភាព
.title
{
background-color:#CAE4FF;
padding:10px;
color:#FF0000;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
margin-bottom:10px;
}
- សម្រាប់ធ្វើការកំនត់ Style ទៅឲ្យទីតាំងដែលត្រូវដាក់រូបភាព មិនថែមតែប៉ុណ្ណោះវាអាចត្រូវបានប្រើប្រាស់ ដោយកូដ JavaScript ដើម្បីធ្វើការប្តូរូបភាពផងដែរ
#contents {
text-align:center;
}
- សម្រាប់ធ្វើការកំនត់ Style ទៅឲ្យ mouse នៅពេលដែលដាក់លើរូបភាព ពេលខ្លះ Browser ខ្លះមិនបានបង្ហាញទេ
img:hover
{
cursor:hand;
}
- សម្រាប់ធ្វើការកំនត់ Style ទៅឲ្យផ្ទៃនែអក្សរក្នុងមួយ Paragraph
p
{
padding:10px;
text-align:justify;
}
១.ជំហានទី៣
សូមធ្វើបង្កើតកូដសម្រាប់ JavaScript ដោយសរសេរកូដ ដូចខាងក្រោម រួចដាក់ឈ្មោះវាថា script.jsfunction zoomOut () {document.getElementById ('contents') .innerHTML= '<img id="contant" onclick="zoomIn () " src="images/image2.png" align="middle" title="Zoom In" />';} function zoomIn () {margin:0 auto;
document.getElementById ('contents') .innerHTML = '<img onclick="zoomOut () " title="Zoom Out" src="images/image1.png" align="middle" />';
} - function zoomIn () ជាប្លុកនៃកូដដែលធ្វើការនៅពេល ដែល អ្នកប្រើប្រាស់ចង់បង្រួមរូបភាព
- document.getElementById ('contents') .innerHTML សម្រាប់ធ្វើការកំនត់ទីតាំងសម្រាប់ដាក់រូបភាពដោយ ប្រើប្រាស់ឈ្មោះ ¬id របស់ <span> tag ។
១.ជំហានទី៤
បន្ទាប់ពីអ្នកបានសរសេរកូដ style.css ហើយនិងកូដ script.js រួចហើយសូមអ្នកធ្វើការបញ្ចូលកូដទាំងពីរទៅកាន់ <head> . . . </head> នៃ index.html page ដូចខាងក្រោម៖
<head>
<link href="style.css" rel="stylesheet" type="text/css" /> <script src="script.js" type="text/javascript">
</script>
</head>១.ជំហានទី៥
ពេលដែលអ្នកបានបញ្ចប់ជំហានទី៤សូមអ្នកធ្វើការ ចុចពីរដងលើ index.html អ្នកនឹងឃើញលទ្ធផលដូចខាងក្រោម៖
បន្ទាប់ពីអ្នកចុចលើរូបភាពអ្នកនិងបានដូចរូបខាងក្រោម
ចងចាំថា៖ រូបភាពរបស់អ្នកត្រូវមានពីរដែលមានទំហំខុសគ្នា ។អត្ថបទនេះដកស្រង់ចេញពីទស្សនាវដ្ដី អាន "ANT" ច្បាប់ទី ២០ ចេញផ្សាយខែ វិច្ឆិកា ឆ្នាំ ២០១0 ។
0 comments:
Post a Comment