ปุ่มแบบมีรูปภาพ

การทำปุ่มที่เป็นรูปภาพที่สามารถเปลี่ยนรูปภาพที่แสดงบนปุ่มได้เมื่อเอาเมาส์ไปวางไว้บนปุ่ม เราอาจใช้รูปภาพต้นฉบับที่เป็นรูปภาพใหญ่เพียงรูปเดียว และมีรูปภาพเล็กๆอยู่ภายในหลายๆรูปสำหรับปุ่มแต่ละปุ่มเหมือนดังรูปได้ แล้วเราก็ใช้ CSS เพื่อจัดการแสดงผลแต่ละปุ่ม โดยการใช้การกำหนดให้แต่ละปุ่มแสดงรูปที่พิดกัดต่างๆกันตามตำแหน่งของรูป


<style type="text/css">
.toolbar {
     background-image: url(toolbar.png); /* รูปภาพด้านบน */
     background-repeat: no-repeat;
     width: 32px; /* ขนาดของปุ่ม */
     height: 32px; /* ขนาดของปุ่ม */
     float: left;
}
a.1 {
     background-position: 0 0; /* ตำแหน่งรูปของปุ่ม ปกติ แถวบน */
}
a.1:hover {
     background-position: 0 -32px; /* ตำแหน่งรูปของปุ่ม เมื่อเมาส์อยู่บนปุ่ม */
}
a.2 {
     background-position: -32px 0;
}
a.2:hover {
     background-position: -32px -32px;
}
</style>


<a class="toolbar 1" href="xxx.php">&nbsp;</a>
<a class="toolbar 2" href="yyy.php">&nbsp;</a>


ตัวอย่าง :    
ผู้เขียน goragod โพสต์เมื่อ 24 พ.ค. 2552 เปิดดู 15,198 ป้ายกำกับ XHTMLCSS
^