- ベストアンサー
マウスをかざすとおこるイベント
マウスをかざす時におこるイベントについてですが、"マウスをかざした時に画像(リンクが貼ってある画像)が不透明から透明に変わる(滑らかに変わっていく)"ようにしたいのですが、そういった場合はどのようにすればいいのでしょうか? 教えて下さい。 JavaScript初心者なので、サンプル等を用いて頂ければ嬉しいのですが…。 宜しくお願いします。
- yumaya
- お礼率70% (36/51)
- JavaScript
- 回答数3
- ありがとう数5
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
#2です。 1の回答は二つあります。 1) onMouseOver="timer = setInterval('showPict(\'gif\')',10)" の部分の数値を小さくする。 setIntervalを調べて頂ければ解ると思いますが、繰り返しの間隔をミリ秒で指定しています。 2) ++object.filters.alpha.opacity; ++object.filters.alpha.finishopacity; の二行を object.filters.alpha.opacity += x; object.filters.alpha.finishopacity += x; の様に書き換える。(xは任意の数値) 最初のサンプルではfilter:alphaの透明度を+1しているのですが、書き換えた後では+xしています。 xが大きい値になる程、段階的な変化になると思います。 2の回答は下記サンプルです。 <HTML> <HEAD> <TITLE>Test</TITLE> <SCRIPT language="javascript" type="text/javascript"> <!-- timer = ""; function changePict(id,flag){ //透明度を変更させる値(value)を作成(valueの絶対値が大きい程、変化が早く段階的になる) var value = (flag)? 1: -1;//flagが1(onMouseOver時)はvalueが1(正の値),flagが0(onMouseOut時)はvalueが-1(負の値) //timerがある(透明度変更中)場合、一旦停止 if(timer != ""){ clearInterval(timer); } //changeValue(id,value)を指定したミリ秒毎に繰り返す timer = setInterval('changeValue(\''+id+'\','+value+')',1); } function changeValue(id,value){ //指定したidを持つ要素を取得 var object = document.getElementById(id); //要素の透明度にvalueをたす(valueが負の値ならひく事になる) object.filters.alpha.opacity += value; object.filters.alpha.finishopacity += value; //透明度が20以下・透明度が100以上の時に繰り返しを停止する if(object.filters.alpha.opacity <= 20 || object.filters.alpha.opacity >= 100){ clearInterval(timer); timer = ""; } } //--> </SCRIPT> <STYLE type="text/css"> <!-- #gif {filter:alpha(style=0,opacity=20,finishopacity=20);} --> </STYLE> </HEAD> <BODY> <P><A href="javascript:void(0)" onMouseOver="changePict('gif',1)" onMouseOut="changePict('gif',0)"> <IMG src="http://oshiete1.goo.ne.jp/images/goo.gif"border="0" id="gif"> </A></P> </BODY> </HTML>
その他の回答 (2)
- trisagion
- ベストアンサー率68% (15/22)
基本的にはロールオーバーの技術で出来ると思います。 私が思い付く方法は二つです。 １） マウスが乗った時に画像が鮮明になっていくアニメーションGIFに切り替える。 ２） 徐々に鮮明になっていく画像を複数枚用意し、マウスが乗った時に画像を順番に切り替える。 IE限定ならば下記の方法もあります。 CSSのfilter:alphaの透明度をjavascriptで操作する方法です。 <HTML> <HEAD> <TITLE>Test</TITLE> <SCRIPT language="javascript" type="text/javascript"> <!-- timer = ""; function showPict(id){ var object = document.getElementById(id); ++object.filters.alpha.opacity; ++object.filters.alpha.finishopacity; if(object.filters.alpha.opacity >= 100 && timer != ""){ clearInterval(timer); timer = ""; } } function hidePict(id){ var object = document.getElementById(id); if(timer != ""){ clearInterval(timer); timer = ""; } object.filters.alpha.opacity = 20; object.filters.alpha.finishopacity = 20; } //--> </SCRIPT> <STYLE type="text/css"> <!-- #gif {filter:alpha(style=0,opacity=20,finishopacity=20);} --> </STYLE> </HEAD> <BODY> <P><A href="javascript:void(0)" onMouseOver="timer = setInterval('showPict(\'gif\')',10)" onMouseOut="hidePict('gif')"> <IMG src="http://oshiete1.goo.ne.jp/images/goo.gif"border="0" id="gif"> </A></P> </BODY> </HTML>
お礼
回答有難う御座います。 javasprictは初心者中の初心者なので、試行錯誤しながらタグをいじってみました。 しかし、分からない事、知りたい事が2点あります。 1) どうしたもう少し早く(これだ少し遅すぎるような気がします)不透明から透明に変えられるか。 2) マウスを離す時にも滑らかに透明から不透明に画像を(フィルターを)変える法方。 この2点です。 ご存知でしたら、教えて下さい。 お願い致します。
HTML「ロールオーバー」を使って同じような効果が出来ます。 参考URLにサンプルタグ紹介サイトの該当ページをリンクしました。 その他のサンプルも丁寧に書かれているので参考にしてみてはいかがでしょうか。
お礼
回答有難う御座います。 THMLタグで一度試してみたんですが、HTMLタグだと「パッ」と変わってしまいませんか? 私がやった方法は、フィルターをかけたテーブルの中に画像を入れ、 それに触れることでフィルターが解除される、というようにプログラミングした法方です。 それだと、いきなり不透明から透明に変わってしまって、私のやりたいように出来なかったんです。 このロールオーバーを使っても同じようになってしまうのではないでしょうか…? もし私が間違っていたら申し訳御座いません。
お礼
ご丁寧に説明まで加えて下さって、本当に有難う御座います。 これで、自分の納得のいくようなデザインが出来ます。 本当に、心から感謝致します。