JavaScript初心者が神経衰弱を作成しているが、setTimeoutを使った動作がうまくいかない| OKWAVE

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を使って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> /-------------------------------------------------------------------------------/ よろしくお願いします。

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 - 月ごとに画像変化

文字サイズ変更のjavascriptが動かない

現在、サイトを文字サイズ変更できるようにトライしているのですが、javascriptは全くの初心者なのでよくわかりません。ページによって動かないので、何がいけないのかアドバイスお願いします！動くのは http://○○.jp/○○.html 動かないのは　http://○○.jp/○○/○○.html　のページです。以下の記述は動かない方に設定しているものです。 ************* javascript ************* function imgver(num){ var element =document.getElementById("fontSize"); var writeHtml = ''; if( num == 0){ writeHtml +='<li><a href="javascript:void(0)" onclick="font(\'16px\');imgver(0)"><img src="../common/l.png" width="25" height="26" border="0" /></a></li><li><a href="javascript:void(0)" onclick="font(\'12px\');imgver(1)"><img src="../common/m.png" width="25" height="26" border="0" /></a></li><li><a href="javascript:void(0)" onclick="font(\'9px\');imgver(2)"><img src="../common/s.png" width="25" height="26" border="0" /></a></li>'; } else{ writeHtml +='<li><a href="javascript:void(0)" onclick="font(\'16px\');imgver(0)"><img src="../common/l.png" width="25" height="26" border="0" /></a></li><li><a href="javascript:void(0)" onclick="font(\'12px\');imgver(1)"><img src="../common/m.png" width="25" height="26" border="0" /></a></li><li><a href="javascript:void(0)" onclick="font(\'9px\');imgver(2)"><img src="../common/s.png" width="25" height="26" border="0" /></a></li>'; } element.innerHTML = writeHtml; } ************* html ************* <ul id="fontSize"><li><a href="javascript:void(0)" onclick="font('16px');imgver(0)"><img src="../common/l.png" alt="大" width="25" height="26" border="0" /></a></li><li><a href="javascript:void(0)" onclick="font('12px');imgver(1)"><img src="../common/m.png" alt="中" width="25" height="26" border="0" /></a></li><li><a href="javascript:void(0)" onclick="font('9px');imgver(2)"><img src="../common/s.png" alt="小" width="25" height="26" border="0" /></a></li></ul> ******************************************** 画像は表示されるのですが、全く動きません。よろしくお願いします！

Javascriptで質問です。

