• 締切済み

FireFoxにプロパティ"src"は存在しない?

指定された画像要素の"SRC"属性を書き換えて、 以下のような画像を変更するプログラムを書いています。 function hoge(ImgName){ document.getElementById("Picture").src=ImgName; } (中略) <img src="" id="Picture" onClick="JavaScript:hoge(hoge.jpg)"> IEでは実行可能なのですが、FireFoxで実行すると 「document.getElementById("Picture") has no properties」 というエラーが出てしまいます。 setAttributeなども試したのですが同様のエラーが出てだめでした。 やはり指定プロパティ(src)が存在しないので駄目みたいです。 FireFox等でIMG要素のSRC属性を書き換えるにはどうすれば 良いでしょうか。アドバイスをお願いします。

みんなの回答

  • steel_gray
  • ベストアンサー率66% (1052/1578)
回答No.3

#2の補足のコピペに前後を補足した次のようなHTMLファイルで試しましたが再現(エラー発生)しませんでした。 <html> <head> <title></title> </head> <body> <script language="javascript"> function loadimage(ImgName){ document.getElementById("Picture").src=ImgName; } </script> <script type="text/javascript"> </script> <img src="" id="Picture" onclick="JavaScript:document.getElementById('PictureWindow').style.visibility='hidden'"> <a href="JavaScript:loadimage('41.jpg')">■</a> </body> </html> ■をクリック後、ソース表示するとimgのsrcは'41.jpg'に変更されていました… (Web Developer※1 の「編集内容を反映したソース表示」で確認) 環境とか、何か違いがあるのでしょうけど、再現しない以上、ちょっと私にはわからないです。 ※1 Web Developer http://www.infoaxia.com/tools/webdeveloper/

Wunderlich
質問者

お礼

すみません、 色々と調査した結果。別の箇所でエラーが発生していて 動作が中断していたことが判明致しました。 問題解決いたしました。 お騒がせして申し訳ございませんでした

  • steel_gray
  • ベストアンサー率66% (1052/1578)
回答No.2

Firefoxでも質問にあるような手法でのsrc属性の書き換えは可能です。 ありえそうなミスとして、 <img ~ name="Picture">としているケースです。 IEは name であっても getElementById が成功してしまう妙な実装がされています。 そうではない場合、適当に書かずに本物からコピペして補足してみてください。

Wunderlich
質問者

補足

ソースコード、適当に書いてしまって申し訳ございません。 以下が実装中のコードです。IEで画像の切り替えを確認しています。 (関数宣言部分) <script language="javascript"> function loadimage(ImgName){ document.getElementById("Picture").src=ImgName; } </script> (IMG要素) <img src="" id="Picture" onclick="JavaScript:document.getElementById('PictureWindow').style.visibility='hidden'"> (リンク要素) <a href="JavaScript:loadimage('41.jpg')">■</a> 動作としては、ユーザがリンクをクリックすると、 loadimage関数を呼び出し、同時にローカル変数ImgNameに 画像のURLを示す文字列を渡します。その後ImgNameに 渡されたURLで、ID"Picture"で示される要素のsrc属性を 書き換えて画像の切り替えを行います。 分かりにくくてごめんなさい。

noname#49664
noname#49664
回答No.1

<img src="" id="Picture" onClick="JavaScript:hoge(hoge.jpg)"> ↓ <img src="" id="Picture" onClick="JavaScript:hoge('hoge.jpg')"> ではだめですか?

Wunderlich
質問者

補足

あぁすみません。そこの文書は適当に打っていたので、 クォーテーションを付け忘れてました。実際にはもちろん 訂正いただいたとおりになっていて、IEで動作を確認しています。 紛らわしくてごめんなさい。

