The current article

jQueryでロールオーバー(マウスオーバー)画像を切替える方法

グローバルナビやバナーにロールオーバーを付ける時、CSSを使わずjQueryでの方法をご紹介します。 修正が入った時に画像を変更するだけでOKなので、選択肢の一つにいかがでしょうか。

jsrollover

capture

準備

まず、元画像と変更画像の2枚を用意します。
元画像に「_off」と変更画像に「_on」を付けておきます。
例のように頭の部分は一緒にしてくださいね。
(例:hoge_off.png hoge_on.png)

説明

下記のJSを使用することで、リンクタグにマウスが乗ると「_off」の部分が「_on」に書き換わります。

$(function(){
	$('a img').each(function(){
		var img = $(this);
		var src_off = img.attr('src');
		var src_on = src_off.replace(/^(.+)_off(\.[^\.]+)$/, '$1_on$2');
		$('<img />').attr('src', src_on);
		img.hover(function(){
			img.attr('src', src_on);
		},function(){
			img.attr('src', src_off);
		});
	});
});

jquery本体と、
上記スクリプトをコピーして「rollover.js」などというファイルを作成して読み込ませて下さい。
(head内に書く場合は<script type=”text/javascript”>と</script>で囲んで下さい)

設置方法に不安のある方は
初歩的なjQueryプラグインの設置方法内の
「プラグイン本体の設置」を参照ください。

HTML

HTML内に以下のように記述すれば画像が差し替わります。

<a href="#">
     <img src="画像_off.png" alt="" />
</a>

覚書程度なので説明不足かも知れませんが・・・
CSS不要なので実装の手間が少なく、メンテナンス性が良くなるのではないでしょうか。
お試しください―


Category

Service

Guidance

Salutation

WPCは大阪を中心に、ホームページ制作、リニューアル、コーディング、更新業務、各種印刷物制作、スキルアップ出張講習・セミナー等取り扱っております。
どこの会社に作成を依頼しようかとお悩みの方、リニューアルしたいんだけど良いプランはないかなとお探しの方、本格派のデザイナーにデザインを依頼したい、 コーディングだけ頼みたい、更新だけ頼みたい、パソコンやソフトの使い方を教えて欲しいなど、どんな事でもWPCまでお気軽にご相談ください。