POPSブログ

jQuery hover() アクション/3

154

  Category:  jquery2012/10/21 pops 

jQueryメソッド hover(over,out) を使用して、JSから画像を取り替える操作をします。昔のロールオーバーです。

 

jQuery hover() アクション 3

画像のロールオーバーアクションについて、手軽なjQuery APIのメソッド hover(over,out) を使用してみます。画像を取り替える操作をするいたって単純なものです。


画像を取り替える操作サンプル


下の画像を「HOVER」ください。画像を変化させます。


1. テーブルの中に配置の例





2. li リストの中に配置の例




サンプルとスクリプトの簡単な説明


HTML JS CSS について


HTML

DIV要素で全体を囲み、A要素にクラスをあたえます。複数個あってもOKです。


<div><a class="imagehover3" href="javascript:void(0);" rel="取替え画像URL"><img src="画像URL" width="画像幅" height="画像高さ" /></a></div>


DIV要素が無くともOKです。


<a class="imagehover3" href="javascript:void(0);" rel="取替え画像URL"><img src="画像URL" width="画像幅" height="画像高さ" /></a>


クラス imagehover3 を変更の場合は、下のJS先頭部分 $(".imagehover3"). も変えてください。


JS

hover-test3.js、(簡易記述、読み込んだら実行します)



(function($){
	$(function(){
		var imgurl=[];
		var imgurl2=[];
		$(".imagehover3").each(function(i){
			imgurl[i]=$(this).attr('rel');
			imgurl2[i]=$(this).children('img').attr('src');
			$(this).hover(
				function () {
					//over
					$(this).children('img').empty().attr({'src':imgurl[i]});
				},
				function () {
					//out
					$(this).children('img').empty().attr({'src':imgurl2[i]});
				}
			);
		});
	});
})(jQuery);

クラスに対してのアクション設定、 ここでは、「rel」に取り替える画像URLを記述しておきます。それをJSで読み取り画像を取替えます。


最初に表示する画像、取り替える画像の大きさは同じにしてください。
画像をLOADするまで表示に時間がかかります。画像URLが間違っていれば表示しません。
IMG要素での画像配置のためのJSであり、もしも背景画像なら、JSにしなくとも良いでしょう。


クラスの、rel にかくしている、画像URLを取得する。


画像URL=$(this).attr('rel');

rel 以外でもOKだが、一応確認のこと
画像URL=$(this).attr('caption');
画像URL=$(this).attr('text');

何処に隠してもよい。その場所を指定すれば、取得できる。


IMG要素に画像を挿入する


クリアするためempty()を使用している
$(this).children('img').empty().attr({'src':画像URL});

empty()無くとも良い
$(this).children('img').attr({'src':画像URL});

書き方いろいろ。


現在は1番めに画像があるので
$(this).children('img'). としている

1番めで無い場合は
$(this).find('img'). などとする


CSS

ここでのCSS例です、環境に合わせて変えてください。DIV要素の中に「A要素」「IMG要素」が入っている普通の構造です。「DIV要素」が無くとも機能しますが、テーブルの中で中央配置がしやすいようにしているだけです。


普通のため、CSS省略します

.xxxxxx div {
	display:block;
	width:100px;
	height:100px;
}
.imagehover3 img {
	width:100px;
	height:100px;
}

などと状況にあわせる

A要素に対するアクションですから、CSSで背景画像にすれば、CSSだけで実行もできますがJSでの方法でした。


簡単ですが、以上です。

 


[ この記事のURL ]


タグ:jquery , Effect , series

[ jQuery hover() アクション シリーズ記事 ]

jQuery hover() アクション/72012.10.25
jQuery hover() アクション/62012.10.24
jQuery hover() アクション/52012.10.23
jQuery hover() アクション/42012.10.22
jQuery hover() アクション/32012.10.21
jQuery hover() アクション/22012.10.20
jQuery hover() アクション/12012.10.19

 

ブログ記事一覧

年別アーカイブ一覧



[1]