![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
No.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= … id="gif">
</A></P>
</BODY>
</HTML>
ご丁寧に説明まで加えて下さって、本当に有難う御座います。
これで、自分の納得のいくようなデザインが出来ます。
本当に、心から感謝致します。
No.2
- 回答日時:
基本的にはロールオーバーの技術で出来ると思います。
私が思い付く方法は二つです。
1)
マウスが乗った時に画像が鮮明になっていくアニメーションGIFに切り替える。
2)
徐々に鮮明になっていく画像を複数枚用意し、マウスが乗った時に画像を順番に切り替える。
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= … id="gif">
</A></P>
</BODY>
</HTML>
回答有難う御座います。
javasprictは初心者中の初心者なので、試行錯誤しながらタグをいじってみました。
しかし、分からない事、知りたい事が2点あります。
1) どうしたもう少し早く(これだ少し遅すぎるような気がします)不透明から透明に変えられるか。
2) マウスを離す時にも滑らかに透明から不透明に画像を(フィルターを)変える法方。
この2点です。
ご存知でしたら、教えて下さい。
お願い致します。
No.1
- 回答日時:
HTML「ロールオーバー」を使って同じような効果が出来ます。
参考URLにサンプルタグ紹介サイトの該当ページをリンクしました。
その他のサンプルも丁寧に書かれているので参考にしてみてはいかがでしょうか。
参考URL:http://chips.jpnet.biz/tagg/62.html
回答有難う御座います。
THMLタグで一度試してみたんですが、HTMLタグだと「パッ」と変わってしまいませんか?
私がやった方法は、フィルターをかけたテーブルの中に画像を入れ、 それに触れることでフィルターが解除される、というようにプログラミングした法方です。
それだと、いきなり不透明から透明に変わってしまって、私のやりたいように出来なかったんです。
このロールオーバーを使っても同じようになってしまうのではないでしょうか…?
もし私が間違っていたら申し訳御座いません。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript JavaScriptでゲームプログラミングをしています。 次のように画像に動きをつけたいのですが、ど 1 2022/09/29 20:06
- マウス・キーボード マウスのないパソコン 9 2022/03/30 10:53
- その他(パソコン・周辺機器) 呪われた様な.......様々な不具合について 2 2022/08/26 15:52
- ノートパソコン Snipping Toolで切り取った画像への、(きれいな)丸の入れ方を教えて下さい 5 2023/04/02 17:24
- iOS Gragebandでのみ左クリックが有効にならない 1 2022/08/19 13:18
- マウス・キーボード real vnc viewer で遠隔先で操作が出来ない。 2 2023/07/24 15:00
- 画像編集・動画編集・音楽編集 gimp or photoscapeXで背景画の透明度を変える方法 5 2022/12/20 14:13
- Visual Basic(VBA) VBA 画面上のカーソルに文字数字を入力するコードを教えて下さい 1 2022/10/30 10:31
- InternetExplorer(IE) Edge でマウスの真ん中のボタン(ミドルボタン)を押すと、スクロールするのを無効にしたい 2 2023/06/11 05:05
- マウス・キーボード 無線マウスが反応しない 3 2022/05/08 22:22
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
onchangeイベントを強制的に発...
-
クリックさせたいが、click()が...
-
受け取ったパラメータが文字化け
-
javascriptで作成されたテーブ...
-
formのfileの値をhiddenでも持...
-
javaScriptの変数をJavaの変数...
-
ボタンかリンクをクリックする...
-
innerHTML内では改行は禁止?
-
マウスをかざすとおこるイベント
-
フォームが空欄の時にフォーム...
-
tableの任意行にfocusをあてる
-
onclickで2個指定するには?
-
配列のチェックボックスをjavas...
-
ダミーフォームの内容を送信用...
-
条件により、リンク先に画面遷...
-
大量のselect要素のvalueを短い...
-
value内に変数を入れたい
-
return trueとreturn falseの用...
-
プルダウン 項目が多いので先頭...
-
formを書き換えて送信する方法
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
onchangeイベントを強制的に発...
-
追加ボタンを押した際に ok ボ...
-
クリックさせたいが、click()が...
-
onclickが動作しない
-
ボタンかリンクをクリックする...
-
javaScriptの変数をJavaの変数...
-
formのfileの値をhiddenでも持...
-
JSのボタンを複数う使うには
-
JavaScriptのfileオブジェクト...
-
innerHTML内では改行は禁止?
-
開いた子ウィンドウにあるボタ...
-
BackSpaceしたい(QNo.2734284の...
-
VB.NETで<Input>タグ、<text...
-
オンクリックで現在時刻の取得→...
-
JQueryでfunctionに引数としてI...
-
複数のテキストボックスの値の...
-
onClickがinput type="image"だ...
-
クリック→テキストボックスに追加
-
Javascriptで'(シングルクォー...
-
テキストフィールド未入力の場...
おすすめ情報