JavaScript src書き換え -クリックした画像を3.jpgに書き-

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 神経衰弱

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

CSSの左横に隙間ができてしまいます。

画像の左横に謎の隙間(8mmほど)ができて埋まりません。そのため、4枚収めたい画像のうち、最後の1枚が改行されてしまっています。 padding や vartical-align、text-alignなど試してみましたが、ダメでした。とても困っています、どなたかご教示くださいますようお願いいたします。 << CSS >> #header { width:940px; height:59px; margin: 0 0 20px 0; } #logo { width:300px; height:59px; float:left; margin: 0 20px 0 0; } #menu { width:620px; height: 59px; padding: 0; margin: 0; float:right; } #menu img { padding-top:8px; border:none; } #menu ul { margin:0; } #menu ul li { margin: 0px; padding: 0px; list-style-type: none; display:inline; float:left; } << HTML >> <div id="header"> <div id="logo"> <img src="img/logo.gif" width="298" height="59" alt="ロゴ"> </div> <div id="menu"> <ul> <li><img src="img/btn_A.gif" width="194" height="51"></li> <li><img src="img/btn_B.gif" width="140" height="51"></li> <li><img src="img/btn_C.gif" width="149" height="51"></li> <li><img src="img/btn_D.gif" width="137" height="51"></li> </ul> </div> </div>

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

はじめまして。現在、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; }

FireFoxで確認するとliがずれます

webページを作成していてリスト部分が下にずれてしまうのに困っています。添付図のようにIEで見るとちゃんと置きたい位置に収まってくれるのですが、 firefoxでは収まってくれません。ご教授頂けたら幸いです。タグ <div id="header"> <h1><a href="index.html"><img src="images/buyoon_syoukai_web_site.jpg" alt="ブヨーン商会WEBSITE" width="180" height="50" /></a></h1> <div id="gNavi"> <ul> <li><a href="information.html"><img src="images/information.jpg" alt="information" width="120" height="50" /></a></li> <li><a href="profile.html"><img src="images/profile.jpg" alt="profile" width="120" height="50" /></a></li> <li><a href="photograph.html"><img src="images/photograph.jpg" alt="photograph" width="120" height="50" /></a></li> <li><a href="bbs.html"><img src="images/bbs.jpg" alt="bbs" width="120" height="50" /></a></li> </ul> </div> </div> スタイルシート #header { width: 740px; height: 50px; margin: 0px; padding: 0px; } #header h1 { width: 180px; height: 50px; margin-top: 0px; margin-right: px; margin-bottom: 0px; margin-left: 0px; padding: 0px; float: left; position: absolute; } #gNavi { list-style-type: none; width: 560px; height: 50px; margin-top: 0px; margin-right: 0px; margin-left: 220px; margin-bottom: 0px; float: right; position: absolute; } #gNavi li { list-style-type: none; margin: 0px; padding: 0px; float: left; } 素人作成のため乱雑の作成内容で恐縮ですが、アドバイス頂けると幸いです。

CSSで縦長・横長の写真を一定に並べたい

写真のギャラリーのようなものを作成しています。写真のサムネイルが200×150pxのものと150×200pxのものがあり、並びはランダムです。この写真を正方形の方眼紙に並べるように配置したいと思っています。テーブルで作成すれば楽なのですが、文書構造的にCSSで行いたいと思っています。リストでマークアップして、それぞれのli要素を200pxの正方形にしてから、その中央に画像を表示させたいのですが… 縦長の写真はtext-align:center;で処理ができるので、できましたが、横長写真の上下位置が中央になりません。横長写真が入っているli要素だけに対してクラスを指定すればできそうなのですが、数が多いので、一括で処理できないか、と奮闘しております。試しにli要素に対してline-heightを200pxで指定し、img要素に対してvertical-alignをmiddleで指定してみたのですが、Firefoxではうまくいくものの、IE（8）でNGでした。現在のソースは以下の通りです。 <!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">  </style> </head> <body> <div id="content"> <ul> <li><img src="images/tate.gif" alt="縦" width="150" height="200" /></li> <li><img src="images/yoko.gif" alt="横" width="200" height="150" /></li> <li><img src="images/yoko.gif" alt="横" width="200" height="150" /></li> <li><img src="images/tate.gif" alt="縦" width="150" height="200" /></li> <li><img src="images/yoko.gif" alt="横" width="200" height="150" /></li> <li><img src="images/tate.gif" alt="縦" width="150" height="200" /></li> <li><img src="images/yoko.gif" alt="横" width="200" height="150" /></li> <li><img src="images/yoko.gif" alt="横" width="200" height="150" /></li> <li><img src="images/tate.gif" alt="縦" width="150" height="200" /></li> <li><img src="images/yoko.gif" alt="横" width="200" height="150" /></li> <li><img src="images/tate.gif" alt="縦" width="150" height="200" /></li> <li><img src="images/tate.gif" alt="縦" width="150" height="200" /></li> </ul> </div> </body> </html> どなたかお分かりになる方、いらっしゃいましたら、お知恵を拝借できれば幸いです。よろしくお願い致します。

