- ベストアンサー
連続した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をそのままコピーさせてもらいましたら、 上下の方法で両方とも動作しました！ ありがとうございました。
お礼
こんなに少ない記述で動作するなんてビックリです。 質問してよかったです。ありがとうございました。