以前こちらで質問をして retorofan さんに追加のscriptを詳しく教えていただき、実際の表示もほぼうまくいったのですが、選択ごとに表示位置が変わってしまってうまくいきません。inlineの部分をblockにしてだいぶ良くなったのですが、それでもまだ一定位置に出てくれません。どこを修正すれば一定位置に画像を出せるのでしょうか？ <form> <div class="pulldownset vegetable"> <select id="cate" class="subbox" > <option value="">年</option> <option value="ha">2023年</option> <option value="ne">2024年</option> </select> <select id="ha" class="subbox2"> <option value="">月</option> <option value="ha1">1月</option> <option value="ha2">2月</option> <option value="ha3">3月</option> </select> <select id="ne" class="subbox2"> <option value="">月を選択</option> <option value="ne1">1月</option> <option value="ne2">2月</option> <option value="ne3">3月</option> </select> </div> </form>  <div id="ha1" class="subbox3"><img src="2023−1.jpg" width="130" height="37" alt=""/></div>　 <div id="ha2" class="subbox3"><img src="2023−2.jpg" width="130" height="37" alt=""/></div> <div id="ha3" class="subbox3"><img src="2023−3.jpg" width="130" height="37" alt=""/></div>　 <div id="ne1" class="subbox3"><img src="2024−1.jpg" width="130" height="37" alt=""/></div>　　　 <div id="ne2" class="subbox3"><img src="2024−2.jpg" width="130" height="37" alt=""/></div>　　　 <div id="ne3" class="subbox3"><img src="2024−3.jpg" width="130" height="37" alt=""/></div>　　  <div id="ha1" class="subbox3"><img src="2023−1-2.jpg" width="130" height="37" alt=""/></div>　 <div id="ha2" class="subbox3"><img src="2023−2-2.jpg" width="130" height="37" alt=""/></div> <div id="ha3" class="subbox3"><img src="2023−3-2.jpg" width="130" height="37" alt=""/></div>　 <div id="ne1" class="subbox3"><img src="2024−1-2.jpg" width="130" height="37" alt=""/></div>　　　 <div id="ne2" class="subbox3"><img src="2024−2-2.jpg" width="130" height="37" alt=""/></div>　　　 <div id="ne3" class="subbox3"><img src="2024−3-2.jpg" width="130" height="37" alt=""/></div>　　  <div id="ha1" class="subbox3"><img src="2023−1-3.jpg" width="130" height="37" alt=""/></div>　 <div id="ha2" class="subbox3"><img src="2023−2-3.jpg" width="130" height="37" alt=""/></div> <div id="ha3" class="subbox3"><img src="2023−3-3.jpg" width="130" height="37" alt=""/></div>　 <div id="ne1" class="subbox3"><img src="2024−1-3.jpg" width="130" height="37" alt=""/></div>　　　 <div id="ne2" class="subbox3"><img src="2024−2-3.jpg" width="130" height="37" alt=""/></div>　　　 <div id="ne3" class="subbox3"><img src="2024−3-3.jpg" width="130" height="37" alt=""/></div>　　 <script> window.addEventListener('DOMContentLoaded', ()=>{ document.querySelectorAll(".subbox2,.subbox3").forEach(x=>{ x.style.display ="none"; }); document.querySelector("#cate").addEventListener('change',e=>{ document.querySelectorAll(".subbox2").forEach(x=>{ x.value=""; x.style.display =x.getAttribute("id")===e.target.value?"inline":"none"; }); document.querySelectorAll(".subbox3").forEach(x=>{ x.style.display ="none"; }); }); document.querySelectorAll(".subbox2").forEach(x=>{ x.addEventListener('change',e=>{ document.querySelectorAll(".subbox3").forEach(y=>{ y.style.display =y.getAttribute("id")===e.target.value?"inline":"none"; }); }); }); }); </script> <script> //------------------------------------------------------------------------------ // 初期画面の表示内容 //「年」「月」画像1（2023−1.jpg）、画像2（2023−1-2.jpg）、画像3（2023−1-3.jpg） //------------------------------------------------------------------------------ window.addEventListener('DOMContentLoaded', ()=>{ // 追加 2023-04-21 22:40 //---------------------------------------------------------- const cate = document.getElementById("cate"); const ha = document.getElementById("ha"); const subbox3 = document.querySelectorAll(".subbox3"); ha.style.display =""; cate.options[0].selected = true; ha.options[0].selected = true; [...subbox3].forEach(function(elem, index){ if (index % 6 == 0){ elem.style.display="inline-block"; //横並び //elem.style.display="block"; //縦並び } }); //---------------------------------------------------------- });

Javascriptで質問です。

