รับทําเว็บไซต์ รับทํา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