ปุ่มแบบมีรูปภาพ
การทำปุ่มที่เป็นรูปภาพที่สามารถเปลี่ยนรูปภาพที่แสดงบนปุ่มได้เมื่อเอาเมาส์ไปวางไว้บนปุ่ม เราอาจใช้รูปภาพต้นฉบับที่เป็นรูปภาพใหญ่เพียงรูปเดียว และมีรูปภาพเล็กๆอยู่ภายในหลายๆรูปสำหรับปุ่มแต่ละปุ่มเหมือนดังรูปได้ แล้วเราก็ใช้ 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"> </a>
<a class="toolbar 2" href="yyy.php"> </a>