เมื่อวันก่อน ผมต้องทำการแก้ไข Link ให้เว็ปเพจนึง โดยที่นี่ เค้าใช้ RollOver แบบ JavaScript โดยที่สร้างจาก DreamWeaver ข้อดีคือง่าย เร็ว สะดวก(คนทำ แต่ลำบากคนแก้) แล้วที่สำคัญมีเกือบ 20 หน้า แล้วพี่แกไม่ได้ Include ผลก็เลยผมต้องมานั่งแก้ทีละหน้า เล่นเอาตาลายเลย (โค๊ดยาวมากกก)
เมื่อเกิดเหตุการณ์อย่างนี้ขึ้น โดยนิสัยโปแกรมเมอร์(ขี้เกียจ)อย่างผม ก็เลยแนะนำพวกพี่ๆเค้าให้ใช้ RollOver Image Link แบบ CSS แทน
สิ่งที่ต้องมี
1.รูปภาพที่ต้องการมาทำ RollOver 2 รูป คือ รูปสถานะปกติ กับ รูป สถานะ Mouse Over (อันนี้แล้วแต่ Idea ใคร Idea มันนะคับ)
2.โค๊ด CSS
ตัวอย่างโค๊ด
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=windows-874" />
<title>.. Roll Over Button sample....by deMODZA. </title>
<style type="text/css">
<!--
.link a { /* <-- Class สำหรับ Link สถานะปกติ */
background: #D9E1E5 url(imgActive.gif); /* ภาพพื้นหลัง */
font: bold 12px tahoma; /* กำหนด Font */
color: #FFFFFF; /* สี Font */
height: 25px; /* ความสูงของ Link */
display: block; /* กำหนดให้มีการแสดงผลเป็น Block ตามความกว้่าง * ยาว ที่เรากำหนด */
line-height: 22px; /* ตำแหน่งตัวอักษร ค่าต้องไม่เกินความสูงของ Link ค่ายิ่งมาก ตัวอักษรยิ่งใกล้เส้นขอบด้านล่าง */
text-decoration: none; /* กำหนดให้ Link ไม่มีเส้นใต้ */
}
.link_2 a:hover {/* <-- Class สำหรับ Link สถานะเม้าท์ชี้ */
background: #D9E1E5 url(imgActive.gif);
font:12 tahoma;
color:#000000;
display: block;
text-decoration: none;
}
/* -- กรณีมีการแสดงผลหลายรูปแบบ เราก็กำหนดชื่อ class ต่างกัน property ตามที่เราต้องการ ในที่นี้ กำหนดสลับสีกับตัวอย่างแรก --*/
.link_2 a {
background: #D9E1E5 url(imgInActive.gif);
font: bold 12px tahoma;
color: #FFFFFF;
height: 25px;
display: block;
line-height: 22px;
text-decoration: none;
}
.link a:hover {
background: #D9E1E5 url(imgInActive.gif);
font:12 tahoma;
color:#000000;
display: block;
text-decoration: none;
}
.link3 a{
font-family: tahoma;
font-size: 12px;
font-weight: bold;
color: #333333;
text-decoration: none;
background-image: url(imgActive.gif);
display: block;
height: 25px;
line-height: 25px;
}
.link3 a:hover{
font-family: tahoma;
font-size: 12px;
font-weight: bold;
color: #333333;
text-decoration: none;
background-image: url(imgInActive.gif);
display: block;
height: 25px;
line-height: 25px;
}
-->
</style>
</head>
<body>
<table width="150">
<tr>
<td align="center" >CSS Class <STRONG>link </STRONG> </td>
</tr> <tr>
<td align="center" class="link"> <a href=# >LINK 1 </a> </td>
</tr> <tr>
<td align="center" class="link"> <a href=# >LINK 2 </a> </td>
</tr> <tr>
<td align="center" >CSS Class <STRONG>link_2 </STRONG> </td>
</tr> <tr>
<td align="center" class="link_2"> <a href=# >LINK 3 </a> </td>
</tr> <tr>
<td align="center" class="link_2"> <a href=# >LINK 4 </a> </td>
</tr> <tr>
<td align="center" class="link3"> <a href=# >LINK 5 </a> </td>
</tr>
</table>
</body>
</html>
จะเห็นได้ว่า โค๊ดสั้นลงเยอะ ส่วนตรง Style เราก็สร้างเหมือน CSS ปกติโดยสามารถแยกไว้ต่างหากก็ได้นะคับ
หวังว่าคงมีประโยชน์กับพี่น้องที่ยังไม่รู้เทคนิคนี้นะครับ ส่วนพี่น้องท่านใดรู้แล้ว มีอะไรก็ติชม หรือ แนะนำเพิ่มเติมได้นะครับ ยินดีรับฟังทุกความคิดเห็น
Tip by deMODZA
[Submit to Zickr!]
วันพฤหัสบดี, พฤศจิกายน 1, 2007
สมัครสมาชิก:
ส่งความคิดเห็น (Atom)
0 ความคิดเห็น:
แสดงความคิดเห็น