神経衰弱　順番に裏返し

前へ 次へ
このQ&Aのポイント
  • javascript初心者が練習のために神経衰弱を作っている際に、カードを順番に裏返す要素の書き方がわからない。
  • setTimeoutを使用して0.5秒ごとにカードを返すコードを書いているが、うまくいかない。
  • 質問者はどのようにすればいいかわからないので、助言を求めている。
回答を見る
  • ベストアンサー

神経衰弱　順番に裏返し

javascript初心者ですが、練習のために神経衰弱を作っています。 簡単な骨組みはでき、要素を加えている最中なのですが、今足そうと思っている要素の書き方がわかりません。 足そうと思っているのは、 「全てカードをそろえたあと、順番にカードをひっくり返して、元に戻す」 という要素です。 setTimeoutを使って0.5秒ごとにカードを返すというコードを書いているつもりなのですが、うまくいきません。どうすればいいのでしょうか。 /-------------------------------------------------------------------------/ <!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; //１枚目 var card_first; //altの数 var card_second; //altの数 var click_first; //開けた場所１ var click_second; //開けた場所2 var fullOpen = 0; //ワンペアで1追加　4でクリア function conce(aaa){ //クリックで無地に数字を表示 var imgId = document.getElementById(aaa);//クリックしたimgのid switch(card_c){ case 0: imgId.src = imgId.alt+".jpg"; card_c++; card_first = imgId.alt; click_first=aaa; break; case 1: imgId.src = imgId.alt+".jpg"; card_second = imgId.alt; click_second=aaa; card_c++; if(card_first==card_second){//揃ったら card_c=0; fullOpen++; }else{//揃わなかったら function bunki(){ document.getElementById(click_first).src="none.jpg"; document.getElementById(click_second).src="none.jpg"; card_c=0;//setTimeoutのあとだと待つ必要があるためココ } setTimeout(bunki,500);//0.5秒後閉じる } break; default: break; }//switch //全部そろえた時のアクション if(fullOpen==4){ alert("complete!"); //0.5秒ごとに裏返す 8回繰り返す for(var j=0;j<8;j++){ function resetAll(){ var i = 0; if(i<8){ document.getElementById('c_'+(i+1)).src="none.jpg"; i++; } }//resetAll setTimeout(resetAll,500); }//for fullOpen=0; }//if(fullOpen==4) }//function conce(aaa) </script> </body> </html> /-------------------------------------------------------------------------------/ よろしくお願いします。

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

  • ベストアンサー
  • Ogre7077
  • ベストアンサー率65% (170/258)
回答No.3

No.1 ですが、例示内容が少々分かりづらい内容だったので修正します。 // 最初のアニメの番号 var index = 0; (function(){ // index番目のアニメ 処理(index); // 次のアニメの番号に更新 index = index + 1; // 次のアニメの番号が条件を満たすなら、Nミリ秒後に再実行 if(条件(index)) { window.setTimeout(arguments.callee, N); } })();

komado45oji4768
質問者

お礼

お返事ありがとうございます。 丁寧にご説明いただきありがとうございます。 どうやらindex++;が抜けいていたらしく、ちゃんと繰り返していなかったようです。 お手数をおかけしました。 ありがとうございました。

その他の回答 (2)

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.2

よこからですが・・・ No1の補足を斜めに見ただけなので、ちゃんと確認していませんが、 indexをインクリメントしていないので、index=0のまま0.5秒おきにずっと繰り返しているのではないでしょうか？

komado45oji4768
質問者

お礼

お返事ありがとうございます。 おっしゃるとおりでした。 index++;を追加したらうまくいってくれました。 ありがとうございます。

  • Ogre7077
  • ベストアンサー率65% (170/258)
回答No.1

一定間隔のアニメをやる際に、私が常用するパターンです。 var index = 0; (function(){ 処理(index++); if (条件(index)) window.setTimeout(arguments.callee, N); })(); 少々ややこしいので解説すると、 1. 使い捨ての関数を作って即実行 2. 関数の最後で、条件に合うなら自分自身をN秒後に再実行 3. 条件に合うかぎり、再実行を繰り返す。 4. 条件に合わなくなったら今後は実行されない。関数も(たぶん)廃棄される。 使い捨ての関数には名前がないので arguments.callee を使って自分自身を取得しています。

