• ทำรูป MouseOver แบบใช้รูปเดียว

    Date: 2010.09.03 | Category: Web Programming, ฟรี Script เทคนิคเด็ดๆ | Tags:

    เทคนิคนี้เกิดจาก ผมต้องทำงานงานนึง และงานที่ผมทำต้องทำ MouseOver โดยรูปนึงจะจางกว่าอีกรูปนึง เลยต้องไปหาว่าทำไง พอดีหาไปหามาเจอเทคนิคนี้เข้า ทำให้ไม่ต้องใช้ 2 รูป เพียงแต่ใช้รูปเดียวเท่านั้น มาดูวิธีกันเลยดีกว่า

    นำ Code ด้านล่างไปติดระหว่าง <head></head> <script language=”JavaScript1.2″>

    function makevisible(cur,which){
    strength=(which==0)? 1 : 0.2

    if (cur.style.MozOpacity)
    cur.style.MozOpacity=strength
    else if (cur.filters)
    cur.filters.alpha.opacity=strength*100
    }

    </script>

    นำ Code ด้านล่างไปแทรกใน <img >

    style=”filter:alpha(opacity=20);-moz-opacity:0.2″ onMouseover=”makevisible(this,0)” onMouseout=”makevisible(this,1)”

    ตัวอย่างเช่น <img src=’/images/0004.gif’ style=”filter:alpha(opacity=20);-moz-opacity:0.2″ onMouseover=”makevisible(this,0)” onMouseout=”makevisible(this,1)” >

    ต่อมาวิธีการปรับความจางของรูปนั้นให้เปลี่ยนค่าตรงข้อความสีแดง ตรง opacity ยิ่งมากยิ่งจาง เช่นถ้าปรับ 50 ก็ต้องปรับ 0.2 เป็น 0.5 ด้วยเป็นต้น มันจะค่าขึ้นตรงต่อกัน เท่านี้คุณก็จะได้ลดขนาดของเว็บคุณแทนที่จะใช้รูป 2 รูปก็เหลือรูปเดียว