- ベストアンサー
交互に入れ替わる画像を複数配置する方法
- 画像名が変わっても、プログラムを変更せずに、HTML内のソースの画像名のみを変更できるJavaScriptを探していました。以下のサイトで、画像を交互に入れ替える方法を見つけました。
- ただし、上記の方法では1つのID（photo01）しか動作しないため、複数の画像を配置する場合にはどうすればいいか悩んでいます。
- プログラムを変更せずに、1つのIDで複数の画像の名前を変更するだけで実現する方法はあるのでしょうか？
- maimai0629
- お礼率80% (28/35)
- JavaScript
- 回答数4
- ありがとう数2
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
#1、#2です。 ＞何かまずいのですね？ #2で訂正した部分は、余分な画像を非表示にしている部分ですが、元のままだと全部の画像を非表示にしてしまっていたので、最初に一瞬だけ何も表示されない瞬間ができてしまう可能性がありました。 それを最初の一つを除いて非表示にするよう訂正したものです。 ＞こちらのスクリプトはheader内に入れたり、外部ファイルにすると動作しない ＞ようなのですが、必ず<div class="changeImage">～</div>の後に記述し ＞なくてはなりませんか？ そのままですと位置は<div>要素より後に記述する必要があります。（直後の必要はありません） 外部ファイルにすることは可能ですが、読込むための<script>タグの位置は同じ位置になります。 header内に入れる場合は処理を関数化して、onloadなどで実行することになります。 例えばこんな感じ。（全角空白は半角に） /*@cc_on@*/ window./*@if(1)attachEvent('on' + @else@*/addEventListener(/*@end@*/ 'load', function(){ var interval = 1000; // 画像切替間隔（msec） var disp = "inline"; // 画像の表示方法（inline/block） var changeImage = function(elm){ var img = elm.getElementsByTagName("img"); var i, index = 0, n = img.length; if(1>=n) return; for(i=0; i<n; i++) img[i].style.display =i>0?"none":disp; var id = setInterval(function(){ img[index].style.display = "none"; index = ++index % n; img[index].style.display = disp; }, interval); } var i, div = document.getElementsByTagName("div"); for(i=0; i<div.length; i++) if(div[i].className.match(/\bchangeImage\b/)) changeImage(div[i]); }, false); この場合load後に実行されるため、最初に非表示にしておきたい画像が一瞬だけ表示される可能性があります。 それを避けたければ、対象の画像についてはCSSで最初にdisplay:noneを設定しておけば可能ですが、全部を非表示にしてしまうと、スクリプトがオフのユーザーの場合には画像が一切表示されなくなってしまいます。 これも防止するならば、CSSで一つだけ画像が表示される状態に初期設定しておくのがベストということになります。 上記のいずれの場合でも対応できるように、スクリプトでの表示/非表示はdisplay属性を明示的に設定するように変えてありますが、この結果、使用したい属性値を事前に設定しておく必要ができました。（サンプルではinlineになっています）
その他の回答 (3)
- babu_baboo
- ベストアンサー率51% (268/525)
こういうのは？ <!DOCTYPE html> <title></title> <body> <p> <img src="./img/0.gif?./img/1.gif" alt="" class="swapImage"> <img src="./img/2.gif?./img/3.gif" alt="" class="swapImage"> </p> <p> <img src="./img/0.gif?./img/1.gif" alt="" class="swapImage2"> <img src="./img/2.gif?./img/3.gif" alt="" class="swapImage2"> </p> <script type="application/javascript; version=1.8"> var ImageSwapper = (function (swp) function (cName, interval) setInterval ( function () Array.forEach (document.getElementsByClassName (cName), swp), interval)) (function (img) img.src = img.src.replace (/^(.+)\?(.+)$/, '$2?$1')); ImageSwapper ('swapImage', 1000); ImageSwapper ('swapImage2', 2000); </script>
補足
サンプルありがとうございます。 確認させていただきましたが、うまく動作いたしませんでした。 以下の作業をしました ・上記のスクリプトをhtmlファイルにコピー ・スクリプトの記述してあるファイルと同階層にimgフォルダに0～3.gifを作成 それだけでは動作しませんか？ 画像は表示されますが、とまったままです 何か注意点などございますか？ ※一応、</body></html>は付けてみました。
- fujillin
- ベストアンサー率61% (1594/2576)
#1です。 今見たらポカミスしてました。 for(i=0; i<n; i++) img[i].style.display = "none"; ↓↓ for(i=1; i<n; i++) img[i].style.display = "none"; ですね。
お礼
前記のものでも問題なく動作はしていましたが、何かまずいのですね？ ご丁寧にありがとうございました。修正いたしました。
- fujillin
- ベストアンサー率61% (1594/2576)
＞以下のように記述して、画像名を修正するだけでいいようにしたいですが可能でしょうか？ idを重複しないようにしておけば可能です。 idは一つの文書内では一意であることが原則です。また、title属性はツールチップに利用されるものなので、内容と実態が異なっているのが良いかどうか… ＞最初にも申しました通り、プログラムは変更したくないので、～ 逆に言えば、HTMLのマークアップだけ変えれば対応できるようになっていればよいものと解釈して… <div class="changeImage">～</div>内にある画像要素を順に表示するという機能のもののサンプルを。 （ご提示のサイトのものよりは長くなってしまいましたが…） 画像が2個なら交互に入替えとなりますし、複数個あれば順に表示されます。 （全角空白は半角に） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>sample</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <style type="text/css"> .changeImage img { width:50px; height:50px; } </style> </head> <body> <div class="changeImage"> <img src="images/new.png" alt=""> <img src="images/icon01.png" alt=""> </div> <div class="changeImage"> <img src="images/new.png" alt=""> <img src="images/icon02.png" alt=""> </div> <div class="changeImage"> <img src="images/new.png" alt=""> <img src="images/icon01.png" alt=""> <img src="images/icon02.png" alt=""> <img src="images/icon03.png" alt=""> </div> <script type="text/javascript"> <!-- (function(){ var interval = 1000; // 画像切替間隔（msec） var changeImage = function(elm){ var img = elm.getElementsByTagName("img"); var i, index = 0, n = img.length; if(1>=n) return; for(i=0; i<n; i++) img[i].style.display = "none"; var id = setInterval(function(){ img[index].style.display = "none"; index = ++index % n; img[index].style.display = ""; }, interval); } var i, div = document.getElementsByTagName("div"); for(i=0; i<div.length; i++) if(div[i].className.match(/\bchangeImage\b/)) changeImage(div[i]); })(); //--> </script> </body> </html> ＊ただし、スクリプトがオフの時はそのまま全部の画像が表示されます。
補足
＞（ご提示のサイトのものよりは長くなってしまいましたが…） 全く問題ございません サンプルありがとうございした 私の求めていたものそのものです 申し訳ありません、ちなみになんですが、もう1点教えていただけますか？ こちらのスクリプトはheader内に入れたり、外部ファイルにすると動作しないようなのですが、 必ず<div class="changeImage">～</div>の後に記述しなくてはなりませんか？
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/images/related_qa/c205_1_thumbnail_img_sm.png)
お礼
詳しくご説明いただきありがとうございます わからないことばかりではありますが勉強になります 確かに、最初のスクリプトですと画像が一瞬表示されていませんでした header内に入れるサンプルまでいただき本当にありがとうございます このようなスクリプトは全てご自分で記述されているのでしょうか？ すごいですね・・・ 少しお聞きするつもりが大変お手数おかけしました header内に入れるか外部ファイルにするかは検討させていただきます 助かりました ありがとうございました