関連するQ&A

  • imgのsrcに値を設定するには

    <img src="photo.jpg" title="" id="2" /> document.getElementById('2').setAttribute('title',代入値); のようにsrcのほうにも値を設定したいのですが、単純に document.getElementById('2').setAttribute('src',代入値); のようにしてもできませんでした。srcに値を設定するにはどうしたらよいでしょうか?

  • 画像の不完全な読み込みについて

    ロールオーバー(アウト)で画像切り替えをしています。 MacOSX IE 5.xにおいてロールオーバー(アウト)時の画像の読み込みが途中で終わってしまって、不完全な状態で表示されてしまいます。 *****外部jsファイル******** if(document.images){ var hoge_over=new Image(70,162); hoge_over.src="./hoge.gif"; var hoge_out=new Image(70,162); hoge_out.src="./hoge2.gif"; } function xOver(imgname){ if(document.images){ document.images[imgname].src=eval(imgname+"_over.src"); } } function xOut(imgname){ if(document.images){ document.images[imgname].src=eval(imgname+"_out.src"); } } *****htmlファイル******** <a href="./huge.shtml" onmouseover="xOver('hoge');" onmouseout="xOut('hoge');" target="_self"> <IMG NAME="hoge" SRC="./hoge.gif" width="70" height="162" alt="hoge" title="hoge" border=0></a> ************************** 問題が環境にあるのか、javascriptの書き方にあるのか、htmlの書き方にあるのか分かりませんが、問題が環境にあるとしたら、完全に読み込ませるような方法はあるのでしょうか。よろしくお願いします。

  • 別フレームの画像の操作について

    画像をクリックすると指定した所にある画像が その画像に変わるというタグを作ったのですが、 1つのフレーム内ではできるのですが 2つのフレームを使って、もう片方にある指定した 画像を変更する事ができなく、色々とサイトを見て みたのですがどうにもうまくいかず、質問させていただきます。 1つ目のフレームののタグは <SCRIPT language="JavaScript"> <!--HPB_SCRIPT_CODE_40 function _HpbImgSwap(imgName, imgSrc) { var appVer=parseInt(navigator.appVersion); var isNC=false,isN6=false,isIE=false; if (document.all && appVer >= 4) isIE=true; else if (document.getElementById && appVer > 4) isN6=true; else if (document.layers && appVer >= 4) isNC=true; if (isNC||isN6||isIE) { if (document.images) { var img = document.images[imgName]; if (!img) img = _HpbImgFind(document, imgName); if (img) img.src = imgSrc; } } } function _HpbImgFind(doc, imgName) { for (var i=0; i < doc.layers.length; i++) { var img = doc.layers[i].document.images[imgName]; if (!img) img = _HpbImgFind(doc.layers[i], imgName); if (img) return img; } return null; } //--> </SCRIPT> 続きは次のレスに(長くてすいません)

  • srcに「banner.」で始まるファイルを指定しているimgタグが消える

    急に謎の症状が発生して困っています。 何か知っている方がいたらご教示お願いします。 謎の症状が起きるスクリプトの例------------------------ echo '<div>'; echo '<a href="hoge1"><img src="img/banner.jpg"></a>'; echo '<a href="hoge2"><img src="img/banner2.gif"></a>'; echo '<a href="hoge3"><img src="banner.gif"></a>'; echo '<a href="hoge4"><img src="banner.png"></a>'; echo '<a href="hoge5"><img src="hogehoge.gif"></a>'; echo '</div>'; ------------------------------------------------------ 上記のようなスクリプトを実行した場合に、3行目の「img/banner2.gif」と6行目の「hogehoge.gif」を指定しているimgタグしか表示されません。 残りはimgタグの部分だけ綺麗さっぱりに消えてaタグの部分だけ表示されます。実行結果が下記のようになるのです。(実際には改行されませんが、見やすいように改行してます。) 実行結果--------------------------------------- <div> <a href="hoge1"></a> <a href="hoge2"><img src="img/banner2.gif"></a> <a href="hoge3"></a> <a href="hoge4"></a> <a href="hoge5"><img src="hogehoge.gif"></a> </div> ----------------------------------------------- banner.gifやimg/banner.gifは表示されるファイルと同じディレクトリの中に存在しています。 昨日ちゃんと表示されていたのを確認しました。そのときからサーバーの設定は変更していないので、何が原因なのかが分かりません。 過去に同じような症状が起こった方はいないでしょうか? PHPのエラーログを見てもエラーも警告もありませんでした。 【環境】 OS: CentOS/5 HTTPD: Apache/2.2.3 PHP: PHP/5.1.6(eAccelarator、ZendOptimizerが入ってます) ちなみに「banner」だけだとOKでした。「banner.」が付くとダメみたいです。 よろしくお願いします。

    • ベストアンサー
    • PHP
  • Firefoxで表示できないのは何故でしょう?

    お世話になります IE6、Operaでは表示できたのですがFirefoxでは表示できませんでした(><) 何か見落としがあるのでしょうか? <script language="javascript"> <!-- window.onload = function() { n=document.getElementById("div1").innerText; if(n == "a0"){ document.getElementById("img1").style.display = "block"; document.getElementById("img1").style.top = "100px"; document.getElementById("img1").style.left = "100px"; } if(n == "a"){ document.getElementById("img2").style.display = "block"; document.getElementById("img2").style.top = "100px"; document.getElementById("img2").style.left = "200px"; } } //--> </script> <div id="div1">a</div> <form action="test.cgi" method="post"> <input type="hidden"name="a" value="leap_day"> <input type="image" src="sample0.gif" id="img1" style="position:absolute;display:none;"> </form> <form action="test.cgi" method="post"> <input type="hidden"name="b" value="leap_day"> <input type="image" src="sample1.gif" id="img2" style="position:absolute;display:none;"> </form> n=document.getElementById("div1").innerText; if(n == "a0"){ } if(n == "a") { } を消すと表示はできるのですが・・・

  • マウスオーバー

    マウスオーバーの制御で下記のソースなのですが、今まで、こちらを教えてもらってやっていました。 今のままだと、オーバーで画像が変わるだけでマウスが外れると、元の画像に戻ってしまいます。該当ページへジャンプしたときに画像が変わったままにするのにはどうしたらよいのでしょうか。 <script LANGUAGE="JavaScript"> <!-- if (document.images) { //if image object is available img1on = new Image(); // MouseOver Images img1on.src = "image/1.gif"; img2on = new Image(); img2on.src = "image/2.gif"; img1off = new Image(); // MouseOut Images img1off.src = "image/1_1.gif"; img2off = new Image(); img2off.src = "image/2_2.gif"; } function imgOn(imgName) { if (document.images) { document[imgName].src = eval(imgName + "on.src"); }} function imgOff(imgName) { if (document.images) { document[imgName].src = eval(imgName + "off.src"); }} //--> </script> ***HTML***** <a onMouseOver="imgOn('img1')" onMouseOut="imgOff('img1')" TARGET="_self" href="index.htm"> <img NAME="img1" image/1_1.gif" width="130" height="20"></a> <a onMouseOver="imgOn('img2')" onMouseOut="imgOff('img2')" href="next.htm"> <img NAME="img2" SRC="image/2_2.gif" width="130" height="20"></a>

  • JAVASCRIPTの接続子について

    始めまして、JAVASCRIPPTで以下の様なコードを書いているのですが 'img' + page;の部分でエラーになってしまいます。どなたか正しい書き方を御享受下さい。 //画像を最初にキャッシュする var img1 = new Image(); var img2 = new Image(); var img3 = new Image(); var img4 = new Image(); var page = 0; img0 = "image/ginotitle.JPG"; img1 = "image/Gino1page.JPG"; img2 = "image/Gino2page.JPG"; img3 = "image/Gino3page.JPG"; function moverts(){ switch(window.event.button) { case 1://************** 左クリック ********************************************* page = page - 1 ; //指定された画像を変更する document.getElementById("pic").src = 'img' + page; //id名「pic」の画像ソースをobjの画像ソースに書き換える document.getElementById("pic").src = 'img' + page; break; case 2://************** 右クリック ********************************************* page = page + 1 ; alert( = sns ); //指定された画像を変更する document.getElementById("pic").src = 'img' + page; //id名「pic」の画像ソースをobjの画像ソースに書き換える document.getElementById("pic").src = 'img' + page; break; } }

  • イベントリスナーに設定した関数内で、id属性の値を取得するには

    IEでイベントリスナーに設定した関数で、イベントを発生させた要素のid属性値を取得する方法が分からずに困っています。 記述したコードは下記のようになります。Firefoxではうまく動作しました。 clickHandler内でFirefoxのe.currentTarget.idに対応するような処理はどのように行えばよいでしょうか。 ------------ JavaScript部分 ----------------------- function addEvent(elm, evType, fn, useCapture) { if (elm.addEventListener) { elm.addEventListener(evType, fn, useCapture); return true; } else if (elm.attachEvent) { var r = elm.attachEvent('on' + evType, fn); return r; } else { elm['on' + evType] = fn; } } function clickHandler(e) { var id; if (document.all && !window.opera) { // IEの場合に、ここの処理でid属性の属性地 hoge1やhoge2を取得したい。 // id = window.event.srcElement.id; これではだめ } else { id = e.currentTarget.id; } // idに応じた処理 } var elm1 = document.getElementById('hoge1'); var elm1 = document.getElementById('hoge2'); addEvent(elm1,'click',clickHandler,false); addEvent(elm2,'click',clickHandler,false); ------------ HTML部分 ----------------------- <li><a id="hoge1" href="#"><img src="●●" /></a></li> <li><a id="hoge2" href="#"><img src="●●" /></a></li> 先に進むことができずに困っています。よろしくお願いします。

  • ホームページビルダーでつくったonmousemoveのスクリプトがFirefoxで作動しません

    はじめまして。 ホームページビルダーV6.5でホームページを作成している初心者です。 よくある、「ボタンに触れると大きな画像が入れ替わり、ボタンもへこむ。ボタンから離れるとボタンだけもとに戻る」 というイベントを作成したのですが、IEではうまく動いても、Firefoxでは作動しません。 インターネットでいろいろと調べ、皆さんの回答に従ってソースをいじくってみたのですが(NameでなくIDを使う、<span>タグを使って書き直すなど)、解決できませんでした。 すみませんが、どなたかご教示いただけませんでしょうか。 どうぞよろしくお願いいたします。 下に、ホームページビルダーでイベント設定した場合に出る、(私がいじる前の)ソースを貼っておきます。 ファイル名はわかりやすいよう日本語で示していますが、実際には半角英数字でつけています。 <SCRIPT language="JavaScript"> <!--HPB_SCRIPT_CODE_40 function _HpbImgSwap(imgName, imgSrc) { var appVer=parseInt(navigator.appVersion); var isNC=(document.layers && (appVer >= 4)); var isIE=(document.all && (appVer >= 4)); if (isNC || isIE) { if (document.images) { var img = document.images[imgName]; if (!img) img = _HpbImgFind(document, imgName); if (img) img.src = imgSrc; } } } function _HpbImgFind(doc, imgName) { for (var i=0; i < doc.layers.length; i++) { var img = doc.layers[i].document.images[imgName]; if (!img) img = _HpbImgFind(doc.layers[i], imgName); if (img) return img; } return null; } //--> </SCRIPT> //中略 <TBODY> <TR> <TD align="left" width="665"> <TABLE bgcolor="#ffffff" width="673" cellspacing="0"> <TBODY> <TR> <TD valign="top"><IMG src="もとの画像.jpg" width="450" height="405" border="0" name="gazou"></TD> <TD valign="top" align="right"><IMG src="もとのボタン.jpg" width="275" height="37" border="0" name="button" onmouseover="_HpbImgSwap('button', 'へこんだボタン.jpg'); _HpbImgSwap('gazou', 'かわった画像.jpg');" onmouseout="_HpbImgSwap('button', 'もとのボタン.jpg');"></TD> </TR> //後略

  • マウスオーバー・アウトの制御のソース

    複数のボタンでマウスオーバー・アウトの制御のソースを教えてもらったのですが、質問いたします。 この場合、このボタンはオーバーとアウト、それぞれ同じ画像を使用しているのですが、その場合でも全部違ったファイル名をつけなければいけないのでしょうか? 現在はそあしているのですが、何か無駄な気がして・・・。 よしくお願いします。 <SCRIPT LANGUAGE = "JavaScript"> <!-- if (document.images) { //if image object is available img1on = new Image(); // MouseOver Images img1on.src = "images/c1b.gif"; img2on = new Image(); img2on.src = "images/c2b.gif"; img3on = new Image(); img3on.src = "images/c3b.gif"; img1off = new Image(); // MouseOut Images img1off.src = "images/c1a.gif"; img2off = new Image(); img2off.src = "images/c2a.gif"; img3off = new Image(); img3off.src = "images/c3a.gif"; img4off = new Image(); } function imgOn(imgName) { if (document.images) { document[imgName].src = eval(imgName + "on.src"); }}   function imgOff(imgName) { if (document.images) { document[imgName].src = eval(imgName + "off.src"); }} //--> </SCRIPT>