កញ្ញា
បង្ហាញ Zoom Icon នៅលើរូបភាពជាមួយ CSS
ចំនេះដឹងដែលអ្នកអាចយល់ពីអត្ថនេះអ្នកគួរយល់ដឹងខ្លះៗអំពី HTML,Css,Javascript ដែលអ្នកធ្វើការសរសេរវាបញ្ជូលគ្នាដែលបង្កើតបានជាគេហទំព័រមួយ
ក្នុងអត្ថនេះយើង និយាយពីការសរសេរកូដ Css StyleSheet ដើម្បីឲ្យបង្ហាញនៅ Zoom Icon នៅលើ រូបភាពដែលអ្នកចង់បង្ហាញ ។
ជំហាននែការបង្កើត
ជំហានទី១
ត្រូវធ្វើការបង្កើតនៅទីកន្លែងដែលអ្នកចង់ដាក់រូបភាពដើមដែលអ្នកចង់បង្ហាញលើគេហទំព័រ ។ ក្នុងអត្ថនេះយើងបានប្រើប្រាស់<div>…</div> tag សម្រាប់ផ្ទុករូបភាពដើមដែលត្រូវបង្ហាញ ។ ហើយប្រើប្រាស់<span>…</span> tag សម្រាប់ផ្ទុកនៅ Zoom Icon បន្ទាប់ពីអ្នកយក Mouse ដាក់លើរូបភាព ដើម្បីឲ្យបង្ហាញ ។ ដូចកូដដែលបានបង្ហាញដូចខាងក្រោម ៖
<html>
……
<body>
<div id="background">
<a href="#" > <span id= "transbox"></span> </a>
</div></body>
</html>
- id = "background" សម្រាប់កំណត់ id ទៅឲ្យ<div> ..</div> tag សម្រាប់កំណត់ Style រូបភាពដើម នៅក្នុង css_style.css file ។
-id= "transbox" សម្រាប់កំណត់ id ទៅឲ្យ<span> ..</span> tag សម្រាប់កំណត់ Style ទៅឲ្យ Zoom Icon នៅក្នុង css_style.css file
- <a href="#" > . . . </a> ជា Tag ដែលអ្នកចង់បង្ហាញរូបភាពធំ ។ សញ្ញា # ជាទីទាំងដែលអ្នកចង់បង្ហាញគេហទំព័រដែលអ្នកផ្ទុករូបភាពធំដែលអ្នកចង់បង្ហាញនោះ ។
ជំហានទី២
ការសរសេរកូដនៅក្នុង css_style.css សម្រាប់កំណត់ Style ទៅឲ្យ index.html file ។
-ការកំណត់ Style ទៅឲ្យ <div>..</div> tag ដែលផ្ទុករូបដើម ។
#background
{
border:2px solid black;
vertical-align:middle;
-ការកំណត់ Style ទៅឲ្យ <a> . . . </a> tag ជា tag សម្រាប់ធ្វើការ link រូបភាពនៅពេលដែលអ្នក Click Mouse ។ a {
width:200px;
height:134px;
/*សម្រាប់កំណត់ width ហើយ height សម្រាប់ browser ខុសពី IE*/
display:block;
}
-ការកំណត់ Style ទៅឲ្យ <span>. . . </span> សម្រាប់ Zoom Icon មុនពេលដាក់ Mouse លើរូបភាពដែលដំបូងវាត្រូវការ មិនបង្ហាញវាទេ ។
#transbox
{
display:none;
width:32px;
height:32px;
/* សម្រាប់ IE */
background-image:url (zoom.gif) ;
filter:alpha (opacity=50) ;
/* សម្រាប់ទូទៅដែល Support */
opacity:0.50;
}
-ការកំណត់ ទៅឲ្យ¬<span>…</span> ដែលផ្ទុក Zoom Icon ដើម្បីឲ្យវាបង្ហាញនៅពេលដែលអ្នកបានដាក់ Mouse នៅលើ<div> … </div> ដែលផ្ទុកនៅរូបភាពដើម ។ យើងត្រូវប្រើប្រាស់#background a:hover សម្រាប់ដាក់ Mouse ឲ្យបង្ហាញ link ។ #transbox សម្រាប់កំណត់បង្ហាញឃើញនៅ Zoom Icon ។
#background a:hover #transbox {
display: block;
cursor:hand;
vertical-align:middle;
position:absolute;
top:65px;
left:100px;
}
ជំហានទី៣
បន្ទាប់ពីអ្នកធ្វើការសរសេរ Code ទាំងអស់រួចរាល់ពេលដែលអ្នកធ្វើការបើកនៅ index.html file អ្នកនឹងលទ្ធដូចខាងក្រោម
- មុនពេលដែលអ្នកមិនទាន់យក Mouse ដាក់លើរូបភាព
- បន្ទាប់ពីអ្នកធ្វើការដាក់ Mouse ដាក់លើរូបភាព
*** អត្ថបទនេះដកស្រង់ចេញពីទស្សនាវដ្ដី អាន "ANT" ច្បាប់ទី ១៦ ចេញផ្សាយខែ កក្កដា ឆ្នាំ ២០១0
មតិ និងយោបល់ទៅលើអត្ថបទនេះ (តាម Facebook)
ខាងក្រោមនេះជាយោបល់ផ្សេងៗរបស់អ្នកទស្សនា