[JS] 簡単にオンマウスで画像を半透明化
使い勝手がすばらしい
以前にも同じ様な投稿をしてますが、jQueryを使用してロールーバーで画像の半透明にします。
※jQuery は http://scriptsrc.net/ からコピーすると便利です。
JSのソース
ファイル名は任意で構いませんが、仮に「rollover.js」とします。
$(function() {
// Fade Slow
var nav = $('.imgover_s');
nav.hover(
function(){
$(this).fadeTo(300,0.5);
},
function () {
$(this).fadeTo(300,1);
}
);
// Fade First
var nav = $('.imgover_f');
nav.hover(
function(){
$(this).fadeTo(0,0.7);
},
function () {
$(this).fadeTo(0,1);
}
);
});
使い方
↓<head>内に記述
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script type="text/javascript" src="./common/js/rollover.js"></script>
↓ゆっくり画像を半透明にさせる場合は「class=”imgover_s”」
<img src="./common/img/top_ban_01.gif" alt="bell" class="imgover_s" />
↓一瞬で画像を透過させる場合は「class=”imgover_f”」
<img src="./common/img/top_ban_01.gif" alt="bell" class="imgover_f" />