เอา mouse ไปชี้ที่รูปแล้วรูปโปร่งใสด้วย CSS

บันทึกโดย TaTump วันที่ 2 March 2008 | 888 views

นานมาแล้วผมเคยใช้ javascript สลับรูปเอา คือต้องมีสองรูปไว้สลับกัน แต่ถ้าใช้ CSS เราก็ใช้แค่รูปเดียว แถมไม่โหลดช้าด้วยนะ

head

<style>
div.trans-off {
height:144px;width: 258px;
}

div.trans-on {height:144px;width: 258px;
background-color: #fff;
filter: alpha(opacity=50); -moz-opacity: 0.5;

}</style>

จุดเสียว เอ๊ย!!! จุดเด่นมันอยู่ที่การเซ็ตค่าตรงนี้ ตอนนี้คือ 50 แต่ ถ้ายิ่งโปร่งใสตัวเลขก็จะต้องยิ่งลดลง สังเกตว่าจะมี -moz ด้วย ตรงนี้เพื่อให้มีผลกับ firefox ด้วยอ่ะนะ

filter: Alpha(Opacity=50);-moz-opacity:.50;

example

<div class="trans-off" onmouseover="this.className='trans-on'" onmouseout="this.className='trans-off'">
<IMG src="logo.gif" WIDTH="258" HEIGHT="144" BORDER="0" ALT="">
</div>

ตัวอย่างไฟล์ที่นี่

Bookmark and Share

4 Responses to “เอา mouse ไปชี้ที่รูปแล้วรูปโปร่งใสด้วย CSS”

  1. jennynoi-i

    งึมงัม..


    March 2nd, 2008 at 10:30 pm Reply to this comment
  2. yozz

    เยี่ยมเลยครับ ขอบคุณที่แบ่งปันสิ่งดีดี


    March 12th, 2008 at 6:34 pm Reply to this comment
  3. อ้น

    อยากให้รูปโปร่งใสก่อน พอเอาเมาส์ชี้แล้วค่อยชัดอ่ะคะ


    May 29th, 2008 at 9:04 pm Reply to this comment
  4. admin

    อ้น on May 29th, 2008 at 9:04 pm

    อยากให้รูปโปร่งใสก่อน พอเอาเมาส์ชี้แล้วค่อยชัดอ่ะคะ
    ^
    ^
    ^
    ู
    ต้องสลับการเรียก CSS ครับ แยกโจทย์เป็นลำดับให้ออกก่อน
    1. “อยากให้รูปโปร่งใสก่อน” เราก็ต้องเรียก class “trans-on” อ่า..ทีนี้ก็ได้รูปแบบโปร่งใสแล้ว
    2.”พอเอาเมาส์ชี้แล้วค่อยชัด” ก็ต้อง set onmouseover=”this.className=’trans-off’” เวลาชี้จะได้ชัดแจ๋วแว๋ว
    3. เมาส์ออกก็ต้องกลับเป็นเหมือนเดิม set นี่เลย onmouseout=”this.className=’trans-on’”

    ก็จะได้เป็น…

    <div class="trans-on" onmouseout="this.className=’trans-on’" onmouseover="this.className=’trans-off’">
    <img width="258" height="144" border="0" alt="" src="logo.gif"/>
    </div>


    June 1st, 2008 at 3:18 pm Reply to this comment

คอมเม้นท์ซิจ๊ะ