ベストアンサー

画像をフェードインさせるタグについて

2006/02/03 16:21

HP作成の際、画像をフェードインさせたいのですが、以下のタグをコピーして貼り付けてもエラーになります。どこを修正したらよいのでしょうか？よろしくお願いします<m(__)m> <HTML> <HEAD> <TITLE></TITLE> <SCRIPT language="JavaScript">  </SCRIPT> </HEAD> <BODY bgcolor="#ffffff" onLoad="fdInImg()"> 画像が順番にフェードインします。<BR><BR> <IMG src="画像のアドレス"> <IMG src="画像のアドレス"> <BR><BR> </BODY> </HTML>

hisoft39
お礼率78% (515/658)

みんなの回答 （4）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

natatin
ベストアンサー率50% (1322/2599)

2006/02/09 15:47 回答No.4

<HTML> <HEAD> <TITLE></TITLE> <SCRIPT language="JavaScript">  </SCRIPT> </HEAD> <BODY bgcolor="#ffffff" onLoad="fdInImg()"> 画像が順番にフェードインします。<BR><BR> <IMG src="****.gif" name="ia" border="0" style="filter:alpha(opacity=0);"> <IMG src="****.gif" name="ib" border="0" style="filter:alpha(opacity=0);"> <IMG src="****.gif" name="ic" border="0" style="filter:alpha(opacity=0);"> <BR><BR> </BODY> </HTML>

質問者

お礼 2006/02/18 11:20

すみません、何度も試したのですが、やっぱりできませんでした(>_<) もしかしたらjavascriptが使えないのかもしれないです・・・（TT)

その他の回答 (3)

natatin
ベストアンサー率50% (1322/2599)

2006/02/03 18:56 回答No.3

NO1です　先に紹介したソースを貼り付けて　画像ファイル名だけ変えれば問題ないはずですが！　今確認してみましたので！

質問者

補足 2006/02/09 15:19

すみません～（＞＜）画像アドレスを変えてみましたが、やっぱりできません・・・。もしよければ、ソースを貼ってもらえますでしょうか？

maudlin
ベストアンサー率67% (108/160)

2006/02/03 18:28 回答No.2

BODY内のimgタグで、画像ファイル名しか指定されてないようです。 ANo.1の方のご回答にあるURLページを見ますと <IMG src="画像のアドレス" name="ia" border="0" style="filter:alpha(opacity=0);"> というように、それぞれ指定されていますね。

質問者

補足 2006/02/09 15:22

ありがとうございます。画像のアドレスの後ろに name="ia" border="0" style="filter:alpha(opacity=0);"をつけてみましたが、やっぱりちゃんと表示されません（＞＜）他に何かいけない所があるのでしょうか。。。

natatin
ベストアンサー率50% (1322/2599)

2006/02/03 16:34 回答No.1

これですね　HP作成ソフトは何をお使いですか HPビルダーなら　ソースを書き換えない設定にしましょう　メモ帳などで編集すると間違いないですけど http://javascript.eweb-design.com/0814_fio.html

質問者

お礼 2006/02/03 17:25

ソフトは会社のソフトを使っています。どこか削除する所とかあるのでしょうか(>_<)

関連するQ&A

