- ベストアンサー
背景色の変更を簡単に
<script type="text/javascript"> <!-- function change(bg_color){ document.bgColor = bg_color; } //--> </script> ************ <table> <tr> <td onclick="change('#FFFFEE')" style="background-color: #FFFFEE">クリーム</td> <td onclick="change('#EEFFFF')" style="background-color: #EEFFFF">水色</td> <td onclick="change('#FFEEFF')" style="background-color: #FFEEFF">桃色</td> <td>～～</td> </tr> </table> ************ javascript初心者です。テストでなんとか動くようになりました・・・ これで間違いないでしょうか？ これで正しければ onclick="change('#～～～')"の記述を全カ所にこれから入れようと思うのですが、 onclick="change('#～～～')"の部分を記述しないで、 style="background-color: #～～～">のstyleの色名＃～～～を引っ張り込む方法とか、統一する方法とか簡素化する方法はありますか？ 例えば<td style="background-color: #FFFFEE">クリーム</td> HTMLはこのままでできないでしょうか？ ここで教えて頂いた以下の画像の場合は出来たので同じように出来れば嬉しいのですが・・・ <script type="text/javascript"> function change(evt) { e = evt.target || evt.srcElement; if (e.nodeName=='IMG') document.body.style.backgroundImage = 'url(' + e.src +')'; } </script> <table onclick="change(event)"> <tr> <td><img src="a001.jpg"></td> <td><img src="a002.jpg"></td> <td><img src="a003.jpg"></td> </tr> </table> *********************** なかなか応用ができなくて困っています。 なんとか簡単にできれば嬉しいです<(_ _)>
- takumana20
- お礼率91% (434/473)
- JavaScript
- 回答数4
- ありがとう数5
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
＞例えば<td style="background-color: #FFFFEE">クリーム</td> ＞HTMLはこのままでできないでしょうか？ と、あったので、てがるなきもちで。 けっして、質問者を軽視しているわけではありませんが いつもガチで書くべきなのか考えます。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Script-Type" content="application/javascript"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>TEST</title> </head> <body> <table> <tr> <td style="background-color: #FFFFEE">クリーム</td> <td style="background-color: #EEFFFF">水色</td> <td style="background-color: #FFEEFF">桃色</td> </tr> </table> <script type="text/javascript"><!-- //@cc_on /*@if( @_jscript ) attachEvent( 'on' + @else@*/ addEventListener (/*@end@*/ 'load', function ( ) { document./*@if( @_jscript ) attachEvent( 'on'+ @else@*/ addEventListener(/*@end@*/ 'click', function ( evt ) { var e = evt./*@if( @_jscript ) srcElement @else@*/ target /*@end@*/; if( 'TD' === e.nodeName ) { document.body.style.cssText = e.style.cssText; } }, false); }, false); //ぜんかくくうはくは、はんかくにでもなおしてね。 //--> </script> </body> </html> 'TR'は'TD'でうごきます。
その他の回答 (3)
- yuu_x
- ベストアンサー率52% (106/202)
。。。提示のまま変更でよくない？ わざわざ ID 振って、問題のあるレガシープロパティを使う理由ってのは？ function change( evt ) { var e = evt.target || evt.srcElement; e.tagName == 'TR' && ( document.body.style.backgroundColor = e.style.backgroundColor ); }
お礼
画像のサンプルを書き換えていただけたのですね。 最初は動かなかったのですが、NO4さんの回答で書き換えたら動きました。 このような応用ができなくて困っていました。助かりました<(_ _)>
- babu_baboo
- ベストアンサー率51% (268/525)
スクリプトを<head>のなかに、おかないで、 </body>のちょくぜんにおくといいよ。 すくりぷとがじっこうされたとき、 まだTABLEがよみこまれてないから えら～になっているとおもう
お礼
おっしゃるとおりでしたｗ ありがとうございました。
- babu_baboo
- ベストアンサー率51% (268/525)
こんなのは <table id="p"> <tr> <td style="background-color: #FFFFEE">クリーム</td> <td style="background-color: #EEFFFF">水色</td> <td style="background-color: #FFEEFF">桃色</td> </tr> </table> document.getElementById('p').onclick = function (ev) { var e = ev ? ev.target: event.srcElement; var a = 'backgroundColor'; var s = 'style'; document.body[s][a] = e[s][a]; } とか document.body[s].cssText = e[s].cssText; にしたりすると、たのしいとか？
補足
なにもわからないのですが、 下記のようにそのままコピペで設定しましたら 動かないようです・・・何かいけないのでしょうか？ 再度検証お願いします<(_ _)> <script type="text/javascript"> document.getElementById('p').onclick = function (ev) { var e = ev ? ev.target: event.srcElement; var a = 'backgroundColor'; var s = 'style'; document.body[s][a] = e[s][a]; } </script> ************ <table id="p"> <tr> <td style="background-color: #FFFFEE">クリーム</td> <td style="background-color: #EEFFFF">水色</td> <td style="background-color: #FFEEFF">桃色</td> </tr> </table>
関連するQ&A
- エラーが起きてしまいます
アルバムページを作ろうと思っていたのですが どこが、どう間違っているのでしょうか？ 一応表示はできていると思うのですが… <HTML> <HEAD> <TITLE></TITLE> <SCRIPT language=javascript> var prevObj = null function chBorder(elem,color) { if(prevObj != null) { prevObj.style.borderColor = "#ffffff" } prevObj = elem elem.style.borderColor = color } </SCRIPT> </HEAD> <BODY> <TABLE> <TBODY> <TR> <TD> <IMG onclick="myImg1.src=this.src" src="1.jpg" width="60"> <IMG onclick="myImg1.src=this.src" src="2.jpg" width="60"> <IMG onclick="myImg1.src=this.src" src="3.jpg" width="60"> <IMG onclick="myImg1.src=this.src" src="4.jpg" width="60"> <IMG onclick="myImg1.src=this.src" src="5.jpg" width="60"> </TD> </TR> <TR> <TD align="center"> <IMG id="myImg1" src="0.jpg" width="300"> </TD> </TR> </TBODY> </TABLE> </BODY> </HTML>
- 締切済み
- JavaScript
- 連続したonclick
<table> <tr> <td><img src="a001.jpg" onclick="document.body.style.backgroundImage = 'url(a001.jpg)'"></td> <td><img src="a002.jpg" onclick="document.body.style.backgroundImage = 'url(a002.jpg)'"></td> <td><img src="a003.jpg" onclick="document.body.style.backgroundImage = 'url(a003.jpg)'"></td> </tr> </table> ******************************* １ 背景画像の切り替え画像サンプルをつくりました。 これが何十行も連続します。 CSSみたいに同じ内容が重複するときにclassで分類するみたいに、 Javascriptでも簡素化する方法はないでしょうか？ ＜HEAD＞＜/HEAD＞内には <meta http-equiv="Content-Script-Type" content="text/javascript"> しか書いていません。（Javascriptは初心者です） ２ document.body.style.backgroundColor='#ffffff'; backgroundImageとかbackgroundColorの 後方のImageとかColorの頭文字は大文字でも良いのでしょうか？
- ベストアンサー
- JavaScript
- onclickで画像と文字を別々の場所に表示したいのですが...
onclickで小さい画像を別の場所に大きな画像で表示することは出来たのですが、その時に別の場所に文字を表示したいのです。 （例えば：「山」の小さな画像をクリックすると大きな「山」の画像が表示されて←これはＯＫ、 その下に「富士山」の文字を表示したい←これです。） 下記のようにしています。 <script language="javascript"> <!-- function Image(img){ document.getElementById("image").src=img} //--> </script> </head> <table> <tr> <td><img src="sample1_small.jpg" onclick="Image('sample1.jpg')"></td> <td><img src="sample2_small.jpg" onclick="Image('sample2.jpg')"></td> <td><img src="sample3_small.jpg" onclick="Image('sample3.jpg')"></td> <td><img src="sample4_small.jpg" onclick="Image('sample4.jpg')"></td> </tr> <tr> <td colspan="4"><img src="sample1.jpg" name="image"></td> </tr> <tr> <td>***ここに文字を表示させたいのです***</td> </tr> </table> 宜しくお願いします。
- ベストアンサー
- JavaScript
- 画像にオンマウスで背景画像を固定
画像にオンマウスで背景を水平方向+上に固定するにはどうしたら良いのでしょうか？ 今現在使用しているタグだと垂直水平方向に繰り返しになってしまいます。 使用しているソースは以下のとおりです。 ---------------------------------- </HEAD> <BODY> <TABLE cellspacing="0"> <TBODY> <TR> <TD onmouseover="body.style.background='url(/image/001.jpg) fixed repeat';" onmouseout="body.style.background='';"><IMG src="/image/001.jpg" width="200" height="200" border="1"></TD> </TR> <TR> <TD onmouseover="body.style.background='url(/image/002.jpg) fixed repeat';" onmouseout="body.style.background='';"><IMG src="/image/002.jpg" width="200" height="200" border="1"></TD> </TR> <TR> <TD onmouseover="body.style.background='url(/image/003.jpg) fixed repeat';" onmouseout="body.style.background='';"><IMG src="/image/003.jpg" width="200" height="200" border="1"></TD> </TR> </TBODY> </TABLE> </BODY> </HTML> ---------------------------------- 「fixed repeat';」を「fixed repeat-x';」に変えてみても変化なしでした。 また、styleに <!-- BODY { background-attachment: fixed; background-repeat: repeat-x; background:position:top} --> を書いてみたりもしたのですが変化なしでした。 ご存知の方、詳しい方アドバイスお願いします。
- ベストアンサー
- HTML
- 複数のJavascript の組込み方についてです。初心者で色々試して
複数のJavascript の組込み方についてです。初心者で色々試してがんばったのですが、行き詰ってしまいました。私の作りたい物は、ページの左側にリスト部分があり、そのリストをクリックすると右側に写真が出るものです。そしてその写真をクリック、もしくは画像下に作ったいくつかの対応したボタンを押すと、新たな写真が最初に出た写真と同じ場所に表示される、というものになります。私が試行錯誤してみたソースでは、一つ目のリストでは「マウスが触ると写真が切り替わる基本スクリプト」になるように、そして二つ目のリストでは「複数の画像を同じ場所に表示させ切替える」を目指しています。もしお詳しい方で何かお気付きの点があれば、お力を貸して頂けますでしょうか。どうか宜しくお願い致します。 <body> <div align="center"> <TR> <SCRIPT language="JavaScript"><!-- a_data=new Array(); a_data[0]='<CENTER><TABLE><TR>' +'<TD style="width:300;"><img galleryimg=no src="../img/hana1.jpg" onmouseover="this.src='../img/hana2.jpg';" onmouseout="this.src='../img/hana1.jpg';"></TD></TR></TR>' +'<TD style="font-size:14px;vertical-align:bottom;">' +' 写真の説明<br>写真にポインタを合わせると、写真が替わります。' +'</TD>' +'</TR></TABLE></CENTER>'; a_data[1]='<CENTER><TABLE><TR>' +'<TD style="width:300;"><IMG name="myimg" src="../img/0.png" style="float:right; margin:10px 0px 10px 20px;"></TD></TR></TR>'; +'<TD style="font-size:14px;vertical-align:bottom;">' +' 写真の説明' <INPUT type="button" value="写真１" OnClick="document.myimg.src='../img/1.png';"> <INPUT type="button" value="写真２" OnClick="document.myimg.src='../img/2.png';"> <INPUT type="button" value="写真３" OnClick="document.myimg.src='../img/3.png';"> <INPUT type="button" value="最初の写真" OnClick="document.myimg.src='../img/0.png';"> +'</TD>' +'</TR></TABLE></CENTER>'; function pic(sel){document.getElementById("l_menu").innerHTML=a_data[sel];} //--> </SCRIPT> </TR> <div id="A_spc"> <TABLE> <tr> <td style="width:120;height:30;background-color:#ffeeee;font-size:12px;" onclick="pic(0);"> <CENTER>リスト１</CENTER> </td> </tr> <tr> <td style="width:120;height:30;background-color:#ffeeee;font-size:12px;" onclick="pic(1);"> <CENTER>リスト２</CENTER> </td> </tr> </TABLE> </A_spc> </div> <div id="B_spc"> <TABLE> <TR> <TD colspan=2 style="width:350; font-size:12px;padding-left:20;padding-top:35;" id="l_menu"> <CENTER><p class="sample1">左のリストをクリックするとココに写真が出ます。</p></CENTER> </TD> </TR> </TABLE> </B_spc> </div> </div> </div> </body>
- 締切済み
- JavaScript
- 画像をクリックして元に戻すには
ホームページでよく見かけますが、写真等をクリックして別ページの大きな画像を表示させたあと、その画像をクリックすると前のページに戻るのをみかけます。 アンカーで元のファイル名を記述すればできますが、 特定のファイル名を指定することなく、 <INPUT TYPE="BUTTON" VALUE="前のページへ戻る" onClick="history.back();"> のようなものを、ボタンではなく画像をクリックしたときに機能するようにするには(img src=）で、どのように記述すればいいのでしょうか。 検索してみたのですが、なかなか見つけられませんのでよろしくお願いします。 次のような例を見つけましたが このTABLEを使わないで直接画像のみで指定したいのですが。 <script language="javascript"> function onPh(img) { myImg.src = img myTable1.style.display = "block" myTable2.style.display = "none" } function offPh() { myTable1.style.display = "none" myTable2.style.display = "block" } </script> －－－－－－－ <TABLE border="3" table id="myTable1" width="50%" height="50%" onclick="offPh()" style="display:none;"> <tr> <td><img id="myImg" width="100%"></td> </tr> </TABLE> <table border="0" id="myTable2" style="display:block;"> <tr> <td><FONT color="#660066"><img src="hit3.jpg" width="80" height="60" onclick="onPh(this.src)"><br>
- ベストアンサー
- HTML
- リンクをクリックして画像を切り替えるには？
下記のようなソースなのですが、2枚目の画像に切り替わらず、表示されません。 何が悪いのでしょう？ <header内>-------------------------------------> <SCRIPT type="text/javascript"> <!-- function showimg1(){ document.area.src = "/jp/shop/i/popup_usbcalc/cg4.jpg"; } function showimg2(){ document.area.src = "/jp/shop/i/popup_usbcalc/cg4_zoom.jpg"; } //--> </SCRIPT> -------------------------------------> <img src="cg4.jpg" alt="" name="area" /><br /> <table> <tbody> <tr> <td>[ <a href="javascript:void()" onclick="showimg1()">リンク1</a> ]</td> <td>[ <a href="javascript:void()" onclick="showimg2()">リンク2</a> ]</td> </tr> </tbody> </table>
- ベストアンサー
- JavaScript
- スワップイメージ＋リンクの変更
まったくの素人ですが、お教えください。 以下のようなテーブルにそれぞれ画像とリンクをつけようとしています。 <table> <tr> <td rowspan="3"><a href="hoge.html"><img src="hoge.jpg"></a></td> <td><a href="a.html"><img src="a.jpg"></a></td> </tr> <tr><td><a href="b.html"><img src="b.jpg"></a></td></tr> <tr><td><a href="c.html"><img src="c.jpg"></a></td></tr> </table> a.jpg/b.jpg/c.jpg(以下、abc) がそれぞれメニューバーの項目で、 hoge.jpgを大きなメインの画面にしたいと思っています。 このとき、abcのいずれかをマウスオーバーするたびに、それぞれのイメージがhogeのエリアにスワップされ、かつそれぞれの項目のリンク(a.html/b.html/c.html)がhoge.htmlと置き換わるようなjavascriptを作りたいと考えています。 イメージのスワップだけならいくつも見つけることができたのですが、イメージとリンクが両方ともスワップされるようなものを、見つけることができませんでした。もしそのようなjavascriptがweb上にありましたら、お教えください。
- ベストアンサー
- JavaScript
- クリックで背景変更するタグ
素材屋さんなどによくある、画像をクリックをすると背景が変わるというプログラムを作りたいのですが、調べてみたタグではうまくいきませんでした。 <tr><td><a href="#" onClick="javascript:bgChange('画像ファイル名');return false"><img src="画像ファイル名" border="0"></a></td></tr> 以下を<HEAD>区間に貼り付け <SCRIPT LANGUAGE="JavaScript"> <!-- function bgChange(myback){ document.body.background=myback; } //--> </SCRIPT> これだと、画像のプロパティがhttpで始まるものはうまくいくのですが、マイドキュメントに保存してある画像（自分で撮った写真など）では、背景が真っ白になってしまいます。 Win98、ブラウザはIE5.5です。 どなたか、教えてくださると幸いです。
- ベストアンサー
- JavaScript
- 助けてください＞＜IE上で1pxのズレ
こんにちわ。 組んだテーブルに謎の１ｐｘがはいってしまいます。 ファイヤーフォックスでは正常なのですがIEでは1pxの隙間ができてしまうようで。 どなたか分かる方いらっしゃたらお願いします＞＜ <table width="660" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="2" valign="top"> <img src="img/test_01.jpg" width="660" height="177" alt=""></td> </tr> <tr><td rowspan="2" valign="top"> <table width="316" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="2"> <img src="img/test_02.jpg" width="316" height="46" alt=""></td> </tr> <tr> <td> <img src="img/test_05.jpg" width="144" height="47" alt=""></td> <td> <img src="img/test_06.jpg" width="172" height="47" alt=""></td> </tr> <tr> <td colspan="2"> <img src="img/test_08.jpg" width="316" height="169" alt=""></td> </tr> </table> </td></tr> <tr><td valign="top"> <table width="344" border="0" cellpadding="0" cellspacing="0"> <tr><td> <table width="344" border="0" cellpadding="0" cellspacing="0"> <tr> <td> <img src="img/test_03.jpg" width="181" height="62" alt=""></td> <td> <img src="img/test_04.jpg" width="163" height="62" alt=""></td> </tr> <tr> <td colspan="2"> <img src="img/test_07.jpg" width="344" height="83" alt=""></td> </tr> </table> </td></tr> <tr><td> <table width="344" border="0" cellpadding="0" cellspacing="0"> <tr> <td> <img src="img/test_09.jpg" width="160" height="62" alt=""></td> <td> <img src="img/test_10.jpg" width="184" height="62" alt=""></td> </tr> <tr> <td colspan="2"> <img src="img/test_11.jpg" width="344" height="23" alt=""></td> </tr> <tr> <td> <img src="img/test_12.jpg" width="160" height="32" alt=""></td> <td> <img src="img/test_13.jpg" width="184" height="32" alt=""></td> </tr> </table> </td></tr> </table> </td></tr> <tr><td colspan="2"> <table width="660" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="5"> <img src="img/test_14.jpg" width="660" height="141" alt=""></td> </tr> <tr> <td> <img src="img/test_15.jpg" width="130" height="150" alt=""></td> <td> <img src="img/test_16.jpg" width="130" height="150" alt=""></td> <td> <img src="img/test_17.jpg" width="140" height="150" alt=""></td> <td> <img src="img/test_18.jpg" width="130" height="150" alt=""></td> <td> <img src="img/test_19.jpg" width="130" height="150" alt=""></td> </tr> <tr> <td colspan="5"> <img src="img/test_20.jpg" width="660" height="40" alt=""></td> </tr> </table> </td></tr> </table>
- 締切済み
- HTML
お礼
何度もありがとうございます。全部動作しましたｗ 何もわからないので教えて頂いた通りにコピペしていますので できれば綺麗で簡素なソースを教えて頂けると嬉しいです。 検索してもなかなか見つけられず困っていました。 今回はHTMLのTD内を全部修正しなくて済みましたので非常に助かりました。ありがとうございました。