- ベストアンサー
クリックしたらJavaScriptで数カ所に一度に画像を表示させたい
以下のようなことがJavaScriptでできるでしょうか？ できる場合、関数等のヒントをいただけないでしょうか。 webページにおいて、 「画像を表示」というリンク、あるいは同様のボタンをクリックすると、 同ページ内の複数の場所（特定）に、それぞれ指定した画像を一度に表示させる。 よろしくお願いいたします。
- biwa_nya-su
- お礼率58% (75/128)
- JavaScript
- 回答数4
- ありがとう数2
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
サンプルです。 非表示→表示にしたいimgはコメントにしておきます。 <img ～～～> → <!--img ～～～--> ※<!--<img ～～～>-->は処理されません ※<!-- img を表示するボタン--> 最初が「img」のこんなコメントは処理しようとします。 body内のソースを全て解析処理するので大きなページだと遅いかも… 処理する範囲が特定できるならそれを指定して使って。 例 <div id="ABC">～～～</div> <div id="XYZ">～～～</div>この中だけなら onclick="showImage(document.body)" ↓ onclick="showImage(document.getElementById('ABC'));showImage(document.getElementById('XYZ'))" <html> <head> <title></title> <style type="text/css"> </style> </head> <script type="text/javascript"> function showImage(obj){ while(obj){ var saveNext= obj.nextSibling; showImage(obj.firstChild); if(obj.nodeType == 8){ var cmntValue = cmntParse(obj.nodeValue); if(cmntValue[0] =='img') { var imgObj = document.createElement('img'); for(var i=1;i<cmntValue.length;i++){ var attrValue = cmntValue[i][1].replace(/["']/g,''); imgObj.setAttribute(cmntValue[i][0],attrValue); } obj.parentNode.replaceChild(imgObj,obj); } } obj=saveNext; } } function cmntParse(str){ var result=new Array; var workArr =str.split(/\s+/); for(var i=0;i<workArr.length;i++){ if(! workArr[i]) continue; if(workArr[i].match(/^\s*$/)) continue; result.push(workArr[i].split('=')); } return result; } </script> <body> <p><input type="button" value="画像を表示" onclick="showImage(document.body)"></p> <p>あああ<!--img src="～" alt="～" width="～" height="～"-->いいい<!--img src="～" alt="～"--></p> </body> </html>
その他の回答 (3)
- steel_gray
- ベストアンサー率66% (1052/1578)
画像の読み込みタイミングはブラウザ依存です。 （いくつかのブラウザで試したところ、IE,Firefox,Safariはページ読み込み時、Operaはボタンクリック後でした） これを必ずボタンクリック後にする事は可能ですが前回、回答したものは捨てて全く別のスクリプトにしなければいけませんので補足してもらった後、回答します。 画像の数や各個のファイルサイズにもよりますが 表示されるタイミングは読み込みに応じて(1)パラパラパラ…、て感じになります。 これも制御して、全ての画像を読み込み終わった時に(2)パッと表示されるようにする事もできますが、ボタンクリックしてからの待ち時間が長くなり利用者は不安を覚えるかもしれません。 (1)と(2)どちらの方がいいでしょうか？？ また、ボタンクリック後に読み込ませたいって事はそれなりの都合とかあるのでしょうが、理由を教えてください。 スクリプトを組みにあたって、理由によってはないかしらの注意しなければいけない事もあるでしょうから。
補足
大変なお手間をとっていただき、恐れ入ります。 表示されるタイミングは、（１）の方が都合がよいです。 利用者に見える形で何らかの反応があった方がよいと思うからです。 クリック後に読み込ませたい理由ですが、 端的に言うとサーバの転送量を抑制したいからです。 閲覧者の中には、画像を不要と考える人と画像が見たいと考える人の 双方がいる（しかもどちらかというと前者が多い）ようですので、 画像の閲覧を希望する方のみボタンを押していただければ、 転送量が減らせるのではないかと考えています。 どうぞよろしくお願いします。
- steel_gray
- ベストアンサー率66% (1052/1578)
サンプルです。 最初は class="hide" を付けたimgはCSSで display:none にしておき、 ボタンクリックでCSSの内容をdisplay:inlineに変更しています。 <html> <head> <title></title> <style type="text/css"> .hide {display:none;} </style> </head> <script type="text/javascript"> function showImage(){ for(var i=0;i<document.styleSheets.length;i++){ if(document.styleSheets[i].disable) continue; var cssRule = (document.styleSheets[i].cssRules)? document.styleSheets[i].cssRules: document.styleSheets[i].rules; for(var j=0;j<cssRule.length;j++){ if(cssRule[j].selectorText == '.hide') { cssRule[j].style.display='inline'; } } } } </script> <body> <p><input type="button" value="画像を表示" onclick="showImage()"></p> <p>あああ<img src="～" class="hide" alt="～">いいい<img src="～" class="hide" alt="～"></p> </body> </html>
補足
ありがとうございます！ うまく動きました。 加えてお尋ねしたいのですが、 この場合、画像の読込はいつ行われているのでしょうか？ もしページ読み込み時に画像もすべて読み込まれている場合、 画像だけはボタンを押した時に読み込むようにできるでしょうか？
<td width="110"><img src="new/holiday_01_sum.gif" width="109" height="83" onclick="update_srcs();"></td> function update_src(objects, img) { objects.src = img.src; } function update_srcs() { update_src(document.xxxx1, a_images[0] update_src(document.xxxx1, a_images[1] update_src(document.xxxx1, a_images[2] }
お礼
遅くなりましたが、重ね重ねありがとうございました。 期待した通りに動作しました。 アドバイスの通り、処理範囲を特定しました。 本当にありがとうございました！