画像を挿入して横並びのメニューリストを作ったのです

が、margin-top,margin-bottom(margin-leftはききます）がききません。何が原因でしょうか？以下がソースです。～html～ <ul id="menu"> <ul> 　　　　<li>a href="#"><img src="〇〇.jpg"alt="〇〇" width="167" height"59"/></a></li> <li><a href="#"><img src="△△.jpg"alt="△△" width="167" height"59"/></a></li> 　　　　　　　　　　　　　　　　　　　　　　　　　　省略　　　 </ul> ～css～ ul#menu {margin-left: 45px} ul#menu li {list-style-type: none; float: left} ul#menu li a {display: block; width: 181px} ul#menuのところに記述しましたが、変化ありませんでした。

IEでは指定の位置に配置してくれません

添付図のようにしたいのですが、 IEでは右に空白ができてしまい配置したいところに配置できません。図のFireFox確認時の方が配置したい位置に配置できている正です。タグ <div id="header"> <h1><a href="index.html"><img src="images/buyoon_syoukai_web_site.jpg" alt="ブヨーン商会WEBSITE" width="180" height="50" /></a></h1> <div id="gNavi"> <ul> <li><a href="information.html"><img src="images/information.jpg" alt="information" width="120" height="50" /></a></li> <li><a href="profile.html"><img src="images/profile.jpg" alt="profile" width="120" height="50" /></a></li> <li><a href="photograph.html"><img src="images/photograph.jpg" alt="photograph" width="120" height="50" /></a></li> <li><a href="bbs.html"><img src="images/bbs.jpg" alt="bbs" width="120" height="50" /></a></li> </ul> </div> </div> CSS /* レイアウト設定ここから */ #pageBody { width: 740px; margin-top: 0px; margin-right: auto; margin-left: auto; margin-bottom: auto; } #header { width: 740px; height: 50px; margin: 0px; padding: 0px; } #topFlContens { width: 740px; height: 320px; margin: 0px; padding: 0px; } #box { width: 740px; height: 550px; margin-top: 20px; margin-right: 0px; margin-left: 0px; margin-bottom: 0px; padding: 0px; } /* レイアウト設定ここまで */ #header h1 { width: 180px; height: 50px; margin-top: 0px; margin-right: px; margin-bottom: 0px; margin-left: 0px; padding: 0px; float: left; position: absolute; } #gNavi { list-style-type: none; width: 560px; height: 50px; margin-top: 0px; margin-right: 0px; margin-left: 220px; margin-bottom: 0px; float: right; position: absolute; } #gNavi ul { margin: 0px; } #gNavi li { list-style-type: none; margin: 0px; padding: 0px; float: left; } Web初心者のため、アドバイス頂けると幸いです。

CSSのみで作る横ドロップダウンメニュー

教えてください。白旗です。クライアントの指示でCSS＋xhtmlのみでサイトを作成していますが、横並びのプルダウンメニューで行き詰りました。 IE6以外のブラウザでは正常な表示をされるのですが、IE６のみへんてこりんになってしまいます。下記ソースで、メニューAにマウスを乗せてドロップダウンをさせると、メニューBが右に動きます。これに2日間はまってます。よろしくお願いします。 ---ソース--- 【html】 <div id="gnavi_container"> <div id="gnavi"> <ul> <li class="gmenu02_off" onmouseover="this.className='gmenu02_on'" onmouseout="this.className='gmenu02_off'"><a href="#"><img src="img/1.jpg" width="122" height="25" alt="" onmouseover='this.src="img/3.jpg"' onmouseout='this.src="img/1.jpg"' /></a> <ul class="gmenu_sub"> <li><a href="#"><img src="img/4.jpg" width="138" height="19" alt="" /></a></li> </ul> </li> <li class="gmenu03_off" onmouseover="this.className='gmenu03_on'" onmouseout="this.className='gmenu03_off'"><a href="#"><img src="img/2.jpg" width="81" height="25" alt="" onmouseover='this.src="img/2.jpg"' onmouseout='this.src="img/2.jpg"' /></a> </li> </ul> 　</div> </div> 【css】 img{ border:0; } div#gnavi_container{ position : relative; z-index:100; width:800px; height:25px; text-align:left; } div#gnavi ul { margin: 0; padding: 0; list-style: none; } div#gnavi li { float : left; margin : 0; padding : 0; } .gmenu_sub li{ overflow:visible: } .gmenu02_off{ height:25px; width:122px; overflow : hidden; } .gmenu02_on{ width:122px; overflow :visible; } .gmenu03_off{ height:25px; width:81px; overflow : hidden; } .gmenu03_on{ width:81px; overflow :visible; } div#gnavi ul.gmenu_sub{ margin : 0; padding : 0; } div#gnavi ul.gmenu_sub li{ margin : 0; padding : 0; float : none; clear : both; }

<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を拡大縮小したいのです。以上、宜しくお願いいたします。

jqureryスライドショーが上手くいきません。

こんにちは。 web初心者です。今、jqueryを使いスライドショーを作っているのですが上手く行きません。 5枚の画像を重ねてフェードイン　フェードアウトみたいな形にしてるのですが、最後の画像だけdisplay: none;が適用されなくてきれいに表示出来ません。どなたか詳しい方、宜しくお願い致します。 <HTML> <div id="contents"> <div class="slideshow"> <img src="top30.jpg" width="950" height="450"> <img src="top21.jpg" width="950" height="450" class="alt"> <img src="top20.jpg" width="950" height="450" class="alt"> <img src="top22.jpg" width="950" height="450" class="alt"> <img src="top23.jpg" width="950" height="450" class="alt"> </div> </div> <CSS> #contents { width: 950px; margin-right: auto; margin-left: auto; height: auto; .slideshow { width: 950px; border-top-width: 1px; border-top-style: solid; clear: both; padding-top: 60px; height: auto; position: relative; float: left; } .slideshow img { position: absolute; } .slideshow img .alt { display: none; }

CSSでfloat指定した画像に隙間

floatの指定をすると並べた画像に隙間ができます。 div aで外を囲み、幅を400px固定し、その中にli(幅200px）を放り込んでいます。（幅400pxの入れ物に200pxの小箱を2列に並べていく）画像をfloatさせなければ隙間は出ないのですが、下記cssのようにfloatさせると幅400pxにIEだけ収まりません。 WinXP・irefox1.0やOpera7.5では意図通り表示されます。。どなたか解決策お持ちの方よろしくおねがいします。 <html> <head> <title></title> <style type="text/css">  </style> </head> <body> <div id="a"> <dl> <li> <img src="xxx.jpg" width="150" height="200" /><img src="xxx.jpg" width="50" height="100" /><img src="xxx.jpg" width="50" height="100" /></li> <li> <img src="xxx.jpg" width="150" height="200" /><img src="xxx.jpg" width="50" height="200" /></li> </dl> </body> </html>

文字サイズ変更の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> ******************************************** 画像は表示されるのですが、全く動きません。よろしくお願いします！

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画像・文字混在縦メニュー

画像と文字使った縦メニューを作成しています。レイアウトがズレたり隙間ができたりでどうしてもうまくいきません。どうぞお知恵をお貸しください。よろしくお願いいたします。【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>

IE6とその他のブラウザでセンターの位置が【微妙】にずれる・・・

XHTML+CSSで作ったのですが、ブラウザのチェックをしたところIE６だけ一部右寄りになってしまいます。一部というのは、上から「head」「nav」「main」「wrap」としているのですが「nav」と「wrap」部分だけが微妙に右寄り、もしくはその他が微妙に左より？になってしまいます。センター寄せには基本的に「0px auto」を使用しているので、色々調べたところ、それが原因？と思い、「textalign center」にしてもなぜか少しずれてしまいます。ためしに、headとnavだけのスリムな状態にしても同じでした。。。解決方法に心当たりのある方はお願いします。【CSS】 @charset "shift_jis"; * { line-height: 150%; font-size: 12px; letter-spacing: 1px; } body{ margin:0px; padding:0px; text-align:center; background-repeat: no-repeat; } img { border: none; vertical-align: bottom; } h1 { font-weight: normal; margin: 15px 0 0 50px; } #head{ width:900px; height:69px; background-image: url(img/bg-head.jpg); margin: 0px auto; text-align: left; } #nav { width: 100%; background-image: url(img/bg-nav.jpg); } #nav ul { margin: 0px auto; width: 900px; padding: 0px; list-style: none; height: 31px; } #nav li { float: left; } #main { width: 100%; height: 284px; text-align: center; background-image: url(img/bg-main.jpg); } #wrap{ width:880px; margin:0px auto; text-align:left; padding: 0 10px 0 30px; background-image: url(img/bg-wrap.jpg); background-repeat: repeat-y; } #left{ width:645px; float:left; } #right{ width:220px; float:right; text-align: right; padding: 0px; height: 1200px; background-image: url(img/bg-right.gif); } #foot{ position:relative; width:100%; height:35px; clear:both; background-image: url(img/bg-foot.gif); margin: 0 0 50px 0; } 【html】 <body>  <div id="head"> <h1>\\\\\\\\\\\\\\\\\\</h1> </div>  <div id="nav"> <ul> <li><img src="img/nav_01.jpg" /></li> <li><img src="img/nav_02.jpg" /></li> <li><img src="img/nav_03.jpg" /></li> <li><img src="img/nav_04.jpg" /></li> <li><img src="img/nav_05.jpg" /></li> <li><img src="img/nav_06.jpg" /></li> <li><img src="img/nav_07.jpg" /></li> </ul> </div>  <div id="main"><img src="img/main.jpg" /></div> <div id="wrap">  <div id="left"> </div>  <div id="right"> </div> <br style="clear:both" /> </div>  <div id="foot"> </div> </body>

CSSで指定した背景が印刷されない

CSS初心者です、 CSSで背景を指定しているのですが閲覧者側で印刷時に背景も印刷にチェックをいれないと背景が印刷されないのですが、閲覧者側で上記の作業をいなくても背景を印刷させる方法はありましたらどなたかご教授ください。ソース記述 <div id="header"> <ul id="menu"> <li id="mnu1"><a href="index.html"><img src="menu/tm.gif" width="114" height="44" alt="HOME" title="HOME" /></a></li> <li id="mnu2"><a href="topics.html"><img src="menu/tm.gif" width="114" height="44" alt="オリジナルケーキ" title="Topics" /></a></li> <li id="mnu3"><a href="location.html"><img src="menu/tm.gif" width="114" height="44" alt="スイーツ" title="Location" /></a></li> <li id="mnu4"><a href="business.html"><img src="menu/tm.gif" width="114" height="44" alt="マロン" title="Business" /></a></li> <li id="mnu5"><a href="population.html"><img src="menu/tm.gif" width="114" height="44" alt="ギフト" title="Population Labor" /></a></li> <li id="mnu6"><a href="industrial.html"><img src="menu/tm.gif" width="114" height="44" alt="生地制作" title="Industral Park" /></a></li> <li id="mnu7"><a href="contact.html"><img src="menu/tm.gif" width="114" height="44" alt="お問い合わせ" title="Contact" /></a></li> </ul> CSS記述 #header{ background-color : #ffffff; background-repeat : no-repeat; width : 800px; background-image : url(img/logotop.gif); height : 197px; display:list-item; list-style-image: url(img/logotop.gif); } ul#menu{ margin-top : 0px; margin-left : 0px; margin-right : 0px; margin-bottom : 0px; width : 800px; height : 44px; padding: 0px ;} ul#menu li{ float : left; list-style-type : none; } ul#menu li a{display: block; text-decoration: none; outline: none; } #mnu1 a{ background-image : url(menu/menu1.gif); display : block; text-decoration : none; background-repeat : no-repeat; outline: none; } #mnu1 a:hover{ background-position : left bottom;} #mnu1{ margin-top : 0px; } #mnu1 img{border-width : 0px 0px 0px 0px; } よろしくお願いします。

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

本を見ながらＨＴＭＬとＣＳＳを作成したのですが、どのブラウザで見ても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; }

JavaScript src書き換え

javascript src書き換え

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

お礼 2013/10/28 15:23

その他の回答 (1)

お礼 2013/10/28 15:23

関連するQ&A

javascript setTimeout

javascript 神経衰弱

javascript　神経衰弱　表に返す時間

神経衰弱　順番に裏返し

CSSの左横に隙間ができてしまいます。

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

FireFoxで確認するとliがずれます

CSSで縦長・横長の写真を一定に並べたい

画像を挿入して横並びのメニューリストを作ったのです

IEでは指定の位置に配置してくれません

CSSのみで作る横ドロップダウンメニュー

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

jqureryスライドショーが上手くいきません。

CSSでfloat指定した画像に隙間

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

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

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

IE6とその他のブラウザでセンターの位置が【微妙】にずれる・・・

CSSで指定した背景が印刷されない

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

注目のQ&A

カテゴリ

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

専門家に質問してみよう

JavaScript src書き換え

javascript src書き換え

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

お礼 2013/10/28 15:23

その他の回答 (1)

お礼 2013/10/28 15:23

関連するQ&A

javascript setTimeout

javascript 神経衰弱

javascript 神経衰弱 表に返す時間

神経衰弱 順番に裏返し

CSSの左横に隙間ができてしまいます。

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

FireFoxで確認するとliがずれます

CSSで縦長・横長の写真を一定に並べたい

画像を挿入して横並びのメニューリストを作ったのです

IEでは指定の位置に配置してくれません

CSSのみで作る横ドロップダウンメニュー

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

jqureryスライドショーが上手くいきません。

CSSでfloat指定した画像に隙間

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

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

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

IE6とその他のブラウザでセンターの位置が【微妙】にずれる・・・

CSSで指定した背景が印刷されない

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

注目のQ&A

カテゴリ

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

専門家に質問してみよう

javascript　神経衰弱　表に返す時間

神経衰弱　順番に裏返し

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