ウォッチ
画像名が変わっても、プログラムは変更しないで、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">
よろしくお願い致します
No.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になっています）
-
-
- 0
- 件
-
詳しくご説明いただきありがとうございます
わからないことばかりではありますが勉強になります
確かに、最初のスクリプトですと画像が一瞬表示されていませんでした
header内に入れるサンプルまでいただき本当にありがとうございます
このようなスクリプトは全てご自分で記述されているのでしょうか？
すごいですね・・・
少しお聞きするつもりが大変お手数おかけしました
header内に入れるか外部ファイルにするかは検討させていただきます
助かりました
ありがとうございました
No.3
- 回答日時：
こういうのは？
<!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>は付けてみました。
-
-
- 0
- 件
-
No.1
- 回答日時：
＞以下のように記述して、画像名を修正するだけでいいようにしたいですが可能でしょうか？
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>の後に記述しなくてはなりませんか？
-
-
- 0
- 件
-
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
Outlookのアカウントがあるとメ...
-
jsonテキストデータの並び替え...
-
jsで、配列内の文章を改行する...
-
タグを教えてください。
-
ラジオボタンを複数選択したと...
-
jsで質問です。 formをsubmitし...
-
2025年相性がいい人のサイトの...
-
CookieをWebStoeageに変える
-
Adobe acrobat proでフォームを...
-
jqueryのselect2で検索欄の文字...
-
＜tr＞指定した表の行要素をボ...
-
食材の期限を管理するためにGAS...
-
ビデオのJSについて
-
鍵盤アプリで、スマホの画面に...
-
<div>のタッチ状態を維持したま...
-
jQueryでシンセサイザーを作っ...
-
プログラミング 学習
-
HTMLでサブフレームから親のス...
-
ジャバスクリプトについて。
-
プログラムについて。
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
bxsliderで最初に縦に複数表示...
-
Javascript初心者｜jQueryの.va...
-
jQueryでのドラッグアンドドロ...
-
アップロードファイルの種類に...
-
昔作ったHPのjavascritがグーグ...
-
パララックスについて 上下に...
-
Javascriptのエラーに悩まされ...
-
デフォルト非表示にしたい。【t...
-
JavaScriptでサイコロのような...
-
jQueryで同じクラス名のものを...
-
交互に入れ替わる画像を複数配置
-
JavaScriptでの画像切り替えを...
-
fancyboxのポップアップ時の画...
-
スワップイメージのフェード方...
-
「画像クリックで音声再生」を ...
-
透過PNGをIE6へ、かつYoutubeの...
-
embed要素のsrc属性の値を変更...
-
jQueryでスマホ向けページのロ...
-
ｊQueryで表示している所をsubm...
-
onMouseoverについて教えてくだ...
おすすめ情報
