ホームページ制作 Webデザイン ブログデザイン Web構築 Android linux PHP パソコン情報 ブログ 掲示板
ナビボタンのロールオーバー[JS-jQuery]
JS（jQuery）で作成
１．画像１枚を使って透過させる
透明度を利用をしたjQueryのロールオーバープラグイン「jquery-opacity-rollover.js」を使います。
画像：nav_html5_off.png
[使い方]
<a href="#" title="js01" class="js01"><img src="./img/nav_html5_off.png" alt="js01" width="220" height="50" /></a>
(function($) {
$(function() {
$('.js01').opOver();
});
})(jQuery)
２．ロールオーバー[_on _off画像で切り替える]で切り替える
画像：nav_html5_shiro_off.png nav_html5_shiro_on.png
[使い方]
<a href="#" title="js02"><img src="./img/nav_html5_off.png" alt="js02" width="220" height="50" class="btn_img" /></a>
<script type="text/javascript">
$(document).ready(function(){
$('.btn_img').mouseover(function() {
var src = $(this).attr('src');
$(this).attr('src', src.replace("_off", "_on"));
});
$('.btn_img').mouseout(function() {
var src = $(this).attr('src');
$(this).attr('src', src.replace("_on", "_off"));
});
});
</script>
３．画像１枚を使って透過させる
４．画像１枚を使って透過させる
５．画像１枚を使ってロールオーバー
６．画像２枚を使ってロールオーバー
７．画像１枚を使ってロールオーバー
８．画像２枚を使ってロールオーバー