รับทําเว็บไซต์ รับทําseo
 
รับทําเว็บไซต์ รับทําseo
บทความที่น่าสนใจ

บทความ ที่น่าสนใจ

การทำชี้เมา์ส์แล้วภาพเปลี่ยนด้วย CSS Image Hover

     การทำ 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>

     

     

     

บทความที่น่าสนใจ

บทความ ล่าสุด

บทความ ความรู้ด้านไอที, คอมพิวเตอร์ Techonlogy, Gadget, ความรู้เกี่ยวกับคอมพิวเตอร์ กับทาง SoftMelt.com