jQueryでロールオーバー時に画像を切替える


画像名に「_off」が含まれている画像を「_on」に切り替えるというもの

今回は<input type=”image”>にも対応させたいので下記のように記述

[javascript]
<script>
$(function() {
$(‘a img, input[type="image"]’).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’));
}
});
});
</script>
[/javascript]

画像を使用するリンクで下記のようにすれば下記画像をロールオーバーした際に画像が「***_on.gif」に切り替わる

[html]
<a href="#">
<img src="./images/test_off.gif" alt="テストリンク">
</a>
[/html]

参考URL:http://neet-navi.info/wordpress/431/


この投稿へのコメント

コメントはありません。

コメントを残す

この投稿へのトラックバック

トラックバックはありません。

トラックバック URL