アプリ版：「スタンプのみでお礼する」機能のリリースについて

交互に入れ替わる画像を複数配置

解決済

  • 質問者：maimai0629
  • 質問日時：
  • 回答数：4件

画像名が変わっても、プログラムは変更しないで、html内のソースの画像名のみを変更するだけでいいようなjavascriptを探していたところ、下記のサイトを発見しました

◆画像を交互に入れ替える (title属性を利用して入れ替える)
http://www.openspc2.org/reibun/javascript2/image …

やりたいことは上記のものでいいのですが、1ページ内に、交互に入れ替わる画像を複数配置する場合は、どのようにしたらいいでしょうか？
上記のものですと、「photo01」をidに指定した画像１つしか動作しません。

最初にも申しました通り、プログラムは変更したくないので、できれば、1つのIDで画像名を変更するだけにしたいのですが・・・

以下のように記述して、画像名を修正するだけでいいようにしたいですが可能でしょうか？

<img src="images/new.png" width="10" height="10" alt="" id="photo01" title="images/icon01.png">
<img src="images/new.png" width="10" height="10" alt="" id="photo01" title="images/icon02.png">
<img src="images/new.png" width="10" height="10" alt="" id="photo01" title="images/icon03.png">

よろしくお願い致します

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (4件)

No.4ベストアンサー

  • 回答者： fujillin
  • 回答日時：

#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になっています）
    • good
    • 0
    • 件
通報する
この回答へのお礼

詳しくご説明いただきありがとうございます
わからないことばかりではありますが勉強になります
確かに、最初のスクリプトですと画像が一瞬表示されていませんでした

header内に入れるサンプルまでいただき本当にありがとうございます
このようなスクリプトは全てご自分で記述されているのでしょうか？
すごいですね・・・
少しお聞きするつもりが大変お手数おかけしました
header内に入れるか外部ファイルにするかは検討させていただきます
助かりました
ありがとうございました

通報する
お礼日時：2011/04/14 21:28

No.3

  • 回答者： babu_baboo
  • 回答日時：

こういうのは？



<!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>は付けてみました。

補足日時：2011/04/14 21:12
通報する
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： fujillin
  • 回答日時：

#1です。



今見たらポカミスしてました。

　for(i=0; i<n; i++) img[i].style.display = "none";
　　　　　　　　　　↓↓
　for(i=1; i<n; i++) img[i].style.display = "none";

ですね。
    • good
    • 0
    • 件
通報する
この回答へのお礼

前記のものでも問題なく動作はしていましたが、何かまずいのですね？
ご丁寧にありがとうございました。修正いたしました。

通報する
お礼日時：2011/04/13 15:40

No.1

  • 回答者： fujillin
  • 回答日時：

＞以下のように記述して、画像名を修正するだけでいいようにしたいですが可能でしょうか？


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>の後に記述しなくてはなりませんか？

補足日時：2011/04/13 15:36
通報する
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報