画像のフェードインについて
最近javascriptでいろいろなことができることを知りました。 WEBを調べていたら、画像のフェードインのソースを見つけて、そのソースの意味を調べていましたら、今まで見たことのない表記が出てきました。再起処理の中に"+img+"とうのがありますがこれはどういう意味なのかなと、理解できません。+imgとかimg+ と表記されていた場合は、前の画像に新しい画像を足していくのかなと想像してしまいますが、果たしてその解釈も正しいものやら想像の範囲でしかありませんが・・・。javascriptに詳しい方、 +img+の意味を是非ご教授お願いいたします。javascriptは、数日前に本を読み始めたばかりの初心者です。バカな質問と思われるかもしれませんが宜しくお願いいたします。 
- ベストアンサー
- JavaScript
画像の下のテキストにフェードアウト後入力したい
フェードインした画像の下にテキストボックスがあり画像フェードアウト後にそのテキストに入力したいのですができません。フェードアウト後に優先順位などを変更するなどの回避策はありますか? 今の状態を簡素にしたもののソースを記載します。 ----- <HTML> <HEAD> <META HTTP-EQUIV="Content-Language"CONETNT="ja"> <META HTTP-EQUIV="Content-Type"CONTENT="text/html;CHARSET=shift_jis"> <TITLE><test>画像優先順位変更</TITLE>  <Script Language="JavaScript"> moveTo(30,30); resizeTo(1050,750); // 画像のフェードイン・フェードアウト spd = 50; // 変化させる間隔（ミリ秒単位） ntc = 5; // 何%ずつ変化させるか cnt = 0; // フェードイン function fdInImg(img) { document.images[img].filters['alpha'].opacity = cnt; cnt += ntc; if(cnt >= 100) return; setTimeout("fdInImg('"+img+"')",spd);} // フェードアウト function fdOutImg(img) { document.images[img].filters['alpha'].opacity = cnt; cnt -= ntc; if(cnt <= 0) return; setTimeout("fdOutImg('"+img+"')",spd); } </SCRIPT> </HEAD> <BODY onload="fdInImg('1gif')"> <IMG SRC="1.gif" name="1gif" border="0" style="top:30;left:100;filter:alpha(opacity=0);position:absolute"> <Input type="button" onclick="fdOutImg('1gif')" value="FdOut"> <table> <tr> <th class="solid" width="120">test</Font></th> <td><input type ="text"></td> </tr> <tr> <th class="solid" width="120">test</Font></th> <td><input type ="text"></td> </tr> </table> </BODY> </HTML> ------------------
- ベストアンサー
- JavaScript
画像をランダムにフェードイン
【参考サイト】 http://black-flag.net/jquery/20120606-3908.html <html> <head> <title>TOP</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.champagne.js"></script> <script type="text/javascript"> $(function(){ $('ul.champagne').champagne({ beginning_delay: 1000, delay_between: 500, duration: 1000, } }); }); </script> </head> <body style=""> <ul class="champagne"> <li><img src="画像１" /></li> <li><img src="画像２" /></li> <li><img src="画像３" /></li> <li><img src="画像４" /></li> </ul> <script type="text/javascript"> $(function(){ $("ul.champagne").champagne(); }); </script </ul> </body> </html> 上記のタグで表示させてみましたが画像だけ表示され、フェードインが始まらない状態です・・・・・。どうすれば正常に動きますか？よろしくお願いします。
- 締切済み
- JavaScript
3枚の画像をフェードイン
3枚の画像を順番にフェードインさせたいのですが、ＩＥで確認すると先にパっと画像が表示された後にすぐにその画像が消えてフェードインが次々始まります・・・。何かソース等ミスがあるのかＩＥ対策をしないといけないのかわかりません・・。ページを表示させたあと更新を押すと正常に動くのですがブラウザを閉じて再度表示させるとまたパっと画像が現れた後にフェードインが始まる感じです。ソースは下記になります。最初のパッと画像が現れる原因と対策を教えてください・・・！ <script type="text/javascript"> $(function(){ 　$('#fade li').hide(); }); $(window).bind("load", function(){ 　var interval = 400; //表示間隔　for(var i=0; i<$('#fade li').length; i++) 　　setTimeout(doFade(i), interval * i); 　function doFade(i){ 　　return function(){ $('#fade li').eq(i).fadeIn(2000); }; 　} }); </script> 【ＨＴＭＬ】 <ul id="fade"> <li><img src="image/mainpx_01.jpg" alt="" width="365" height="484" style="display: inline; " /></li><li><img src="image/mainpx_02.jpg" alt="" width="365" height="484" style="display: inline; " /></li><li><img src="image/mainpx_03.gif" alt="" width="270" height="484" style="display: inline; " /></li></ul>
- 締切済み
- JavaScript
リンクをマウスオーバーでフェードイン・アウトがしたです。
リンクをマウスオーバーでフェードイン・アウトがしたです。以下のようなソースを書いたのですが、ページを開いた１回目のみ、画像と文字がフェードインして、以下のリンクをマウスオーバーした時には、普通に画像と文字が入れ替わります。リンクをマウスオーバーした時にもフェードイン・アウトさせるには、どのように変更すればいいのでしょうか？ <html> <head> <script src="jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { $('div').fadeIn("slow"); }); </script> <head> <body> <div style="display:none;"> <img src="img/1.png" name="foo"> <br> <span id="buntate">眺める</span> </div> <a href="javascript:void(0)" onmouseover="document.foo.src='img/2.png';document.all.buntate.innerText='サーファー';" onmouseout="document.foo.src='img/1.png';document.all.buntate.innerText='眺める';"> hoge1</a> <br> <a href="javascript:void(0)" onmouseover="document.foo.src='img/3.png';document.all.buntate.innerText='海';" onmouseout="document.foo.src='img/1.png';document.all.buntate.innerText='眺める';"> hoge2</a> </body> </html> 沢山いろいろと試したのですが、自分で解決出来ず・・・ごご教授、よろしくお願いいたします。
- ベストアンサー
- JavaScript
一つのページで二つ動かすのはできないですか
画像を次々に変えていくJavaScriptを一つのページで2個使いたいのですが、二つ使うと、表示されません。これでは無理なのでしょうか？無理だったら、他に何かいい方法があれば教えてください。これを使いました。よろしくお願いします。 <HTML> <HEAD> <TITLE></TITLE> <SCRIPT language="JavaScript">  </SCRIPT> </HEAD> <BODY bgcolor="#ffffff" onLoad="setInterval('changeImage()',500)"> <BR><BR> <IMG src="img1.gif" name="img" border="0"> </BODY> </HTML>
- ベストアンサー
- JavaScript
jQueryで、画像クリック→フェードイン
初めまして。私は大学の課題でウェブサイトを作成しており、jQueryを勉強しています。かなりの初心者なのです。今jQueryでイメージギャラリーのようなものを作っていて、小さい画像にマウスオーバーで触れると、となりに大きい画像がフェードインしつつ表示されるというようにしたいです。 DW上では画像もかわりますし、フェードインもうまくいったのですが、ブラウザで見てみると、画像がぱっと変わるだけでフェードインの効果が反映されていません。これは何故なのでしょうか・・・。スクリプトの例は以下です。 $(function(){ $("img.top1").mouseover(function(){ 　　$("#mainimg img").attr("src","img/topimg1.jpg"); 　　$("#mainimg p:not(:animated)").fadeIn("slow"); })　・・・・小さい画像のtop1に触れると、divのmainimgという範囲の画像が、top1からtopimg1に変わって、なおかつフェードインされるという風に書いたつもりです・・・。 #mainimgの「p」は、htmlでは、<p id="fadeIn"><img src="img/topimg1.jpg" width="539" height="343" /></p> というように、#mainimgの範囲のimg要素（大きい画像が表示されるところ）の前に、id名にfadeInと入れた部分のpです。スクリプトに何か問題があるのかどうかもわかりません。しかしブラウザで作動しないのはおかしいですよね。どなたか分かる方がいれば教えてくださると嬉しいです。よろしくお願いいたします。
- ベストアンサー
- AJAX
画像を変えるスクリプト
<HTML> <HEAD> <TITLE></TITLE> <SCRIPT language="JavaScript">  </SCRIPT> </HEAD> <BODY> <CENTER> <A href="#" onMouseOver="changeImage(0,2)" onMouseOut="changeImage(0,1)"><IMG src="img1.gif" border=0></A><BR> <BR> <A href="#" onMouseOver="changeImage(1,4)" onMouseOut="changeImage(1,3)"><IMG src="img3.gif" border=0></A> </CENTER> </BODY> </HTML> マウスオーバーしたら画像が変わるスクリプトです。質問ですがこのスクリプトでどうしてオブジェクトを作っているのでしょうか？普通にsrcプロパティを変更するだけではだめなのでしょうか？例えばdocument.images[i].src="img"＋j＋".gif"のようにしてiとjを変えるような感じです。
- ベストアンサー
- JavaScript
画像を入れ替えたい
こんにちは。初心者であまりよく分からないので教えていただきたいのですが・・・下記のプログラムで画像を入れ替えるというのをやりたいのですが、ずっと入れ替え続けるのではなくて、１枚目から２枚目に入れ替えるだけで終わらせたいのです。for文を使えばいいとのかなと思うのですが、どこにforを入れたら良いのか分かりません。あるいはもっと簡単なやり方があるのでしょうか・・・。急いでやらないといけないので教えていただけたらと思います。どうぞよろしくお願いします。 <HTML> <HEAD> <TITLE></TITLE> <SCRIPT language="JavaScript">  </SCRIPT> </HEAD> <BODY bgcolor="#ffffff" onLoad="setInterval('changeImage()',1000)"> </BODY> </HTML>
- ベストアンサー
- JavaScript
画像のフェードイン・フェードアウト
現在のホームページですが、サムネイル画像をオンマウスすれば拡大部分の画像が切替わるようになっています。画像がパッと切替わるのを、サムネイル画像をクリックすれば、フェードイン・フェードアウトで切替わるようにしたいと思っています。下記は、現在のファイルです。（あまり関係ないと思う部分は省いてます）回答の方、宜しくお願い致します。  <script type="text/javascript" src="../js/layer.js"></script> <script type='text/javascript'>  </script>  <link href="../css/original.css" rel="stylesheet" type="text/css" media="all"> </head>  <div><img src="../img_画像_001.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img0"><img src="../img_画像_001.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img1"><img src="../img_画像_002.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img2"><img src="../img_画像_003.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img3"><img src="../img_画像_004.jpg" alt="画像説明" width="600" height="400" /></div>  </div>  <div class="work-bottom">  <a href="#" onmouseover="hideALL();showLAYER('img0')"><img src="../img_works/icon/画像_001_s.jpg" alt="画像説明" width="45" height="45" /></a><a href="#" onmouseover="hideALL();showLAYER('img1')"><img src="../img_works/icon/画像_002_s.jpg" alt="画像説明" width="45" height="45" /></a><a href="#" onmouseover="hideALL();showLAYER('img2')"><img src="../img_works/icon/画像_003_s.jpg" alt="画像説明" width="45" height="45" /></a><a href="#" onmouseover="hideALL();showLAYER('img3')"><img src="../img_works/icon/画像_004_s.jpg" alt="画像説明" width="45" height="45" /></a>  </div>  </div> </div> </div>
- ベストアンサー
- JavaScript

画像をフェードインさせるタグについて