[JS] jQueryを使用して画像のロールーバー（オンマウスでの画像切り替え）
jQueryを使用して画像のロールーバー（オンマウスでの画像切り替え）をします。
IE各バージョンにも対応しているので安心して使えます。
※jQuery は http://scriptsrc.net/ からコピーすると便利です。
JSのソース
ファイル名は任意で構いませんが、仮に「img_link_filter.js”」とします。
jQuery.noConflict();
jQuery(function(){
// RollOver 01
jQuery(".fadeimg").hover(
function(){
jQuery(this).fadeTo(0,0.8);
},
function(){
jQuery(this).fadeTo(500,1);
}
);
// RollOver 02
jQuery(".fadeimg_top_navi").hover(
function(){
jQuery(this).fadeTo(0,0.5);
},
function(){
jQuery(this).fadeTo(500,1);
}
);
// RollOver 03
jQuery(".swapimg").hover(
function(){
//jQuery(this).attr('src', String(jQuery(this).attr('src')).split('_on.jpg')[0] + ".jpg");
//jQuery(this).attr('src', String(jQuery(this).attr('src')).split('.jpg')[0] + "_on.jpg");
jQuery(this).fadeTo(200, 0);
},
function(){
// jQuery(this).attr('src', String(jQuery(this).attr('src')).split('_on.jpg')[0] + ".jpg");
jQuery(this).fadeTo(300, 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/img_link_filter.js"></script>
↓完全に画像を切り替える場合は「class=”swapimg”」
<div class="banner-T"> <p style="background-image:url(./common/img/top/ban_top_01_on.jpg);"><a href="####"><img src="./common/img/top/ban_top_01.jpg" alt="○○○○" class="swapimg" /></a></p> <p style="background-image:url(./common/img/top/ban_top_02_on.jpg);"><a href="####"><img src="./common/img/top/ban_top_02.jpg" alt="○○○○" class="swapimg" /></a></p> </div>
↓画像に透過させる場合は「class=”fadeimg”」
<div class="banner-T"> <a href="####"><img src="./common/img/top/ban_top_03.jpg" alt="○○○○" class="fadeimg" /></a> </div>