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

นานมาแล้วผมเคยใช้ 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>

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

You can leave a response, or trackback from your own site. Responses are currently closed, but you can trackback from your own site. You can skip to the end and leave a response. Pinging is currently not allowed. Both comments and pings are currently closed.
Powered by WordPress | Shop Free T-Mobile Phones Online | Thanks to Verizon Phones without Contract, MMORPG Games and Sell Car