- ベストアンサー
Yahoo!ウィジットでJavaScriptの使い方とエラーの解決方法
- Yahoo!ウィジットを利用してJavaScriptを使いたいがエラーが出てうまくいかない。ReferenceError: setTimeout is not defined (move_pic2.js: Line 10)。解決方法はあるのか。
- Yahoo!ウィジットでJavaScriptを使う方法として、外部のjsファイルを読み込む方法がある。しかし、読み込んだjsファイルでエラーが発生している。「ReferenceError: setTimeout is not defined (move_pic2.js: Line 10)」というエラーメッセージが表示される。このエラーの原因と解決方法について説明する。
- Yahoo!ウィジット内でJavaScriptを利用する方法として、外部のjsファイルを読み込んで使う方法がある。しかし、読み込んだjsファイルでエラーが発生している。「ReferenceError: setTimeout is not defined (move_pic2.js: Line 10)」というエラーメッセージが表示され、正常に動作していない。このエラーの原因と解決方法について解説する。
- JavaScript
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
関連するQ&A
- htmlファイルによって正常にロールオーバーするページとしないページがあるのですが、どこが間違っているのでしょう？
お世話になります。 すべてのページに共通のボタンを設置してロールオーバーさせたいのですが、なぜかhtmlファイルによってきちんとロールオーバーするページとしないページがあります。初心者なので知らない内にソースをいじってしまったのかもしれませんが、このソースのどこが間違っているか教えていただけないでしょうか？初心者なものでホントに分からないです。ホントに困っています、どうかよろしくお願いします。ちなみにDreamweaverMXを使用しています。 ■正常に働くhtml <body onLoad="MM_preloadImages('images/home02.jpg','images/news02.jpg','images/company02.jpg')"> 中略 <a href="index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','','images/home02.jpg',1)"><img src="images/home01.jpg" alt="home" name="Image1" width="134" height="53" border="0"></a> <a href="news.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image2','','images/news02.jpg',1)"><img src="images/news01.jpg" alt="新着情報" name="Image2" width="134" height="53" border="0"></a> <a href="company.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image3','','images/company02.jpg',1)"><img src="images/company01.jpg" alt="会社概要" name="Image3" width="133" height="53" border="0"></a> ■正常に働かないhtml <body onLoad="MM_preloadImages('images/home02.jpg','images/news02.jpg','images/company02.jpg')"> 中略 <a href="index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','','images/home02.jpg',1)"><img src="images/home01.jpg" alt="home" name="Image1" width="134" height="53" border="0"></a> <a href="news.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image2','','images/news02.jpg',1)"><img src="images/news01.jpg" alt="新着情報" name="Image2" width="134" height="53" border="0"></a> <a href="company.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image3','','images/company02.jpg',1)"><img src="images/company01.jpg" alt="会社概要" name="Image3" width="133" height="53" border="0"></a>
- ベストアンサー
- HTML
- マウスオーバーで画像の入れ替え
以下のソースでマウスオーバー時に画像の入れ替えをしたいのですが、IE6では動作するのですが、firefoxでは動作しません。 firefoxでも動くようにするにはどうしたらいいですか？ アドバイスよろしくお願いいたします。 <html> <head> <script language="JavaScript"> <!-- // タイマー変数の初期化 timer = ""; // スワップイメージ function SwapImage(img) { obj = document.getElementById("image"); obj.src = img; clearTimeout(timer); timer=setTimeout('DefaultImage()',5000); } // イメージ画像の初期化 function DefaultImage() { obj = document.getElementById("image"); obj.src = 'img/default.gif'; clearTimeout(timer); } //--> </script> </head> <body> <div class="btn"><a href="#"><img src="img/sample1.jpg" onmouseover="SwapImage('img/test01.jpg')" width="100" height="50" border="0" /></a></div> <div class="btn"><a href="#"><img src="img/sample2.jpg" onmouseover="SwapImage('img/test02.jpg')" width="100" height="50" border="0" /></a></div> <div class="btn"><a href="#"><img src="img/sample3.jpg" onmouseover="SwapImage('img/test03.jpg')" width="100" height="50" border="0" /></a></div> <div id="photo"><img src="img/default.gif" name="image" width="300px" height="150px"></div> </body> </html>
- ベストアンサー
- JavaScript
- このCSSどこが間違ってる？中央揃えで二段組みみするには？
お世話になります。 CSS初心者なのでもしかしたら基本的な質問をしているかもしれませんがどうかお許しください。 現在、中央揃えコンテンツのサイトを作ろうとしているのですが、各コンテンツをdiv分けして内容部分となるコンテンツ（leftmenu/centermenu）を二段組みにしたいと思っています。ところが何故かcentermenuがleftmenuの下に表示されてしまいます。これがCSSのどこがおかしいのでしょう？一応本を読みながら書いたのですが、おかしいところがあったらどうか教えてください。 div#header{width:800px; margin-left:auto; margin-right:auto; } div#container{width:800px; margin-left:auto; margin-right:auto; } div#contens{width:800px; margin-left:auto; margin-right:auto; div#leftmenu{width:157px; float:left; margin-left:auto; margin-right:auto; background-color:#FFFFFF} div#centermenu{width:643px; float:right; margin-left:auto; margin-right:auto; background-color:#FFFFFF} } div#footer{width:800px; margin-left:auto; margin-right:auto; clear:both; } body{background-attachment: scroll; background-color: #990000; background-image: url(bg-photo.jpg); background-repeat: repeat-y; background-position: center; } ＨＴＭＬものせておきます。 </head> <body onLoad="仮.jpg')"> <div id="header"> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="800" height="133"> <param name="movie" value="top.swf"> <param name="quality" value="high"> <embed src="toonie-top.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="800" height="133"></embed> </object> </div> <div id="container"> <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','','home02.jpg',1)"><img src="home01.jpg" name="Image1" width="134" height="53" border="0"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image2','','news02.jpg',1)"><img src="news01.jpg" name="Image2" width="134" height="53" border="0"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image3','','company02.jpg',1)"><img src="company01.jpg" name="Image3" width="133" height="53" border="0"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image5','','work02.jpg',1)"><img src="work01.jpg" name="Image5" width="133" height="53" border="0"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image6','','result02.jpg',1)"><img src="result01.jpg" name="Image6" width="133" height="53" border="0"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image4','','contact02.jpg',1)"><img src="contact01.jpg" name="Image4" width="133" height="53" border="0"></a> </div> <div id="contens"> <div id="leftmenu"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image7','','vuk109-bottom2.jpg',1)"><img src="vuk109-bottom.jpg" name="Image7" width="157" height="69" border="0"></a><br> <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image9','','blog2.jpg',1)"><img src="blog.jpg" name="Image9" width="157" height="69" border="0"></a><br> <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image8','','link2.jpg',1)"><img src="link.jpg" name="Image8" width="157" height="69" border="0"></a></div> <div id="centermenu"> <div align="left"><img src="index-bar.jpg"></div> </div> </div> <div id="footer"> <div align="center"> <p><img src="line.gif" width="800" height="5"><br>Copyright (C) 2007 株式会社未定. All Rights Reserved.</p> </div> </body> </html>
- ベストアンサー
- ブログ
- javascriptを使って画像を切り替える
javascriptを使って画像（id="chengeImg"）を切り替えたいと思っています。 画像はsamp0.jpg～samp4.jpgの計5枚 ただ、問題があって、 画像によって移り替わる時間を変えたいんです。（一定ではない） setTimeoutの引数(time)と画像を、どう結びつければよいのかが 分からず困っています。 それぞれ、 画像0の時は5000ミリ秒 画像1の時は4000ミリ秒 画像2の時は3000ミリ秒 … と移り変わる速度を変えたいのです。 一応、timeは配列がいいのかと配列にしてみました それが良いのかどうかも定かではないのですが… どのようにすれば、時間が一定でない画像切り替えが可能になるでしょうか？ スクリプトを詳しく教えていただけると、ありがたいです。 以下、javascriptの一部を記します。 【js】ファイル(imagechange.js)------ window.onload=anime; var img=new Array(5); img[0]=new Image(); img[1]=new Image(); img[2]=new Image(); img[3]=new Image(); img[4]=new Image(); img[0].src="samp0.jpg"; img[1].src="samp1.jpg"; img[2].src="samp2.jpg"; img[3].src="samp3.jpg"; img[4].src="samp4.jpg"; //画像枚数 var num=0; //時間制御 time = new Array(5000, 4000, 3000, 3000, 3000); function anime(){ var ch = document.getElementById("changeImg"); ch.src=img[num].src; if(num<4){ num++; }else{ num=0; } setTimeout("anime()",time); } 【html】ファイル-------- <head> <title>画像切り替え</title> <script type="text/javascript" src="imagechange.js"</script> </head> <body> <p><img src="samp0.jpg" width="700" height="200" id="chengeImg"></p> </body> </html> 以上となります。 詳しい方、ぜひ教えてくださいませ。 どうぞ宜しくお願いいたします。
- ベストアンサー
- JavaScript
- imgタグ内 name とｉｄの違い
こんにちは、DreamWeaver8を使ってホームページの勉強を始めたものです。 スワップイメージを作成していて、imgタグ内でname属性とid属性とがでました。スワップイメージの振る舞いには何の違いもないのですが、そもそも属性がnameとidとではどのように違うのかなと思いました。 何かお分かりの方がいましたら教えてください。 よろしくお願いします。 例）上側はname,下側はid <img src="button1.gif" name="Image1" width="150" height="29" id="Image1" onmouseover="MM_swapImage('Image1','','button1-2.gif',1)" onmouseout="MM_swapImgRestore()" /> <img src="button2.gif" width="150" height="29" id="Image2" onmouseover="MM_swapImage('Image2','','button2-2.gif',1)" onmouseout="MM_swapImgRestore()" />
- ベストアンサー
- ホームページ作成ソフト
- JavaScript - 月ごとに画像変化
<script type="text/javascript"> <!-- var myimg = new Array(); myimg[0] = '<img src="a.jpg" alt="a.jpg" width="477" height="33">'; myimg[1] = '<img src="b.jpg" alt="b.jpg" width="477" height="33">'; myimg[2] = '<img src="c.jpg" alt="c.jpg" width="477" height="33">'; myimg[3] = '<img src="d.jpg" alt="d.jpg" width="477" height="33">'; myimg[4] = '<img src="e.jpg" alt="e.jpg" width="477" height="33">'; myimg[5] = '<img src="f.jpg" alt="f.jpg" width="477" height="33">'; myimg[6] = '<img src="g.jpg" alt="g.jpg" width="477" height="33">'; myimg[7] = '<img src="h.gif" alt="h.jpg" width="477" height="33">'; myimg[8] = '<img src="i.jpg" alt="i.jpg" width="477" height="33">'; myimg[9] = '<img src="j.jpg" alt="j.jpg" width="477" height="33">'; myimg[10] = '<img src="k.jpg" alt="k.jpg" width="477" height="33">'; myimg[11] = '<img src="l.jpg" alt="l.jpg" width="477" height="33">'; var mynow = new Date(); var mymonth = mynow.getMonth(); document.write("<center><img 'src="+myimg[mymonth ]+"'></center>"); // --></script> このようなものをHTML属性のBODY内に入れて、月ごとに画像を変化させるということを実現しています。 画像の変化自体はうまくいってますが、ブラウザの多くは [a.jpg]'> （"["と"]"は画像の端）という風に、右端に文字が出てしまいます。 試しに、2つの"'"を消せば []> という風に、画像が見つからない×印がついて表示も出来ません。 文字が出ないようにするにはどう対応するのでしょうか。 詳しい方アドバイスお願いします。 ちなみにJavascriptにこだわらず、月ごとに画像が変化できれば何でもいいです。
- ベストアンサー
- JavaScript
- このタグ教えて下さい
このタグを使うと画像がスライドするように3秒ごとに画像が変わって行くらしいのですが、私も使ってみたいです。 ですが何処に自分の作った画像を入れたらよいのか解りません？ 画像サイズは、横485 縦162 枚数は4枚入れてみたいです。 どうぞ宜しくお願いします。 <style type="text/css"> #photo1{ position:absolute; top:16px; left:-256px; z-index:1; } #photo2{ position:absolute; top:16px; left:16px; } </style> <script type="text/javascript"> window.onload =function(){ photo1Img=document.getElementById("photo1"); photo2Img=document.getElementById("photo2"); album.swapImage(); } var album = { imageURL : [ "a.gif", "b.gif", "c.gif", ], swapImage : function(){ this.count++; if (this.count >= 3) this.count = 0;this.count2 = 0; photo1Img.style.left=""; photo1Img.src = this.imageURL[this.count]; setTimeout("album.counter()", 100); }, counter:function(){ this.count2++; photo1Img.style.left=(this.count2*16-256)+"px"; if(this.count2 > 16){ setTimeout("album.swapImage()", 3*1000); photo2Img.src = this.imageURL[this.count]; } else setTimeout("album.counter()", 30); }, count : 0,count2 : 0 }; </script> <p> <img src="a.gif" id="photo1" width="256" height="64"> <img src="a.gif" id="photo2" width="256" height="64"> </p>
- 締切済み
- その他([技術者向] コンピューター)
- JavaScriptの画像入れ替えについて
下記のようなものでサムネイルをクリックすると大きな画面に表示される、みたいなものを作っています。しかし職場のIE6でクリックすると表示されなく大きな画像が消えてしまいます。 ちなみに自宅のIE６で確認したときは大丈夫だったのですが、、、 またサムネイル画像のアンカー部分のjavasscript:void(0);を消すと表示されるようになるのですが、やはりここのvoid0には問題があるのでしょうか？？ またサーバーにUPする前オンライン上ではなくPCで確認している時はちゃんと表示できていたました。 あまり詳しくないものでどなたかよろしくお願い致します。 <script type="text/javascript"> <!-- function imgch(url) { document.getElementById("image").src=url; } //--> </script> <style type="text/css"> img { border:none; } </style> </head> <body> <img src="image/2.jpg" width="500" height="500" id="image" /> <a href="javascript:void(0);"><img src="image/2.jpg" width="50" height="50" onClick="imgch(this.src)" ></a> <a href="javascript:void(0);"><img src="image/3.jpg" width="50" height="50" onClick="imgch(this.src)" ></a> <a href="javascript:void(0);"><img src="image/3.jpg" width="50" height="50" onClick="imgch(this.src)" ></a> </body>
- ベストアンサー
- JavaScript
- JavaScriptでクレイアニメ。ちらつきます。
JavaScript初心者です。Windows７とGoogleChromeを主に使っています。 <!DOCTYPE html> <html><head><title>animation</title> <script src="js/jquery-1.11.0.min.js"></script> <style> #area{ width:420px;height:320px;text-align:center;background:gray; } </style> </head> <body> <div id="area"><br><img src='slideshow/photo0.jpg'></div> <button id="move">PLAY</button> <script> time=200;lastcode=10; count=0; $("#move").mouseover(function(){ anime=setInterval(nextfilm,time); }) .mouseout(function(){ clearInterval(anime); }); nextfilm=function() { if(count==lastcode)count=0 else{count++;} ; // count=(count==lastcode)? 0 : count+1; bufa="<br><img src='slideshow/photo"+count+".jpg'>"; $("#area").html(bufa); } </script> </body> </html> slideshowフォルダにphoto0～10.jpg（400×300px）という画像を用意し、カーソルをPLAYボタンに乗せると0.2秒間隔で次々に画像を見せるクレイアニメ及びスライドショー再生プログラムをごくシンプルに作ってみました。 実行してみると、けっこうチカチカします。画像タイプの問題かなとも思いアニメーションによく使われるgifファイルも作って試しましたが、変わりません。よく見たら、同じ画像をgifにしたらデータ量が倍以上あるんですね。 このちらつき現象、時折チカチカせずスムーズになることもあり、常時スムーズだといいのにと思うのですが、ではこれはハード的な問題でプログラムで抑止することは不可能ということでしょうか？抑止できるとしたらどんな書き方があるのでしょうか？ チカチカさせる効果の紹介はネット上でも多いのですが、逆にチカチカしてしまうのを抑えたいとなると参考にできるページに行き当たらず、ここで質問に思い立った次第です。 どなたかご教示お願いします。
- ベストアンサー
- JavaScript
- javascript setTimeout
javascript初心者ですが、練習を兼ねて神経衰弱を作っています。 setTimeoutを使って「めくったカードが違う場合、少し時間を経過させてから元に戻す」 という動作を作りたいのですが、うまくいきません。 /--------------------------------------------------------/ <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>神経衰弱</title> <style type="text/css"> ul { width: 300px; list-style:none; margin: 0; padding: 0; } li { float:left; margin: 0; padding; 0: } img { vertical-align: bottom; /*上下隙間埋め*/ } #all { width: 300px; margin: 0px auto 0px; margin-top: 50px; } </style> </head> <body> <div id="all"> <ul> <li><img src="none.jpg" alt="3" width="100" height="100" id="c_1" onclick="conce('c_1')" /></li> <li><img src="none.jpg" alt="1" width="100" height="100" id="c_2" onclick="conce('c_2')" /></li> <li><img src="none.jpg" alt="4" width="100" height="100" id="c_3" onclick="conce('c_3')" /></li> <li><img src="none.jpg" alt="4" width="100" height="100" id="c_4" onclick="conce('c_4')" /></li> <li><img src="none_2.jpg" alt="" width="100" height="100"/></li> <li><img src="none.jpg" alt="2" width="100" height="100" id="c_5" onclick="conce('c_5')" /></li> <li><img src="none.jpg" alt="1" width="100" height="100" id="c_6" onclick="conce('c_6')" /></li> <li><img src="none.jpg" alt="2" width="100" height="100" id="c_7" onclick="conce('c_7')" /></li> <li><img src="none.jpg" alt="3" width="100" height="100" id="c_8" onclick="conce('c_8')" /></li> </ul> </div> <script type="text/javascript"> var card_c = 0; //数字が表示されているimgの数 var card_first; //altの数 var card_second; //altの数 var click_first; //開けた場所１ var click_second; //開けた場所2 function conce(aaa){ //クリックで無地に数字を表示 var imgId = document.getElementById(aaa);//クリックしたimgのid if(card_c==0){ //１枚目 imgId.src = imgId.alt+".jpg"; card_c++; card_first = imgId.alt; click_first=aaa; }else{//2枚目 imgId.src = imgId.alt+".jpg"; card_second = imgId.alt; click_second=aaa; if(card_first==card_second){ card_c=0; }else{ setTimeout("bunki()",500); card_c=0; } function bunki(){ document.getElementById(click_first).src="none.jpg"; document.getElementById(click_second).src="none.jpg"; } } } </script> </body> </html> /----------------------------------------------/ どこが間違っているのでしょうか。 よろしくお願いします。
- ベストアンサー
- JavaScript