komado45oji4768
質問者

補足

お返事ありがとうございます。 すいません、まだ解決出来ていないのでよかったらお返事いただけるとうれしいです。 教えていただいたコードを適応したのですが、うまく動いてくれません。 firebugで見たところエラーはないようなので、どこか間違っているとは思うのですが、どこかおかしなところはあるでしょうか。 <script type="text/javascript"> var card_c = 0; //１枚目 var card_first; //altの数 var card_second; //altの数 var click_first; //開けた場所１ var click_second; //開けた場所2 var fullOpen = 0; //ワンペアで1追加　4でクリア function conce(aaa){ //クリックで無地に数字を表示 var imgId = document.getElementById(aaa);//クリックしたimgのid //imgがnone.jpg以外なら操作しない。 switch(card_c){ case 0: imgId.src = imgId.alt+".jpg"; card_c++; card_first = imgId.alt; click_first=aaa; break; case 1: imgId.src = imgId.alt+".jpg"; card_second = imgId.alt; click_second=aaa; card_c++; if(card_first==card_second){//揃ったら card_c=0; fullOpen++; }else{//揃わなかったら function bunki(){ document.getElementById(click_first).src="none.jpg"; document.getElementById(click_second).src="none.jpg"; card_c=0;//setTimeoutのあとだと待つ必要があるためココ } setTimeout(bunki,500);//0.5秒後閉じる } break; default: break; }//switch //全部そろえた時のアクション if(fullOpen==4){ alert("complete!"); var index = 0; (function(){ document.getElementById('c_'+(index+1)).src="none.jpg"; if(index<9)window.setTimeout(arguments.callee,500); })(); fullOpen=0; }//if(fullOpen==4) }//function conce(aaa) </script> よろしくお願いします。

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

