- 締切済み
外部 .js で動かないものが出てきてしまいました
外部 .js への移行に伴い、動かないものがあります。エラは「未定義の変数です: rollover」、および「スクリプトで呼び出しているソースが見つかりません。」。 test.html、test.js、および画像はすべて同じディレクトリに置いています。 (test.js) window.onload = function loadImage() { var rollover = new Array(3); for (var i = 0; i < 3 ; i++) { rollover[i] = new Image(); } rollover[0].src = "image-1-x.gif"; rollover[1].src = "image-2-x.gif"; rollover[2].src = "image-3-x.gif"; } または function loadImage() { var rollover = new Array(3); for (var i = 0; i < 3 ; i++) { rollover[i] = new Image(); } rollover[0].src = "image-1-x.gif"; rollover[1].src = "image-2-x.gif"; rollover[2].src = "image-3-x.gif"; } window.onload = loadImage; (test.html) <html> <head> <script type="text/javascript" src="test.js"></script> </head> <body> <a onmouseover="image-1.src=rollover[0].src; return true;" onmouseout="image-1.src='image-1-y.gif'; return true;" href="page-1.htm"><img name="image-1" src="image-1-y.gif" alt="Page 1"></img></a> <a onmouseover="image-2.src=rollover[1].src; return true;" onmouseout="image-2.src='image-2-y.gif'; return true;" href="page-2.htm"><img name="image-2" src="image-2-y.gif" alt="Page 2"></img></a> <a onmouseover="image-3.src=rollover[2].src; return true;" onmouseout="image-3.src='image-3-y.gif'; return true;" href="page-3.htm"><img name="image-3" src="image-3-y.gif" alt="Page 3"></img></a> </body> </html>
- mrkeizou
- お礼率18% (27/143)
- JavaScript
- 回答数3
- ありがとう数2
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- yambejp
- ベストアンサー率51% (3827/7415)
こんな感じでどうですか？ //test.html <head> <script type="text/javascript" src="test.js"></script> </head> <body> <a href="page-1.htm"><img name="image-1" src="image-1-y.jpg" alt="Page 1" /></a> <a href="page-2.htm"><img name="image-2" src="image-2-y.jpg" alt="Page 2" /></a> <a href="page-3.htm"><img name="image-3" src="image-3-y.jpg" alt="Page 3" /></a> </body> //test.jd function loadImage() { tmpimage=new Image(); rollover=new Object(); rollover[0]=document.images["image-1"]; rollover[1]=document.images["image-2"]; rollover[2]=document.images["image-3"]; rollover[0].onmouseover=function(){tmpimage.src=this.src;this.src="image-1-x.jpg"}; rollover[1].onmouseover=function(){tmpimage.src=this.src;this.src="image-2-x.jpg"}; rollover[2].onmouseover=function(){tmpimage.src=this.src;this.src="image-3-x.jpg"}; for(var i=0;i<3;i++){ rollover[i].onmouseout =function(){this.src=tmpimage.src}; } } window.onload = loadImage; もとソースの問題点は、まずimage-*.srcを書き換えようと していますがimage-*が宣言されているわけではないので アクセスできません。せめてdocument.images["image-1"] のように書いたほうがいいでしょう。 くわえてこれはアンカー(aタグ)でイメージを書きかえる のではなくimgタグに直接トリガーをもってくるほうが 効率的です。 それと、回答者に謙虚にできないなら、質問する資格は ないです。（蛇足）
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
>function loadImage() { >var rollover = new Array(3); の様にした場合には、 変数rollover は、この関数の内部でだけ有効な変数なので、 rollover = new Array(3); の様に（いきなり）大域変数として扱うか 関数の外で var rollover; のように関数の外で宣言しておく必要があります。 あと、 name="image-1" のようにname 属性にハイフンを使用することは可ですが、 script 中で image-1.src のようにアクセスしようとすると image - 1 のように全体が１つの名前だとは、解釈されないと思うので、このような名前を使う場合には注意が必要です。 (単にimage1 のようにした方がいいと思います)
- VCAT
- ベストアンサー率20% (16/79)
主な原因は var rollover = new Array(3); で、これは rollover = new Array(3); であるべき。また、 onmouseover="image-1.src=rollover[0].src; return true;" で、これは onmouseover="images['image-1'].src=rollover[0].src;" であるべきです。return true;はどういう意味ですか？ それから、</img>は不要です。
補足
おかしなところにひとつ気づきました。 変数定義を関数の前に書いたら「定義されていない変数」のエラだけ消えました。 内部記述ではそうしていたのですが、外部移行で複写と貼り付けをした際にこの行だけ複写し忘れ、あとから貼り付けたためでした。 さて、「べき」論に対する返答ですが、それを直してももうひとつのエラは解決しません。 というのも、文字数制限で割愛しましたが、内部記述ではそのままエラもなく動いているからです。 つまりここでは「べき」とか「～は不要」は無意味です（一応試しました）。 引き続きお願いします。
補足
それらの点は下にも書いているように、今回動作しない問題に無関係です。書き換えでも試しましたし、そもそも内部記述でエラなく動作しています。 今回の問題に対する回答をお願いします (現に動作しません)。