度々すみません。以下のようにセレクトボックスを２段階、「年」「月」を選択後に画像を３つ出力するコードでほぼ出来上がっているのですが、初期に画像を出しておきたいので、表示としては「年」「月」画像1（2023−1.jpg）、画像2（2023−1-2.jpg）、画像3（2023−1-3.jpg）が初期画面で出るようにしたいのです。詳しい方がいらっしゃいましたら、教えていただければ嬉しいです。よろしくお願いいたします。 <form> <div class="pulldownset vegetable"> <select id="cate" class="subbox" > <option value="">年</option> <option value="ha">2023年</option> <option value="ne">2024年</option> </select> <select id="ha" class="subbox2"> <option value="">月</option> <option value="ha1">1月</option> <option value="ha2">2月</option> <option value="ha3">3月</option> </select> <select id="ne" class="subbox2"> <option value="">月を選択</option> <option value="ne1">1月</option> <option value="ne2">2月</option> <option value="ne3">3月</option> </select> </div> </form>  <div id="ha1" class="subbox3"><img src="2023−1.jpg" width="130" height="37" alt=""/></div>　 <div id="ha2" class="subbox3"><img src="2023−2.jpg" width="130" height="37" alt=""/></div> <div id="ha3" class="subbox3"><img src="2023−3.jpg" width="130" height="37" alt=""/></div>　 <div id="ne1" class="subbox3"><img src="2024−1.jpg" width="130" height="37" alt=""/></div>　　　 <div id="ne2" class="subbox3"><img src="2024−2.jpg" width="130" height="37" alt=""/></div>　　　 <div id="ne3" class="subbox3"><img src="2024−3.jpg" width="130" height="37" alt=""/></div>　　  <div id="ha1" class="subbox3"><img src="2023−1-2.jpg" width="130" height="37" alt=""/></div>　 <div id="ha2" class="subbox3"><img src="2023−2-2.jpg" width="130" height="37" alt=""/></div> <div id="ha3" class="subbox3"><img src="2023−3-2.jpg" width="130" height="37" alt=""/></div>　 <div id="ne1" class="subbox3"><img src="2024−1-2.jpg" width="130" height="37" alt=""/></div>　　　 <div id="ne2" class="subbox3"><img src="2024−2-2.jpg" width="130" height="37" alt=""/></div>　　　 <div id="ne3" class="subbox3"><img src="2024−3-2.jpg" width="130" height="37" alt=""/></div>　　  <div id="ha1" class="subbox3"><img src="2023−1-3.jpg" width="130" height="37" alt=""/></div>　 <div id="ha2" class="subbox3"><img src="2023−2-3.jpg" width="130" height="37" alt=""/></div> <div id="ha3" class="subbox3"><img src="2023−3-3.jpg" width="130" height="37" alt=""/></div>　 <div id="ne1" class="subbox3"><img src="2024−1-3.jpg" width="130" height="37" alt=""/></div>　　　 <div id="ne2" class="subbox3"><img src="2024−2-3.jpg" width="130" height="37" alt=""/></div>　　　 <div id="ne3" class="subbox3"><img src="2024−3-3.jpg" width="130" height="37" alt=""/></div>　　 <script> window.addEventListener('DOMContentLoaded', ()=>{ document.querySelectorAll(".subbox2,.subbox3").forEach(x=>{ x.style.display ="none"; }); document.querySelector("#cate").addEventListener('change',e=>{ document.querySelectorAll(".subbox2").forEach(x=>{ x.value=""; x.style.display =x.getAttribute("id")===e.target.value?"inline":"none"; }); document.querySelectorAll(".subbox3").forEach(x=>{ x.style.display ="none"; }); }); document.querySelectorAll(".subbox2").forEach(x=>{ x.addEventListener('change',e=>{ document.querySelectorAll(".subbox3").forEach(y=>{ y.style.display =y.getAttribute("id")===e.target.value?"inline":"none"; }); }); }); }); </script> <script> window.addEventListener('DOMContentLoaded', ()=>{ // 追加 2023-04-21 11:05 //---------------------------------------------------------- const cate = document.getElementById("cate"); const ha = document.getElementById("ha"); const subbox3 = document.querySelectorAll(".subbox3"); ha.style.display =""; cate.options[0].selected = true; ha.options[0].selected = true; let v = cate.options[1].text+"-"+ ha.options[1].text; [...subbox3].forEach(function(elem){ if (elem.textContent==v){elem.style.display="block"} }); //---------------------------------------------------------- }); </script>

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

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でも動くようにするにはどうしたら良いでしょうか？ご指導の程、宜しくお願いいたします。

画像のランダムチェンジとフェードイン効果

質問ですが、まず最初に失礼がありましたらお許し下さい。 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に関する質問です

ホームページをつくっていますJavaScript超初心者です。どなたか手助けをしていただけますでしょうか？やりたいことというのは、次の通りです。とあるページがありまして、次のような項目が並んでいます。 <li><a href="#" onClick="window.open('f.html?1,'newWin','width=850,height=650')">テキスト1</a></li> <li><a href="#" onClick="window.open('f.html?2,'newWin','width=850,height=650')">テキスト2</a></li> <li><a href="#" onClick="window.open('f.html?3,'newWin','width=850,height=650')">テキスト3</a></li> それぞれのテキストをクリックすると、新しいウィンドウが表示され、次のJavaScriptが起動します。 function fx(){ var num = location.search.substr(1,1); var the_id1 = "s" + num.toString(); var img = document.getElementById(the_id1).getElementsByTagName("img"); img[0].src = ""←このあたりが特に分かりません。 } 最後に新しいウィンドウページのhtmlを書いておきます。 <div id="s1"><img src="img/s1w.gif" name="s1img"/></div> <div id="s2"><img src="img/s2w.gif" name="s2img"/></div> <div id="s3"><img src="img/s3w.gif" name="s3img"/></div> 　このように始めのページの項目をクリックすると、javascript　fx　が起動してdiv s1 ～s3の画像を取得する（入れ替える）というようにしたいのです。つまり、最初のページのテキスト1をクリックすればdiv s1の画像を入れ替える、テキスト2をクリックでdiv s2の画像を、という具合にです。　 ←このあたりが分かりませんと書いたように、画像を別々に取得する方法が分かりません。どのように改良すればいいでしょうか？もしくは全く新しいものに変える必要があるでしょうか？分かる方、どなたか教えてください。よろしくお願いします。

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

はじめまして。現在、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> </div> <div id="photo"> <p><img src="image/catch_s1.jpg" width="800" height="280" /></p> </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; }

このコードは問題ないでしょうか。

javascriptを学んでいます。練習のために下記のコードを自分なりに試行錯誤して作りました。ちゃんと動くようになりましたが、自己流で修正を繰り返したので正しくない部分があると思います。また、imgタグのそれぞれにidを付けて区別しています。 idを付けずにやる方が効率的で良いと思うのですが、実現することができず、仕方なくidを全て付けて妥協しました。改善点をご指摘して頂けると嬉しいです。ご教示をお願いいたします。 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>画像の切替とおすすめの組合せ</title> <style type="text/css"> #kkkkkk { width: 300px; position: relative; } #kkkkkk img { position: absolute; top:0; left: 0; } </style> <script type="text/javascript"> function aaa(evt){ var t = evt.target || evt.srcElement; var tid = t.id; var tag = t.parentNode.getElementsByTagName("img"); var kkkkkk = document.getElementById('kkkkkk'); if(t.nodeName != "IMG") return; for(i=0; node=kkkkkk.children[i++];){ if(node.tagName != "IMG") continue; if(node.id == tid.replace(/_|[0-4]/g,"")){ node.src = t.id+".jpg"; } } } function rrrrr(a,b,c){ var ta = document.getElementById('testA'); var tb = document.getElementById('testB'); var tc = document.getElementById('testC'); ta.src = "testA_"+a+".jpg"; tb.src = "testB_"+b+".jpg"; tc.src = "testC_"+c+".jpg"; } </script> </head> <body> <div> <img id="testA_0" src="testA_0.jpg" width="30" alt="" onclick="aaa(event);" /> <img id="testA_1" src="testA_1.jpg" width="30" alt="" onclick="aaa(event);" /> <img id="testA_2" src="testA_2.jpg" width="30" alt="" onclick="aaa(event);" /> <img id="testA_3" src="testA_3.jpg" width="30" alt="" onclick="aaa(event);" /> <br /> <img id="testB_0" src="testB_0.jpg" width="30" alt="" onclick="aaa(event);" /> <img id="testB_1" src="testB_1.jpg" width="30" alt="" onclick="aaa(event);" /> <br /> <img id="testC_0" src="testC_0.jpg" width="30" alt="" onclick="aaa(event);" /> <img id="testC_1" src="testC_1.jpg" width="30" alt="" onclick="aaa(event);" /> <img id="testC_2" src="testC_2.jpg" width="30" alt="" onclick="aaa(event);" /> </div> <form> <input type="button" value="おすすめ画像の組み合わせ　その１" onclick="rrrrr(0,0,2)" /><br /> <input type="button" value="おすすめ画像の組み合わせ　その２" onclick="rrrrr(3,1,0)" /><br /> <input type="button" value="おすすめ画像の組み合わせ　その３" onclick="rrrrr(2,1,1)" /><br /> </form> <div id="kkkkkk"> <img width="10" src="0.jpg" style="z-index:2;" id="testA" name="testA" alt="" /> <img width="20" src="1.jpg" style="z-index:1;" id="testB" name="testB" alt="" /> <img width="30" src="2.jpg" style="z-index:0;" id="testC" name="testC" alt="" /> </div> </body> </html>

<a>の中のimgの一部分だけを見せたい

imgの拡大切り取りを以下の様にしました。 <div style="position: relative; width: 240; height: 240; overflow: hidden;"> <img src="imgA.jpg" style="width: 3600; height: 4800; margin-left: -2936; margin-top: -3272;"> </div> この要領で、<a>の中に入れるjpgを切り取り拡大した物にしたいです。しかし、<a>の中に<div>を入れるとIEは動作が変になります。どうしたらよいでしょうか？具体的には以下のようなソースでして、 <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 ul li a:hover{ position: static; } #itmImg a:hover span{ display:block; position:absolute; top:0; left:0; cursor: default; } #itmImg ul { margin: 0; padding: 0; } #itmImg li{ float:left; list-style:none; } </style> </head> <body> <div id="itmImg"> <div style="position: relative; width: 240; height: 240; overflow: hidden;"><img src="imgA.jpg" style="width: 3600; height: 4800; margin-left: -2936; margin-top: -3272;"></div> <ul> <li><a href="javascript:void(0);"><img src="imgB.jpg" width="80" height="80" alt=""><span><img src="imgB.jpg" width="240" height="240" alt=""></span></a></li> <li><a href="javascript:void(0);"><img src="imgC.jpg" width="80" height="80" alt=""><span><img src="imgC.jpg" width="240" height="240" alt=""></span></a></li> <li><a href="javascript:void(0);"><img src="imgD.jpg" width="80" height="80" alt=""><span><img src="imgD.jpg" width="240" height="240" alt=""></span></a></li> </ul> </div> </body> </html> ３つの<li>の中の<a>の中のimgを拡大縮小したいのです。以上、宜しくお願いいたします。

ＣＳＳレイアウトの配置ずれについて

本を見ながらＨＴＭＬとＣＳＳを作成したのですが、どのブラウザで見てもclass指定した"slideItems"の位置が右にズレてしまいます。解決方法わかる方、教えてください。以下、htmlとcssです。 html↓ <body> <div id="newBook"> <div class="item"> <ul id="slideItems"> <li><a href="#"/><img src="img/IMG_0162.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム1</h4> <p>コメント1</p> </li> <li><a href="#"/><img src="img/IMG_0135.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム2</h4> <p>コメント2</p> </li> <li><a href="#"/><img src="img/IMG_0164.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム3</h4> <p>コメント3</p> </li> <li><a href="#"/><img src="img/IMG_0140.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム4</h4> <p>コメント1</p> </li> <li><a href="#"/><img src="img/IMG_0171.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム5</h4> <p>コメント1</p> </li>  <li><a href="#"/><img src="img/IMG_0162.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム1</h4> <p>コメント1</p> </li> <li><a href="#"/><img src="img/IMG_0135.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム2</h4> <p>コメント2</p> </li> <li><a href="#"/><img src="img/IMG_0164.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム3</h4> <p>コメント3</p> </li> <li><a href="#"/><img src="img/IMG_0140.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム4</h4> <p>コメント1</p> </li> <li><a href="#"/><img src="img/IMG_0171.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム5</h4> <p>コメント1</p> </li>  <li><a href="#"/><img src="img/IMG_0162.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム1</h4> <p>コメント1</p> </li> <li><a href="#"/><img src="img/IMG_0135.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム2</h4> <p>コメント2</p> </li> <li><a href="#"/><img src="img/IMG_0164.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム3</h4> <p>コメント3</p> </li> <li><a href="#"/><img src="img/IMG_0140.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム4</h4> <p>コメント1</p> </li> <li><a href="#"/><img src="img/IMG_0171.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム5</h4> <p>コメント1</p> </li> </ul> </div> <div class="leftBtn"> <a href="javascript:startmove('left');"><img src="img/prev.gif" alt="左へ" width="25" height"25" border="0" /></a></div> <div class="rightBtn"> <a href="javascript:startmove('right');"><img src="img/prev_r.gif" alt="左へ" width="25" height"25" border="0" /></a> </div> </div> </body> css↓ #newBook { margin: 30px; position: relative; } .item { height: 115px; width: 500px; padding: 10px 0px; overflow: hidden; position: absolute; left: 40px; top: 0px; } .leftBtn,.rightBtn { text-align: left; width: 40px; position: absolute; top: 0px; } .leftBtn { text-align: left; left: 0px; } .rightBtn { text-align: right; left: 540px; } .item ul { width: 1500px; position: absolute; left: 0px; top: 0px; } .item li { background-color: #999999; height: 100px; width: 100px; list-style-type: none; padding: 10px 0px 5px; float: left; text-align: center; } #slideItems { position: absolute; left: 0px; top: 0px; }

CSS画像・文字混在縦メニュー

画像と文字使った縦メニューを作成しています。レイアウトがズレたり隙間ができたりでどうしてもうまくいきません。どうぞお知恵をお貸しください。よろしくお願いいたします。【CSS】 @charset "utf-8"; /* CSS Document */ /* ナビ設定 */ #navi1 { margin: 0px; padding: 0px; position: relative; right: 10px; width: 200px; float: right; } #navi1 li { margin: 0px; padding: 0px; position: relative; width: 200px; float: right; } #navi1 #navi1_title { width: 200px; position: relative; } .sub_menu { width: 190px; position: relative; float: right; left: 5px; } .sub_menu ul { list-style: none; border-top: 1px solid #CCCCCC; width: 190px; position: relative; } .sub_menu li { border-bottom: 1px dashed #CCCCCC; background: #F3F0EA url(img/xx.jpg) no-repeat left center; width: 190px; } .sub_menu a { display: block; /*Windows IE対策のため、ボックス幅を指定 */ width /**/: 180px; /*Window IE5用の値を指定 */ color: #666; text-decoration: none; font-size: 11px; padding-top: 4px; padding-right: 4px; padding-bottom: 4px; padding-left: 10px; background-color: #F3F0EA; background-image: url(img/xx.jpg); background-repeat: no-repeat; background-position: left center; left: 3px; } .sub_menu a:hover { color: #666; width: 180px; background-color: #E4DECF; background-image: url(img/xx.jpg); background-repeat: no-repeat; background-position: left center; } 【HTML】 <div id="navi1"> <h2><img src="img/menu1_title.png" width="200" height="50" alt="qqq" /></h2> <ul> <li><img src="img/menu_y.png" width="200" height="32" alt="zzz" /></li> </ul> <ul class="sub_menu"> <li><a href="#">yyy</a></li> <li><a href="#">yyy</a></li> <li><a href="#">yyy</a></li> <li><a href="#">yyy</a></li> <li><a href="#">yyy</a></li> <li><a href="#">yyy</a></li> </ul> <ul> <li><a href="#"><img src="img/menu_a.jpg" width="200" height="32" alt="xxx" /></a></li> <li><a href="#"><img src="img/menu_b.jpg" width="200" height="32" alt=xxx" /></a></li> <li><a href="#"><img src="img/menu_c.jpg" width="200" height="32" alt="xxx" /></a></li> <li><a href="#"><img src="img/menu_d.jpg" width="200" height="32" alt="xxx" /></a></li> <li><a href="#"><img src="img/menu_e.jpg" width="200" height="32" alt="xxx" /></a></li> <li><a href="#"><img src="img/menu_f.jpg" width="200" height="32" alt="xxx" /></a></li> <li><a href="#"><img src="img/menu_g.jpg" width="200" height="32" alt="xxx" /></a></li> <li><a href="#"><img src="img/menu_h.jpg" width="200" height="32" alt="xxx" /></a></li> <li><a href="#"><img src="img/menu_i.jpg" width="200" height="32" alt="xxx" /></a></li> <li><a href="#"><img src="img/menu_j.jpg" width="200" height="32" alt="xxx" /></a></li> <li><a href="#"><img src="img/menu_k.jpg" width="200" height="32" alt="xxx" /></a></li> </ul> </div>

JavaScriptの画像入れ替えについて

下記のようなものでサムネイルをクリックすると大きな画面に表示される、みたいなものを作っています。しかし職場のIE6でクリックすると表示されなく大きな画像が消えてしまいます。ちなみに自宅のIE６で確認したときは大丈夫だったのですが、、、またサムネイル画像のアンカー部分のjavasscript:void(0);を消すと表示されるようになるのですが、やはりここのvoid0には問題があるのでしょうか？？またサーバーにUPする前オンライン上ではなくPCで確認している時はちゃんと表示できていたました。あまり詳しくないものでどなたかよろしくお願い致します。 <script type="text/javascript">  </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>

画像を右下から詰めて表示したい

画像を、テーブルを使わずに右下から詰めて表示したいのですが方法がわかりません。少し歪ですが、下のようにしたいのです。中抜きの四角（□）の方向に随時増えていく予定です。　　　　　　←□■■ ■■■■■■■■ ■■■■■■■■ ■■■■■■■■　←ここからスタート htmlとcssは次のように書いてみたのですが、そうすると上から詰めているようなかんじになってしまいました。あまり詳しくないのですが、そもそもリストで表示しようとするのがいけないのでしょうか…？どなたかよろしくお願いいたします。 <ul> <li><img src="icon.png" width="15px" height="13px" alt=""></li> <li><img src="icon.png" width="15px" height="13px" alt=""></li> <li><img src="icon.png" width="15px" height="13px" alt=""></li> <li><img src="icon.png" width="15px" height="13px" alt=""></li> <li><img src="icon.png" width="15px" height="13px" alt=""></li> </ul> ul{ list-style:none; text-align:center; } li{ width:21px; height:17px; float:right; }

JavaScript初心者が神経衰弱を作成しているが、setTimeoutを使った動作がうまくいかない

javascript setTimeout

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

お礼 2013/11/06 16:17

補足 2013/11/06 12:21

関連するQ&A

javascript 神経衰弱

javascript　神経衰弱　表に返す時間

神経衰弱　順番に裏返し

AIは使う人の年齢や市場にも影響する？人工知能の可能性

javascript src書き換え

JavaScript - 月ごとに画像変化

文字サイズ変更のjavascriptが動かない

Javascriptで質問です。

Javascriptで質問です。

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

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

画像のランダムチェンジとフェードイン効果

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

JavaScriptに関する質問です

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

このコードは問題ないでしょうか。

<a>の中のimgの一部分だけを見せたい

ＣＳＳレイアウトの配置ずれについて

CSS画像・文字混在縦メニュー

JavaScriptの画像入れ替えについて

画像を右下から詰めて表示したい

注目のQ&A

カテゴリ
一覧

専門家に質問してみよう
専門家登録

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

JavaScript初心者が神経衰弱を作成しているが、setTimeoutを使った動作がうまくいかない

javascript setTimeout

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

お礼 2013/11/06 16:17

補足 2013/11/06 12:21

関連するQ&A

javascript 神経衰弱

javascript 神経衰弱 表に返す時間

神経衰弱 順番に裏返し

AIは使う人の年齢や市場にも影響する？人工知能の可能性

javascript src書き換え

JavaScript - 月ごとに画像変化

文字サイズ変更のjavascriptが動かない

Javascriptで質問です。

Javascriptで質問です。

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

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

画像のランダムチェンジとフェードイン効果

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

JavaScriptに関する質問です

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

このコードは問題ないでしょうか。

<a>の中のimgの一部分だけを見せたい

ＣＳＳレイアウトの配置ずれについて

CSS画像・文字混在縦メニュー

JavaScriptの画像入れ替えについて

画像を右下から詰めて表示したい

注目のQ&A

カテゴリ 一覧

専門家に質問してみよう 専門家登録

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

javascript　神経衰弱　表に返す時間

神経衰弱　順番に裏返し

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

カテゴリ
一覧

専門家に質問してみよう
専門家登録