関連するQ&A

  • javascript 神経衰弱

    javascriptを勉強し始めて間もない初心者です。 練習として神経衰弱を作ろうとしているのですが、うまく動いてくれません。 どこが間違っているのでしょうか。 /---------------------------------------------------------/ <!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{ document.getElementById(click_first).src="none.jpg"; document.getElementById(click_second).src="none.jpg"; card_c=0; } } } </script> </body> </html> /---------------------------------------------------------/ 流れとしては、 画像をクリック →１回目は数字画像表示 →2回目は1回目と同じ数字がそろえばそのまま、違えば数字画像を元に戻す。 というようにしたいです。 よろしくお願いします。

  • javascript　神経衰弱　表に返す時間

    javascript初心者です。 練習で神経衰弱を作っていますが、わからないところがあるので質問させていただきます。 以下のような神経衰弱のスクリプトを書き、一応単純な骨組みは出来て、機能を追加しているところです。 今追加しようとしているのは、 「２枚のカードを表にしたときの表示時間中（０．５秒）に３枚目をクリックできないようにする」 です。 連打してクリックすると、２枚の判定をしている最中に３枚目をクリックしてしまい、スクリプトがおかしくなります。 これを解消したいのですが、うまい方法が思いつきません。 アドバイスいただければと思います。 /--------------------------------------------------------------/ <!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; //１枚目 var card_first; //altの数 var card_second; //altの数 var click_first; //開けた場所１ var click_second; //開けた場所2 var fullOpen = 0; //ワンペアで1追加　4でクリア 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; fullOpen++; }else{//揃わなかったら function bunki(){ document.getElementById(click_first).src="none.jpg"; document.getElementById(click_second).src="none.jpg"; } setTimeout(bunki,500);//0.5秒後閉じる card_c=0; } } //全部そろえた時のアクション if(fullOpen==4){ alert("complete!"); for(i=0;i<8;i++){ document.getElementById('c_'+(i+1)).src="none.jpg" } fullOpen=0; } } </script> </body> </html> /-------------------------------------------------------------/ よろしくおねがいします。

  • 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 src書き換え

    javascript 初心者なのですが、質問させてください。 クリックした画像を3.jpgに書き換えるというコードを書いたのですが、うまく動きません。 どこが違間違っているのでしょうか。 /-------------------------------------------------------------/ <!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="100px" height="100px" id="c_1" onclick="conce(c_1)" /></li> <li><img src="none.jpg" alt="1" width="100px" height="100px" id="c_2" onclick="conce(c_2)" /></li> <li><img src="none.jpg" alt="4" width="100px" height="100px" id="c_3" onclick="conce(c_3)" /></li> <li><img src="none.jpg" alt="4" width="100px" height="100px" id="c_4" onclick="conce(c_4)" /></li> <li><img src="none_2.jpg" alt="" width="100px" height="100px" id="c_5"/></li> <li><img src="none.jpg" alt="2" width="100px" height="100px" id="c_6" onclick="conce(c_5)" /></li> <li><img src="none.jpg" alt="1" width="100px" height="100px" id="c_7" onclick="conce(c_6)" /></li> <li><img src="none.jpg" alt="2" width="100px" height="100px" id="c_8" onclick="conce(c_7)" /></li> <li><img src="none.jpg" alt="3" width="100px" height="100px" id="c_9" onclick="conce(c_8)" /></li> </ul> </div> <script type="text/javascript"> function conce(aaa){ document.getElementById("aaa").src = "3.jpg"; } </script> </body> </html> /-----------------------------------------------------------------------/ よろしくお願いします。

  • キーエンス社のトップコンテンツのような動的なコンテンツのスクリプト

    javaScript初心者です。どうぞよろしくお願いします。 http://www.keyence.co.jp/ このサイトのトップの様なコンテンツを作りたいです。 1：一つ一つの中身はflashで 2:時間が立てば次の項目に自動スクロール 最低限上記を必要としたいです。 javaScriptをしっかり扱えるようになりたいので 解説等もいれていただけたら幸いです。 図々しくて恐縮ですがどなたかよろしくお願い致します。 html----------------------------------------------- <body> <div id="rollover"> <p><img src="rollover/01.jpg" id="rollover_view" alt="image1" width="415" height="295"></a></p> <ul id="thumb"> <li><a href="#"><img src="rollover/01_thumb.jpg" alt="thumb1" width="150" height="45"></li> <li><a href="#"><img src="rollover/02_thumb.jpg" alt="thumb2" width="150" height="45"></a></li> <li><a href="#"><img src="rollover/03_thumb.jpg" alt="thumb3" width="150" height="45"></a></li> <li><a href="#"><img src="rollover/04_thumb.jpg" alt="thumb4" width="150" height="45"></a></li> <li><a href="#"><img src="rollover/05_thumb.jpg" alt="thumb5" width="150" height="45"></a></li> <li><a href="#"><img src="rollover/06_thumb.jpg" alt="thumb6" width="150" height="45"></a></li> </ul> </div> </body> </html> css--------------------------------------------- <style type="text/css"> /* ロールオーバー */ ul,li{ padding:0;margin:0; } div#rollover { height:295px; width:580px; } div#rollover p { float:left; margin:0; } div#rollover ul { float:right; width:150px; list-style:none; } div#rollover li { height:50px; } div#rollover a img { border:0; } </style> javaScript------------------------------------------ <script type="text/javascript"> //<![CDATA[ window.onload =function(){ var myImg = document.getElementById("thumb").getElementsByTagName("img"); var regrep = "_thumb"; var newimg = new Array(); for (var i = 0; i <myImg.length; i++) { newimg[i] = new Image(); newimg[i].src = myImg[i].src; myImg[i].onmouseover =function() { var href = this.src.replace(regrep,""); document.getElementById('rollover_view').src=href; } } } //]]> これは拾ったフリーのもののソースなのですが これを改造したほうがやりやすいようでしたら その旨をご教授いただきたいです。 どうぞよろしくお願い致します。

  • IE６だと動かない　マウスオーバーで画像の入れ替え

    以下のように書いてみました。 IE6以外では期待した動作が得られます。 ※imgファイルは適当です。実際に動かす場合は、適当に直して下さい。 <html> <head> <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/> <meta http-equiv='Content-Style-Type' content='text/css'> <style> img{ border: 0px; } #itmImg{ width: 240px; float: left; position: relative; } #itmImg img{ display:block; } #itmImg a span{ display: none; } #itmImg a:hover span{ display:block; position:absolute; top:0; left:0; } #itmImg ul { margin: 0; padding: 0; } #itmImg li{ float:left; list-style:none; } </style> </head> <body> <div id="itmImg"> <img src="hoge1.jpg" width="240" height="240" alt=""> <ul> <li> <a href="javascript:void(0);"> <img src="hoge2.jpg" width="80" height="80" alt=""> <span><img src="hoge2.jpg" width="240" height="240" alt=""></span> </a> </li> <li> <a href="javascript:void(0);"> <img src="hoge3.jpg" width="80" height="80" alt=""> <span><img src="hoge3.jpg" width="240" height="240" alt=""></span> </a> </li> <li> <a href="javascript:void(0);"> <img src="hoge4.jpg" width="80" height="80" alt=""> <span><img src="hoge4.jpg" width="240" height="240" alt=""></span> </a> </li> </ul> </div> </body> </html> IE6でも動くようにするにはどうしたら良いでしょうか？ ご指導の程、宜しくお願いいたします。

    • 締切済み
    • CSS
  • 画像のランダムチェンジとフェードイン効果

    質問ですが、まず最初に失礼がありましたらお許し下さい。 ​http://oshiete1.goo.ne.jp/qa3495988.html​　での質問に関連していると思うので、例を引用させて頂きます。 横590px縦300のメイン画像があり、その横に横180px縦50pxの画像を６個にしての設置を行います。横の180px縦50px画像をロールオーバーにし、更にその画像にマウスを乗せた時に横590px縦300pxのメイン画像も同時に変えたい・・ ここまでは回答で納得したのですが、メイン画像を一定時間でランダムチェンジさせる事とメイン画像の変化時にフェードイン効果を与える事の２点に挌闘しています。過去の質問ログを全部調べましたが、ないものですね。 <html> <head> <title></title> <style type="text/css"> img{border:1px solid red;} #box0 { width:770px; height:300px; position:relative; } #box mainview{ position:absolute; top:0;left:0; } #box0 ul{ position:absolute; top:0;left:590px; list-style-type:none; margin:0; padding:0; } #box0 li{ margin:0; padding:0; } #box0 li img{ vertical-align:top; } </style> <script type="text/javascript"> function sample(obj,mode){ var images = obj.getElementsByTagName('img'); images[0].style.display = (mode)?'none':'inline'; images[1].style.display = (mode)?'inline':'none'; var idNo = images[0].id.match(/(\d)/); for(var x=document.getElementById('mainview').firstChild; x;x=x.nextSibling){ if(x.id){ if(!mode && x.id.match(/0/) || mode && x.id.match(idNo[1])) x.style.display = 'inline'; else x.style.display = 'none'; } } } </script> </head> <body> <div id="box0"> <span id="mainview"> <img src="xxx0" width="590" height="180" alt="xxx0" id="xxx0"> <img src="xxx1" width="590" height="180" alt="xxx1" id="xxx1" style="display:none;"> <img src="xxx2" width="590" height="180" alt="xxx2" id="xxx2" style="display:none;"> <img src="xxx3" width="590" height="180" alt="xxx3" id="xxx3" style="display:none;"> <img src="xxx4" width="590" height="180" alt="xxx4" id="xxx4" style="display:none;"> <img src="xxx5" width="590" height="180" alt="xxx5" id="xxx5" style="display:none;"> <img src="xxx6" width="590" height="180" alt="xxx6" id="xxx6" style="display:none;"> </span> <ul> <li onmouseover="sample(this,true)" onmouseout="sample(this,false)"> <a href=""><img src="yyy1" width="180" height="50" alt="yyy1" id="yyy1"><img src="zzz1" width="180" height="50" alt="zzz1" id="zzz1" style="display:none"></a></li> <li onmouseover="sample(this,true)" onmouseout="sample(this,false)"> <a href=""><img src="yyy2" width="180" height="50" alt="yyy2" id="yyy2"><img src="zzz2" width="180" height="50" alt="zzz2" id="zzz2" style="display:none"></a></li> <li onmouseover="sample(this,true)" onmouseout="sample(this,false)"> <a href=""><img src="yyy3" width="180" height="50" alt="yyy3" id="yyy3"><img src="zzz3" width="180" height="50" alt="zzz3" id="zzz3" style="display:none"></a></li> <li onmouseover="sample(this,true)" onmouseout="sample(this,false)"> <a href=""><img src="yyy4" width="180" height="50" alt="yyy4" id="yyy4"><img src="zzz4" width="180" height="50" alt="zzz4" id="zzz4" style="display:none"></a></li> <li onmouseover="sample(this,true)" onmouseout="sample(this,false)"> <a href=""><img src="yyy5" width="180" height="50" alt="yyy5" id="yyy5"><img src="zzz5" width="180" height="50" alt="zzz5" id="zzz5" style="display:none"></a></li> <li onmouseover="sample(this,true)" onmouseout="sample(this,false)"> <a href=""><img src="yyy6" width="180" height="50" alt="yyy6" id="yyy6"><img src="zzz6" width="180" height="50" alt="zzz6" id="zzz6" style="display:none"></a></li> </ul> </div> </body> </html> の中に何を追加すれば・・・ ご教授の程よろしくお願いします。

  • Javaスクリプトで要素の表示・非表示の制御

    すみません。大変困っています。どなたかお分かりになられます方がいらっしゃいましたら、どうかご享受いただけませんでしょうか？ javascriptの記述方法についてとなります。 制御したいソースコードは下記の通りです。 <ul id="img_box"> <li><img src="../images/p1.jpg" width="100" height="50" /></li> <li><img src="../images/p2.jpg" width="100" height="50" /></li> <li><img src="../images/no.jpg" width="100" height="50" /></li> </ul> 上記のソースコードの表示・非表示ですが、imgタグの中のファイル名がno.jpgだった場合のみに<li>から</li>をdisplayをnoneとして出力したいです。 javascript適用後のソースコードは下記になるようにしたいのですがご享受いただけませんでしょうか？ <ul id="img_box"> <li><img src="../images/p1.jpg" width="100" height="50" /></li> <li><img src="../images/p2.jpg" width="100" height="50" /></li> </ul> お手数をおかけいたしますが、何卒よろしくお願い致します。

  • 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にこだわらず、月ごとに画像が変化できれば何でもいいです。

  • ホームページのメニューと写真の間に、すき間があく。

    はじめまして。 現在、webデザインの勉強のために架空のサイトを作っています。 そこで、 写真にあるようにメニューバーと その下の写真との間にすき間ができてしまいます。 IE８では、問題ありません。 firefox5,choromeでトラブルがあります。 調べて メニューと、下の写真のmarginとpaddingを0にしたり、 vertical-alignを指定してみたりしたのですが、 変わりませんでした。 下記にそのhtmlとcssを載せていますので、 ご指摘お願いします。 ※dream weaver cs5で作りました。 =========================================== html <div id="menu"> <ul> <li><img src="image/btn_01_s1.jpg" width="160" height="50" alt="ホーム" /></li> <li><img src="image/btn_02_s1.jpg" width="160" height="50" alt="事業内容" /></li> <li><img src="image/btn_03_s1.jpg" width="160" height="50" alt="実績と強み" /></li> <li><img src="image/btn_04_s1.jpg" width="160" height="50" alt="資料請求" /></li> <li><img src="image/btn_05_s1.jpg" width="160" height="50" alt="会社概要" /></a></li> </ul> <!-- / #menu --></div> <div id="photo"> <p><img src="image/catch_s1.jpg" width="800" height="280" /></p> <!-- / #photo --></div> ============================================= css /*メニューバー*/ #menu { width: 800px; height: 50px; margin: 0px; padding: 0px; } #menu ul li { float: left; border-style: none; vertical-align: text-bottom; } /*写真*/ #photo { clear: both; height: 280px; width: 800px; margin: 0px; padding: 0px; }

    • ベストアンサー
    • HTML

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する