Blog

2012.0924

画像置き換えのJavaScript

画像ファイル名末尾の_offという文字列を検索し、
マウスオーバーすると_onの文字列が付いた画像ファイルに置き換えます。
(もちろんプリロード機能も付いています)
jQuery等のライブラリは必要なく単独で動きます。

設置方法1

head要素内にimageover.jsを読み込みます。

<script type="text/javascript" src="imageover.js"></script>

設置方法2

下記を適当な場所へ記述してください。
※設定は「設定可能オプション」をご覧ください。
※オプションの最後は,を付けないでください。

var atimageover = new ATImageover({
	noOverClass : 'noover'
});
atimageover.load();

設定可能オプション

noOverClass : ‘noover’
マウスオーバーさせたくないClass名が設定可能です
(初期値はnoover、nooverの場合この記述は必要ありません)

<p><img src="images/test_off.jpg" class="noover" /></p>

このようにすることで_offの文字列がある場合でも、マウスオーバーを無効にすることが可能です。

Page Top