การทำ CSS Image Hover หรือการชี้เม้าส์แล้วเปลี่ยนภาพนั้น ที่ใช้ทั่วไปมีด้วยกัน 2 แบบ คือ การใช้ภาพ 2 ภาพสลับกันเมื่อเม้าส์ชี้ และการใช้ภาพเดียว โดยการบังคับ CSS ให้แสดงในส่วนที่ต้องการออกมา
แบบที่ 1การใช้ภาพ 2 ภาพสลับกันเมื่อเม้าส์ชี้
ภาพต้นฉบับ มีขนาด 200 * 60 2 ภาพ
CSS :
.imghover1 {
display: block;
width: 200px;
height: 60px;
background: url('image.png'); /* ที่อยู่รูปภาพที่1 */
text-indent: -99999px;
}
.imghover1:hover {
background-image : url('image.png'); /* ที่อยู่รูปภาพที่2 */
}
HTML :
<a href="http://www.plug-in.in.th/"><div class="imghover1"> </div></a>
แบบที่ 2 การใช้ภาพเดียว โดยการบังคับ CSS ให้แสดงในส่วนที่ต้องการออกมา
ภาพต้นฉบับ มีขนาด 200 * 120
CSS :
.imghover2 {
display: block;
width: 200px;
height: 60px;
background: url('image.png');
text-indent: -99999px;
}
.imghover2:hover {
background-position: 0 -60px;
}
HTML :
<a class="imghover2" href="www.plug-in.in.th">plug-in.in.th</a>
รับทําเว็บไซต์ 
แลกลิงค์ 
