バナー オンマウスで画像を替える

バナーなど、画像にリンクを掛けて、オンマウスで画像を替えることもよくやります。

こういう感じです↓
bunner_off

スタイルシートで、テキストを非表示にする方法もありますが、今回はjavascriptを使った方法です。用途による使い分けもしてますが、こっちの方が簡単です。

以下のタグを、head内に書くだけです。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">//<!&#91;CDATA&#91;
// _on _off で自動的に画像ロールオーバー
$(function(){
$('a img').hover(function(){
$(this).attr('src', $(this).attr('src').replace('_off', '_on'));
}, function(){
if (!$(this).hasClass('currentPage')) {
$(this).attr('src', $(this).attr('src').replace('_on', '_off'));
}
});
});
//&#93;&#93;>
</script>

後は、使用したい画像の組み合わせを、●●●_on.jpg●●●_off.jpgというスタイルでリネームして、同じフォルダ内に置き、●●●_off.jpgの方で下記のようにリンクコードを書けば、完成です。

<a href=""><img src="http://masamine.net/wp/img/●●●_off.png" alt="" /></a>

ナビゲーションメニューとか、リンクバナーとか、アフィリエイトサイトを作る上で、結構便利なテクニックです!

Best Premium Website HTML Templates