การทำ link แบบ rollover image มีทั้งวิธีโดยใช้เทคนิค image เลื่อนขึ้นใน css2 หรือใช้ css3 เช่นพวก -webkit-transition (ใช้ใน Safari และ Chrome), -moz-transition (ใช้ใน Mozilla) หรือ -o-transition (ใช้กับ Opera)
แต่เนื่องจาก browser ที่ใช้ในปัจจุบันยังเป็น IE ซะส่วนใหญ่ พวก css3 เหล่านี้จึงยังไม่ support ซักเท่าไหร่ ดังนั้นทางออกที่ดีที่สุดคือใช้ css2 นั่นเอง
เริ่มจาก HTML โดยมี code ดังนี้
<div class="link">
<a href="#">link</a>
</div>
ต่อมาคือส่วนของ css มีดังนี้
.link a {
width: 100px; height:100px;
float: left;
background: url(a.jpg) top left no-repeat;
line-height: 100px;
text-align: center;
color: #ffff00;
}
.link a:hover {
background-position: 0 -100px;
color: #000000;
}จากตัวอย่าง css ในส่วนของ background รูปมีขนาด 100px x 200px โดยต้องมีการใช้ float ด้วย ไม่งั้นรูปจะขึ้นไม่เต็มภาพ โดยรูปมีลักษณะดังนี้
จะเห็นว่ารูปมี 2 ส่วน แต่ละส่วนมีความสูง (height) = 100px
ในส่วนการ hover นั้นเรามาทบทวนการจัดตำแหน่งของ css กันก่อน ค่าตัวแรกคือตำแหน่งทางแนวนอน ส่วนค่าตัวที่สองคือค่าในแนวตั้ง ดังนั้นเมื่อสั่ง hover ก็ให้เลื่อนขึ้นไป 100 px ซึ่งก็คือค่า -100px นั่นเอง
เมื่อทำการทดลอง เมื่อลองเอา cursor ไปวางบน link background ก็จะเลื่อนขึ้นเป็นสีที่เราต้องการ
การทำ image sprites คือเมื่อมีการ hover ภาพที่เป็น link ภาพจะเปลี่ยนเป็นอีกภาพ โดยมีวิธีง่าย ๆ ที่กำหนดใน css คือ
margin-top: -100px;
เมื่อ hover ภาพจะเลื่อนขึ้นไป 100 pixels และเปลี่ยนเป็นอีกภาพที่เราต้องการ
credit: CSS Sprites w/out Using Background Images By Soh Tanaka
