PNG กะ CSS ในการทำโลโก้แบบ Hover
ไฟล์ PNG ที่รวมเอาโลโก้แบบธรรมดา กับ โลโก้ที่จะแสดงหลัง Mouse Hover, ส่วนที่เป็นสีเทาคือจะแสดงในหน้าเว็บตามปกติ แต่หลังจากที่เลื่อนเมาส์ไปบนโลโก้แล้วตัวโลโก้จะเปลี่ยนเป็นแบบสี พอเลื่อนเมาส์ออกก็จะกลับเป็นสีเทาตามเดิม
ดังนั้นการเตรียมและวางเลย์เอาท์โลโก้ในไฟล์ PNG จึงเป็นจุดสำคัญ
ต่อจากนั้นส่วนควบคุมจะตกเป็นของ CSS ซึ่งมีโค้ดดังต่อไปนี้
#footer ul {
float:left;
}#footer ul li {
float:left;
margin:0 8px 0 0;
list-style:none;
}#footer ul li a {
overflow:hidden;
position:relative;
display:block;
height:20px;
background:url(images/footer-links.png) 0 0 no-repeat;
text-align:left;
text-indent:-9999px;
}#footer ul li.twitter a {
width:74px;
background-position:0 0;
}#footer ul li.twitter a:hover,
#footer ul li.twitter a:focus {
background-position:0 -20px;
}#footer ul li.facebook a {
width:92px;
background-position:0 -40px;
}#footer ul li.facebook a:hover,
#footer ul li.facebook a:focus {
background-position:0 -60px;
}#footer ul li.behance a {
width:136px;
background-position:0 -80px;
}#footer ul li.behance a:hover,
#footer ul li.behance a:focus {
background-position:0 -100px;
}
