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

jQuery

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でやってみようかな?

スポンサードリンク

コメントを残す

サブコンテンツ

このページの先頭へ