วิธีที่เราเอาเมาส์ไปวางไว้บนรูปภาพแล้วให้เปลี่ยนไปเปลี่ยนมาได้ เราเรียกว่า RollOverImage ผมเอาวิธีทำมาแนะนำง่ายๆโดยใช้ Javascript เป็นไฟล์ Video นะครับ
ดู Video ได้ด้านล่างนี่เลยครับ
คุณสามารถติดตาม Video อื่นๆของผมได้ที่ teerapuchchanel
ทำ RollOverImage ด้วย Javascript
ผู้สนับสนุน
Blogger
-
ลิขสิทธิ์
#1 by dogdoy on 09/03/2011 - 10:10 am
ใช้ CSS background-image ก็ทำคล้ายๆ แบบนี้ได้นะครับ
a.pic{
display: block; /* ให้แสดงเป็นลักษณะของ box-model */
width: 100px; /* กำหนดความกว้างตามขนาดของรูป */
height: 80px; /* กำหนดความสูงตามขนาดของรูป */
background: url(img1.jpg) no-repeat center center; /* img1.jpg คือ url ของรูปแรก */
text-indent: -999px; /* ดันให้ตัวหนังสือในลิงก์หายไป */
overflow: hidden; /* ซ่อนส่วนที่เกินออกมาซะ */
}
a.pic:hover{
background: url(img2.jpg); /* แทนที่ภาพแรกด้วยภาพอีกภาพ */
}
Hello
ยังไม่ได้ลองทดสอบดูนะครับ แต่คิดว่าน่าจะได้ครับ ^ ^
#2 by teerapuch on 09/03/2011 - 10:15 am
เยี่ยมเลยครับ ใช้ CSS ทำได้อีกแบบ