- ベストアンサー
連続した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の頭文字は大文字でも良いのでしょうか？
- takumana20
- お礼率91% (434/473)
- JavaScript
- 回答数4
- ありがとう数3
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
中間的に、こんなのでは？ <html> <head> <script type="text/javascript"> function change(evt) { e = evt.target || evt.srcElement; if (e.nodeName=='IMG') document.body.style.backgroundImage = 'url(' + e.src +')'; } </script> </head> <body> <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> </body> </html>
その他の回答 (3)
- t_netbug
- ベストアンサー率34% (15/44)
1の回答 クラスで分類するような方法はあります。 ブラウザ毎の互換の問題から、良くある方法としては、 全てのタグ、あるいは特定タグのclass名だけに処理を追加、実行するという方法があると思います。 画面内全てのタグから特定のクラスを指定する場合 doc_tag_all = document.getElementsByTagName('*'); 特定のタグを取得する場合、 th_tag_all = document.getElementsByTagName('img'); 蛇足となりますが、サンプルソースとなります。 <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title></title> <script type="text/javascript"> <!-- onload = function(){ // 画面読み込み完了時に実行される table_tag = document.getElementById('attach'); // attachはtableタグにIDとして指定してある。 img_tag_all = table_tag.getElementsByTagName('img');// tableタグ内のimgタグのみ取得 for(i=0;i<img_tag_all.length;){ img_tag = img_tag_all.item(i++); img_tag.setAttribute('onclick','bg_change(this)'); } } function bg_change(obj){ document.body.style.backgroundImage = 'url('+obj.src+')'; } --> </script> </head> <body> <table id="attach"> <tr><td><img src="1.png"></td><td><img src="tesla02.jpg"></td></tr> </table> </body> </html> JavaScript初心者との事でしたので、ソースとしては#3の方の書いた物が一番読みやすく、改修しやすいかと思います。 2の回答 他の方が既に回答されていますが、大文字でないと駄目です。 参考になれば、幸いです。
お礼
いろいろな方法があるのですね。 初心者の立場も考慮して頂きありがとうございました<(_ _)> みなさんのお陰で簡素なソースになりました。
- babu_baboo
- ベストアンサー率51% (268/525)
ばかのひとつおぼえですね。^^; いみなくつかいすぎました。 (function () { return function () { ; }; })(); てきとうになおしてください function () { ;}
- babu_baboo
- ベストアンサー率51% (268/525)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>TEST</title> <body> <table summary="はいけい がぞうの いちらんひょうです"> <tr> <td><img src="a001.jpg"></td> <td><img src="a002.jpg"></td> <td><img src="a003.jpg"></td> <td><img src="./img/0.gif"></td> <td><img src="./img/1.gif"></td> <td><img src="./img/2.gif"></td> </tr> </table> <script type="text/javascript"><!-- //@cc_on @set @V = ( @_jscript_version >= 5.5 ) /*@if( @V ) attachEvent( 'on' + @else@*/ addEventListener (/*@end@*/ 'load', (function ( ) { return function ( ) { document./*@if(@V) attachEvent( 'on'+ @else@*/ addEventListener(/*@end@*/ 'click', (function ( ) { return function ( evt ) { var e = evt./*@if(@V) srcElement @else@*/ target /*@end@*/; if( 'IMG' === e.nodeName && 'TD' === e.parentNode.nodeName ) document.body.style.backgroundImage = 'url(' + e.src +')'; };})(), false); };})(), false); //ぜんかくくうはくは、はんかくにでもなおしてね。 //--> </script> もしくは、 <td><img src="a001.jpg" onclick="change( this.src )"></td> function change( src ) { document.body.style.backgroundImage = 'url(' + src +')'; } とか おおもじじゃなきゃ～！
お礼
まったくの初心者なので、NO.2の追記は応用できませんでしたが、 このNO.1をそのままコピーさせてもらいましたら、 上下の方法で両方とも動作しました！ ありがとうございました。
関連するQ&A
- 背景色の変更を簡単に
<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> *********************** なかなか応用ができなくて困っています。 なんとか簡単にできれば嬉しいです<(_ _)>
- ベストアンサー
- 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
- エラーが起きてしまいます
アルバムページを作ろうと思っていたのですが どこが、どう間違っているのでしょうか？ 一応表示はできていると思うのですが… <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
- クリックで色変更後に既に変更された要素を戻すには
javascriptの勉強をしています。 htmlのテーブルタグで、ブロックが３つあるとします。 ■■■ それぞれのブロックを<div id="00"><div id="01"><div id="02"> として定義しています。 onclick="document.getElementById('00').style.backgroundColor='#ff0000' でクリックしたブロックの色を変更しています。 質問したい内容は、「１箇所をクリックした時に、他の２箇所の色を戻す」方法です。 以下はサンプルです。 -------------------------------------- <TABLE BORDER="2" bordercolor="#000000"> <TR> <TD bgcolor="#008000"> <div id="00"> <IMG onclick="document.getElementById('00').style.backgroundColor='#ff0000';document.getElementById('01').style.backgroundColor='#008000';document.getElementById('02').style.backgroundColor='#008000';" border="0" src="item/img/00.png" width="36" height="36"> </div> </TD> <TD bgcolor="#008000"> <div id="01"> <IMG onclick="document.getElementById('01').style.backgroundColor='#ff0000';" border="0" src="item/img/01.png" width="36" height="36"> </div> </TD> <TD bgcolor="#008000"> <div id="02"> <IMG onclick="document.getElementById('02').style.backgroundColor='#ff0000';" border="0" src="item/img/02.png" width="36" height="36"> </div> </TD> </TABLE>--------------------------------------------- １箇所をクリックした時に、他の２箇所の色を戻すには 「00をクリックした時に、01の色を戻す02の色を戻す」のように、 ３箇所全てに記述しなければならないのでしょうか？ テーブルのブロックが少なければ、これでもいいのですが、 たとえば１００個とか１０００個になった時にはとても大変な作業になってしまいます。 他になにか効率のいい記述の仕方はありますでしょうか？ ご存知の方いらっしゃいましたら、ご教授よろしくお願いいたします。
- ベストアンサー
- JavaScript
- 複数の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
- リンクをクリックして画像を切り替えるには？
下記のようなソースなのですが、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
- IEでimages[...]のエラーになる原因は？
下記プログラムをIETesterで開くと、 このページのスクリプトでエラーが発生しました。 文字： 3 エラー： 'document.images[...]'はNullまたはオブジェクトではありません コード： 0 というエラーメッセーが出てしまいます。 Firefoxだと正常に動いたのですが、 document.images[i].srcというのは、IEで対応していないということでしょうか？ それか、そもそもこういった書き方は間違いでしょうか？ <script language="JavaScript"> <!-- rrr = new Image(200,100); rrr.src = "sample.jpg"; function sss(){ document.fff.nnn.value=""; ppp.innerHTML = "" for(var i=1; i<=30; i++){ document.images[i].src = rrr.src; : : : : : //--> </script> </head> <body onload="sss()"> <form name="fff"> <img src="title.jpg"> <div id="nnn"></div> <table> <tr> <td><img src="a.jpg" width="200" height="100" onclick="yyy(1)"></td> <td><img src="a.jpg" width="200" height="100" onclick="yyy(2)"></td> <td><img src="a.jpg" width="200" height="100" onclick="yyy(3)"></td>
- ベストアンサー
- JavaScript
- JavaScript onClick
JavaScript初心者です。 クリックしたら音が出るようにしたいのですが音がでません。 どなたかご回答よろしくお願いします。 <html> <head> <script language = "JavaScript"> <!-- function sound(name){ document.all.music.src = name; } --> </script> </head> <body> <bgsound src = # id = music autostart = true loop = true> <a href = # onClick = sound("img/oto.mp3")> <img src="img/picture.jpg"> </a> </body> </html>
- ベストアンサー
- JavaScript
- [JavaScript]Table内の文字列書換
下記のようにTableを作り、上に場所名、下に画像を貼り JavaScriptで反時計回りに定期的に場所名と画像の位置を変えるプログラムを作成しています。 画像位置を変えることはできたのですが、文字列を変えることができません。 どなたかご教示ください。 ===================================== | 場所A | 場所B | ================= =================== | | | | | 画像B | | | | | 画像 A =================== | | 場所C | | =================== | | | | | 画像C | | | | | =================== | | 場所D | | =================== | | | | | 画像D | | | | ===================================== <HTML> <HEAD> <TITLE>TEST</TITLE> <META HTTP-EQUIV="content-type" CONTENT="text/html;charset=UTF-8"> <META HTTP-EQUIV="refresh" CONTENT="50"> </HEAD> <BODY BGCOLOR="000000" TEXT="#FFFFFF"> <table ALIGN="CENTER" border="5" > <tr><td>A</td><td>B</td></tr> <tr><td rowspan=5><IMG SRC="A.jpg" NAME="SP1"><SCRIPT language="javaScript"> <!-- var NO1=1,NO2=2,NO3=3,NO4=4; img=new Array(4) img[1]="A.jpg" img[2]="B.jpg" img[3]="C.jpg" img[4]="D.jpg" UP(); function UP() { setTimeout("UP()",10000); document.SP1.src=img[NO1]; document.SP2.src=img[NO2]; document.SP3.src=img[NO3]; document.SP4.src=img[NO4]; NO1++; NO2++; NO3++; NO4++; if(NO1>4){NO1=1;} if(NO2>4){NO2=1;} if(NO3>4){NO3=1;} if(NO4>4){NO4=1;} } //--> </SCRIPT> </td> </td> <td><IMG SRC="B.jpg" NAME="SP2"</td></tr> <tr><td">C</td></tr> <tr><td><IMG SRC="C.jpg" NAME="SP3"></td></tr> <tr><td>D</td></tr> 一部省略 </table> </body> </ht
- 締切済み
- JavaScript
- javascript でテーブル操作
javascriptのdeleteRowで削除したテーブルの行を再表示する方法を探しております。 下記ソース内reload.gifをクリックするとdeleteRowで消えた行をまとめて表示したいのですが何か良い方法は無いでしょうか？ (＊)ブラウザの再表示は使えません。 <html> <head> <title></title> <script language="JavaScript" type="text/JavaScript"><!-- function Delline(tablename,num){ document.getElementById (tablename).deleteRow(num); } //--></script> </head> <body> <img src="reload.gif"> <table id="table1"> <tr onmouseover="asrow1 = this.rowIndex"> <td class="ChkTD41">ああ<img src="del.gif" onclick="Delline('table1',asrow1)" /> <input type="text" name="a1"> </td> </tr> <tr onmouseover="asrow2 = this.rowIndex"> <td class="ChkTD41">いい<img src="del.gif" onclick="Delline('table1',asrow2)" /> <input type="text" name="b1"> </td> </tr> <tr onmouseover="asrow3 = this.rowIndex"> <td>うう<img src="del.gif" onclick="Delline('table1',asrow3)" /> <input type="text" name="c1"> </td> </tr> </table> </body> </html>
- ベストアンサー
- JavaScript
お礼
こんなに少ない記述で動作するなんてビックリです。 質問してよかったです。ありがとうございました。