[jQuery]マウスオーバーで画像フェードイン・フェードアウトを作ってみました。

画像にマウスを載せると

吹き出しが出るようになるものが欲しいということがあったので

jQueryで作ってみました。

マウスオーバーで画像を表示させる

マウスで棚、ベッド、机の画像を触ると吹き出しが現れます。

HTMLの作成

<div id="map_test">
	<img src="img/sample.png" usemap="#sample" alt="サンプル" id="sample">
	<map name="sample" id="map">
		<area href="#" shape="rect" alt="sample1" coords="165,100,355,165">
		<area href="#" shape="rect" alt="sample2" coords="297,187,357,252">
		<area href="#" shape="rect" alt="sample3" coords="52,135,130,285">
	</map>
	<!-- 表示させたいコメント画像 -->
	<!-- map areaのaltとimgのID名を合わせること 英数字で！ -->
	<img src="img/comment1.png" alt="コメント1" id="sample1">
	<img src="img/comment2.png" alt="コメント2" id="sample2">
	<img src="img/comment3.png" alt="コメント3" id="sample3">
</div><!-- /map -->

マップエリアのaltの値と吹き出し画像のID名を合わせておきます。

CSSの作成

#map_test{
	width: 500px;
	height: 400px;
	position: relative;
}

#map_test img{
	border: 0px;
}

/*コメント画像の位置*/
/*#map_testを基準*/
#sample1{
	top: 50px;
	left: 165px;
	filter:alpha(opacity=0);
	-moz-opacity: 0;
	opacity: 0;
	position: absolute;
}

#sample2{
	top: 157px;
	left: 360px;
	filter:alpha(opacity=0);
	-moz-opacity: 0;
	opacity: 0;
	position: absolute;
}

#sample3{
	top: 40px;
	left: 20px;
	filter:alpha(opacity=0);
	-moz-opacity: 0;
	opacity: 0;
	position: absolute;
}

jQueryの作成

$(function(){
	　var alt = "";
	　$('#map area').hover(
		　function () {
　			//マウスオーバーのとき
　			//表示
　			alt = $(this).attr('alt');
　			$('#' + alt).fadeTo('15000', 1);	//1.5秒で表示
　		},
　		function () {
　			//マウスが離れたとき
　			//透明にする
　			$('#' + alt).fadeTo('10000', 0);	//1.0秒で透明
　		}
	 );
});

解説

HTMLはマップを使用しています。

CSSでマップをposition:relativeにしておきます。

吹き出しの画像はposition:absoluteにして上に重ねて位置を決め、

opacityで透明にしておきます。

次にjQueryで動きを付けます。

マップエリアをマウスオーバーしたらエリアのalt属性を取得します。(7行目)

取得した値でID名を指定してfadeToイベントで吹き出しを表示させます。(8行目)

マウスが離れたら同じようにfadeToイベントで元の透明の状態に戻します。(13行目)

吹き出し画像を特定したいのでマップエリアのalt属性を使ってますが

他の属性でもいいかもしれません。

吹き出しを大きくしながらフェードイン・フェードアウトさせる

デモ2

同じような感じですが、

画像を大きくしながらフェードイン・フェードアウトも作りました。

内容はjQueryの書き換えだけです。

$(function(){
　　　var alt = "";
　　　var w = "";
　　　$('#map area').hover(
　　　　　　　　　function () {
　　　　　　　　　　　//マウスオーバーのとき
　　　　　　　　　　　//サイズを1.5倍にして表示
　　　　　　　　　　　alt = $(this).attr('alt');
　　　　　　　　　　　w = $('#' + alt).width();  //画像のサイズを取得
　　　　　　　　　　　$('#' + alt).animate({
		　　　 　　width: w * 1.5 + 'px',	//元の画像の1.5倍
　　　　　　　　　　　　　　　opacity: 1,
　　　　　　　　　　　　　　　}, 1500 );		//1.5秒(1500ミリ秒)
　　　　　　　　　},
　　　　　　　　　function () {
　　　　　　　　　　　//マウスが離れたとき
　　　　　　　　　　　//サイズを戻して透明にする
　　　　　　　　　　　$('#' + alt).animate({
　　　　　　　　　　　　　　　width: w + 'px',
                          opacity: 0,
			  }, 1000 );		//1.0秒(1000ミリ秒)
               }
       );
});

先ほどのものとは違い画像サイズを取得させています。(9行目)

フェードインはfadeToイベントではなく属性を指定できるanimateイベントにしています。(10行目)

あとの考え方は前のものと同じです。

しかし、これ作ったものの使われなかったんですね～残念です。

とりあえず、作ったのでいつか使えそうなので覚え書きです。

CSS3でもできそうな動きなので

今度CSS3でやってみようかな？