G-Chromでの質問：なぜGoogle Chromでは画像のフェードインが行われないのか？

前へ 次へ
このQ&Aのポイント
  • G-Chromでの質問です。IE環境下では画像のフェードインが正常に稼働するが、Google Chromでは白画像のまま表示される。
  • Javascriptの制限により、Google Chromでは画像のフェードインが正常に行われない可能性がある。
  • G-Chromでの画像のフェードインについての質問です。Chromeでの制約や注意点について教えてください。
回答を見る
  • ベストアンサー

G-Chromでの質問です

いつもお世話になっております。 読み込み後、h1.gifが白→画像とだんだんフェードインするようなjavascriptを利用しています。 IE環境下では正常に稼動するのですが、Google Chromだと白画像を優先してフェードインが行なわれません。（白画像のまま） 以下のソースで動かしているのですが、chromeだとjavascriptが大きく制限されることはあるのでしょうか？（不勉強で、chromeだとimportant指定を最初の行にしないとダメ、とかの基本的なことしかわかりません） もしよろしければ、ご回答いただけますと幸いです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>背景画像を少しずつフェードインさせる</title> <script language="JavaScript"><!-- n = 100; function fadeInBG() { if (n < 0) return; n -= 2; myIMG.filters['alpha'].opacity = n; setTimeout("fadeInBG()",100); } // --></script> <meta http-equiv="Content-type" content="text/html; charset=Shift_JIS" /> <link rel="stylesheet" type="text/css" href="./css/header.css" /> </head> <body scroll=no> <td><div align="right"><body background="./img/h1.gif" onLoad="fadeInBG()"></td> <img src="./img/white.gif" id="myIMG" width="120%" height="120%" style="position:absolute;top:0px;left:0px;z-index:1;filter:alpha(opacity=100);"> </body> </html>

  • Pesi
  • お礼率87% (14/16)

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

  • ベストアンサー
noname#66720
noname#66720
回答No.1

おそらくですがfilterでの指定が問題ではないでしょうか。 これはIEの独自拡張なので、おそらくfirefox等で確認しても同様の状態になると思います。 IEとは別にモダンブラウザに対してopacityで指定する必要があるかと。

Pesi
質問者

お礼

