- ベストアンサー
1つ1つの画像にイベントを発生させるには?
先日もこちらに書き込みさせて頂いたんですが、ページを作っていて問題が起きましたので、再度書き込みします。 画像を不透明から透明に(滑らかに)変える事は出来たのですが、1つの画像しかならないんです。 何らかのタグが悪いと思うのですが、どこをどのように直せば1つ1つの画像にイベントを発生させる事が出来るのでしょうか? 教えて下さい。
- みんなの回答 (1)
- 専門家の回答
質問者が選んだベストアンサー
こんにちは。 idをそれぞれ設定すれば出来ると思いますよ。 一応試しましたが、出来ました。 まず、<HEAD>~</HEAD>内の <STYLE type="text/css"> <!-- #gif {filter:alpha(style=0,opacity=50,finishopacity=50);} --> </STYLE> を、 <STYLE type="text/css"> <!-- #gif1 {filter:alpha(style=0,opacity=50,finishopacity=50);} #gif2 {filter:alpha(style=0,opacity=50,finishopacity=50);} #gif3 {filter:alpha(style=0,opacity=50,finishopacity=50);} --> </STYLE> と設定(わかりやすくgifの後ろに番号を加えただけですが)します。 次にidを、下記のように<HEAD>~</HEAD>内で設定したものに変えれば出来ると思います。 <TD> <P align="center"><A onmouseover="changePict('gif1',1)" onmouseout="changePict('gif1',0)" href="index.files/icon1.jpg" target="main"><IMG id=gif1 src="index.files/icon1.jpg" width="100" height="100" border="0"></A></P> <P align="center"><A onmouseover="changePict('gif2',1)" onmouseout="changePict('gif2',0)" href="index.files/icon2.jpg" target="main"><IMG id=gif2 src="index.files/icon2.jpg" width="100" height="100" border="0"></A></P> <P align="center"><A onmouseover="changePict('gif3',1)" onmouseout="changePict('gif3',0)" href="index.files/icon3.jpg" target="main"><IMG id=gif3 src="index.files/icon3.jpg" width="100" height="100" border="0"></A></P> </TD> あと↓は<HEAD>~</HEAD>内に入れたほうがよろしいかと…。 <script language="JavaScript" type="text/javascript"> <!-- timer = ""; function changePict(id,flag){ // var value = (flag)? 5: -5;// // if(timer != ""){ clearInterval(timer); } // timer = setInterval('changeValue(\''+id+'\','+value+')',1); } function changeValue(id,value){ // var object = document.getElementById(id); // object.filters.alpha.opacity += value; object.filters.alpha.finishopacity += value; // if(object.filters.alpha.opacity <= 50 || object.filters.alpha.opacity >= 100){ clearInterval(timer); timer = ""; } } // --></script>
お礼
なるほど、idを変えればよかったんですね。 おかげですっかり解決です。(^_^) 本当に有難う御座いました。