お返事遅くなりましてすみません。 opacity指定だと、ブラウザによって指定数値が異なるんですね。 Chromeはまだβ版ですし、そこまで考えなくてもいいのかな…。 とりあえずFirefoxだけでもopacity使って調整させていただきます。 ありがとうございました♪

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • 画像の下のテキストにフェードアウト後入力したい

    フェードインした画像の下にテキストボックスがあり画像フェードアウト後にそのテキストに 入力したいのですができません。 フェードアウト後に優先順位などを変更するなどの回避策はありますか? 今の状態を簡素にしたもののソースを記載します。 ----- <HTML> <HEAD> <META HTTP-EQUIV="Content-Language"CONETNT="ja"> <META HTTP-EQUIV="Content-Type"CONTENT="text/html;CHARSET=shift_jis"> <TITLE><test>画像優先順位変更</TITLE> <!-- saved from url=(0014)about:internet --> <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でいろいろなことができることを知りました。 WEBを調べていたら、画像のフェードインのソースを見つけて、 そのソースの意味を調べていましたら、今まで見たことのない 表記が出てきました。再起処理の中に"+img+"とうのがありますが これはどういう意味なのかなと、理解できません。+imgとかimg+ と表記されていた場合は、前の画像に新しい画像を足していくの かなと想像してしまいますが、果たしてその解釈も正しいものやら 想像の範囲でしかありませんが・・・。javascriptに詳しい方、 +img+の意味を是非ご教授お願いいたします。javascriptは、 数日前に本を読み始めたばかりの初心者です。バカな質問と思わ れるかもしれませんが宜しくお願いいたします。 <!-- // 画像のフェードイン・フェードアウト spd = 50; // 変化させる間隔（ミリ秒単位） ntc = 2; // 何%ずつ変化させるか 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); } //-->

  • 二つのフィルタを同時に使用したい

    よろしくお願いいたします。 フェードインと光源のフィルタを同時に使用したいと希望しております。 現在、ページを開くと、画像がフェードインするようになっています。 n = 0; function fadein() { if (n > 100) return; n += 10; IMG1.filters['alpha'].opacity = n; setTimeout("fadein()",200); } ～ <BODY onload="fadein();"> （ちなみに実際には、この画像はページを開くたびに変わります。） document.write("～ id='IMG1' name='name1' style='filter:alpha(opacity=0);'>"); さらにこれに、例えば以下のような光源フィルタを追加したいと希望し試行錯誤しておりましたがどうしてもうまくいきません。 name1.filters.light.addAmbient(255, 255, 255, 50) name1.filters.light.addcone(1, 1, 1, 150,150,255,255,255,100,50) 恐れ入りますが何卒ご教授いただきたくお願いいたします。 申し訳ございませんが、具体的にどのように書けばよいかソースを添付いただけると大変ありがたいです。よろしくお願いします。

  • javascriptでのフェードイン

    javascriptで画像表示をフェードインにしたいと思っております。 ネット上の情報から以下のソースを使用しております。 1html上に一つの画像を配置すると問題無く機能するのですが、 複数の画像を表示しようとすると一つ目の画像しか表示されません。 どこを変更すれば良いのか分からず困っております・・・ 修正方法、もしくはもっと簡単な方法がございましたら教えていただけないでしょうか。 ※以下のサンプルでは画像は二つですが、実際の使用時には制約上は無制限で画像を配置する予定です。 （Photologのサムネイル表示での使用を想定しております。） ///javascript file/// document.write("<style type='text/css'>#thephoto {visibility:hidden;}</style>"); window.onload = function() {initImage()} function initImage() { imageId = 'thephoto'; image = document.getElementById(imageId); setOpacity(image, 0); image.style.visibility = "visible"; fadeIn(imageId,0); } function fadeIn(objId,opacity) { if (document.getElementById) { obj = document.getElementById(objId); if (opacity <= 100) { setOpacity(obj, opacity); opacity += 25; window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 100); } } } function setOpacity(obj, opacity) { opacity = (opacity == 100)?99.999:opacity; // IE/Win obj.style.filter = "alpha(opacity:"+opacity+")"; // Safari<1.2, Konqueror obj.style.KHTMLOpacity = opacity/100; // Older Mozilla and Firefox obj.style.MozOpacity = opacity/100; // Safari 1.2, newer Firefox and Mozilla, CSS3 obj.style.opacity = opacity/100; } window.onload = function() {initImage()} //////////////////////// ///html file/// <html> <head> <title></title> <script type="text/javascript" src="fade.js"></script> </head> <body> <img src="img_01.jpg" id="thephoto" /></div> <img src="img_02.jpg" id="thephoto" /></div> </body> </html> //////////////////////// どなかたご教授いただけますでしょうか。 何卒、宜しくお願い申し上げます。

  • Firefoxとクロームでフェードインにならない

    横並びの画像を3枚時間差でフェードイン（左から順に表示）させたいのですが、 ＩＥでは問題無く動くのですがFirefoxとGoogle Chromeではフェードインにも透過にもならず画像がそのままパっとでてしまいます・・。 FirefoxとGoogle Chrome対策ソース、他に良い方法などございましたら ご教授いただけますでしょうか。宜しくお願いいたします！ <script type="text/JavaScript"> // 画像のフェードイン・フェードアウト var myspd = 5; // 変化する速さ（ミリ秒単位） var myx = 10; // 何%ずつ変化させるか var mypic = new Array("px1","px2","px3"); // 画像のname（順番に並べる） var mycnt = 0; var myp = 0; function mygo() { document.images[mypic[myp]].filters['alpha'].opacity = mycnt; mycnt += myx; if(mycnt >= 100) { mycnt = 0; myp++; } if(mypic.length <= myp) return; setTimeout("mygo()",myspd); } </script> 【ＨＴＭＬ】 <ul> <li><img src="image/mainpx_01.jpg" name="px1" width="365" height="484" style="display: inline; filter:alpha(opacity=2);" /></li> <li><img src="image/mainpx_02.jpg" name="px2" width="365" height="484" style="display: inline; filter:alpha(opacity=0);" /></li> <li><img src="image/mainpx_03.gif" name="px3" width="270" height="484" style="display: inline; filter:alpha(opacity=0);" /></li> </ul>

  • <img src"○.jpg">の○をランダムに！

    1.jpgから30.jpgの30枚の画像はimagesという名のフォルダにあり、 それらの画像をJavaScriptで画像を1枚目からランダムにフェードインするものを作りたく、 http://asamuzak.jp/html/302を参考にして、 2枚目からランダムにフェードインすることはできました。 しかし、1枚目が必ず同じ画像が表示されてしまいます。 body内の<img src"1.jpg" id=""> の部分が表示される1枚目のようです。 1.jpgを2.jpgにすると2.jpgが最初に表示されます。 1枚目からランダムにフェードインするものを作るには、 この<img src"1.jpg" id="">を<img src"ランダムな整数.jpg" id=""> にすればいいのでは？　と思いました。 自分が考えたコードは、 下記コードの場合の動作は、 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"><!-- InstanceBegin template="/Templates/index.dwt" codeOutsideHTMLIsLocked="false" --> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <title></title> <script language="JavaScript"> <!-- var n = Math.floor((Math.random() * 29))+1; //--> </script> </head> <body> <img src="../images/1.jpg" /> </body> </html> 1.jpgが毎回必ず表示されます。 ランダムな整数を取得できるJavaScriptを作り、 var n = Math.floor((Math.random() * 29))+1; その整数を上記コードの <body> <img src="../images/1.jpg" /> </body> の部分を <body> <img src="../images/n.jpg" /> </body> とvar nを入れてやれば 1～30のランダムな整数が入って ページを更新するたびに画像が変わると考えました。 <img src="../images/n.jpg" />の書き方を直せばいいと思うのですが、 どのようにしたらいいのでしょうか？　よろしくお願いします。

  • javascriptの下に空白ができる

    いつもお世話になっております。 ランダムに画像が表示されるjavascriptを作っており、無事に表示はされるのですが、そのランダム画像の下にテーブルを配置し、別の画像（javascriptを使っていない固定画像）をぴったりくっつけたいのですが、3ピクセルくらいの空白ができてしまいます。 Opera、Firedoxでは空白ができず、IEでのみできます。 何が悪いのでしょうか？ 下記にタグを書かせていただきます。 <Script language="JavaScript"><!-- myImg = new Array() myImg[0] = "img1.jpg"; myImg[1] = "img2.jpg"; myImg[2] = "img3.jpg"; //--></Script> </HEAD> <BODY background="img/back.gif"> <SCRIPT language="JavaScript"><!-- i = Math.floor(Math.random()*);document.write("<img src="+myImg[i]+">");//--></SCRIPT> <table width="700" border="0"cellpadding="0" cellspacing="0"><th align="left" valign="top" scope="col"><img src="number1.gif" width="151" height="40" /> number1.gifがぴったりくっつけたい画像です。 以前FLASHを使用したページでも上記のようなことが起こり、教えて頂いて解決したので、（→　http://oshiete1.goo.ne.jp/qa4010291.html　です。）同じようにやってみたのですが、ダメでした。 環境はWindows XP、使用ソフトはDreamweaver8です。 申し訳ありませんが、お助けいただけるとありがたいです。 よろしくお願いします。

  • ＨＴＭＬ・ＣＳＳ・背景画像半透明化

    body背景画像を活かしつつ、もう一枚の画像を前に持ってきて、透けさる 方法 皆様お忙しい中、申し訳ございません。 今、ホームページを作成中でして、body背景に画像を持ってきて、その上に 文章を持ってきたら文章がはっきりしないので、背景画像を活かしつつ文章の前に半透明化の＃000000を７０％位の濃さで残し、これはたぶんＦＬＡＳＨだと思いますが、この様な感じで、（黒い透けた真ん中画像） http://store.honeyee.com/製作したいと思っております。 （ＨＴＭＬ、ＣＳＳで） ＣＳＳではこの様な形でやってみたんですが、bodyより上の画像がすべてすけてしまいレイアウトできませんでした。 filter:alpha(opacity=43); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; ＧＩＦ、ＰＮＧの文字周りの透過ではなく一枚のイメージの透過を教えて 下さい。 宜しくお願い致します。

  • javascriptでのフェードイン

    javascriptを使用してhtml上の画像をフェードインにて表示したいと思っております。 ネット上の情報とこちらのサイトでのアドバイスを元に以下のソースを使用しておりますが WindowsのIE（6&7）で確認すると「エラー：オブジェクトがありません」と表示されてしまいます。 こちらで確認したところjavascript最後の行の「window.onload～」がエラーの原因となっているようなのですが、 修正する記述方法が分からず困っております。 解決策をご存じの方がおられましたらお手数ですが、 ご教授いただけないでしょうか。 何卒、宜しくお願い申し上げます。 ///javascript file（fade.js）/// document.write("<style type='text/css'>#thephoto1 {visibility:hidden;}</style>"); document.write("<style type='text/css'>#thephoto2 {visibility:hidden;}</style>"); document.write("<style type='text/css'>#thephoto3 {visibility:hidden;}</style>"); function initImage() { for(i=1;i<4;i++){ imageId = 'thephoto' + i; image = document.getElementById(imageId); setOpacity(image, 0); image.style.visibility = "visible"; fadeIn(imageId,0); } } function fadeIn(objId,opacity) { if (document.getElementById) { obj = document.getElementById(objId); if (opacity <= 100) { setOpacity(obj, opacity); opacity += 25; window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 100); } } } function setOpacity(obj, opacity) { opacity = (opacity == 100)?99.999:opacity; // IE/Win obj.style.filter = "alpha(opacity:"+opacity+")"; // Safari<1.2, Konqueror obj.style.KHTMLOpacity = opacity/100; // Older Mozilla and Firefox obj.style.MozOpacity = opacity/100; // Safari 1.2, newer Firefox and Mozilla, CSS3 obj.style.opacity = opacity/100; } window.onload = function() { initImage() } //////////////////////// ///html file/// <html> <head> <script type="text/javascript" src="fade.js"></script> </head> <body> <img src="img_01.jpg" id="thephoto1" /> <img src="img_02.jpg" id="thephoto2" /> <img src="img_03.jpg" id="thephoto3" /> </body> </html> ////////////////////////

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

    HP作成の際、 画像をフェードインさせたいのですが、 以下のタグをコピーして貼り付けても エラーになります。 どこを修正したらよいのでしょうか？ よろしくお願いします<m(__)m> <HTML> <HEAD> <TITLE></TITLE> <SCRIPT language="JavaScript"> <!-- spd = 50; ntc = 2; fii = new Array("ia","ib","ic"); cnt = 0; i = 0; function fdInImg() { document.images[fii[i]].filters['alpha'].opacity = cnt; cnt += ntc; if(cnt >= 100) { cnt = 0; i++; } if(fii.length <= i) return; setTimeout("fdInImg()",spd); } //--> </SCRIPT> </HEAD> <BODY bgcolor="#ffffff" onLoad="fdInImg()"> 画像が順番にフェードインします。<BR><BR> <IMG src="画像のアドレス"> <IMG src="画像のアドレス"> <BR><BR> </BODY> </HTML>

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する