画像名が変わっても、プログラムは変更しないで、html内のソースの画像名のみを変更するだけでいいようなjavascriptを探していたところ、下記のサイトを発見しました
◆画像を交互に入れ替える (title属性を利用して入れ替える)
http://www.openspc2.org/reibun/javascript2/image …
やりたいことは上記のものでいいのですが、1ページ内に、交互に入れ替わる画像を複数配置する場合は、どのようにしたらいいでしょうか?
上記のものですと、「photo01」をidに指定した画像1つしか動作しません。
最初にも申しました通り、プログラムは変更したくないので、できれば、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.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>の後に記述しなくてはなりませんか?
No.2
- 回答日時:
#1です。
今見たらポカミスしてました。
for(i=0; i<n; i++) img[i].style.display = "none";
↓↓
for(i=1; i<n; i++) img[i].style.display = "none";
ですね。
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>は付けてみました。
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になっています)
詳しくご説明いただきありがとうございます
わからないことばかりではありますが勉強になります
確かに、最初のスクリプトですと画像が一瞬表示されていませんでした
header内に入れるサンプルまでいただき本当にありがとうございます
このようなスクリプトは全てご自分で記述されているのでしょうか?
すごいですね・・・
少しお聞きするつもりが大変お手数おかけしました
header内に入れるか外部ファイルにするかは検討させていただきます
助かりました
ありがとうございました
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- PHP 共通の処理をまとめる方法がわからないのでアドバイスお願いします。 1 2022/12/19 20:20
- JavaScript 1日1回引けるJavaScriptおみくじについて 1 2022/12/12 22:28
- HTML・CSS 【HTML】【CSS】【Swiper】 元の画像は横1200×縦600なのですが、実際のサイト上に反 5 2022/07/16 13:57
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS PCサイズで赤い画像2つと、青い画像2つがそれぞれ横に2つずつ並んでいるのですが、これをスマホサイズ 5 2022/04/11 12:01
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- JavaScript clear機能を失わずにファイルアップロード機能を作成したい 3 2023/06/10 16:12
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
jQueryで同じクラス名のものを...
-
jQueryでのドラッグアンドドロ...
-
デフォルト非表示にしたい。【t...
-
clear機能を失わずにファイルア...
-
MAX関数を使ってからLEFT JOIN...
-
CSS のみのタブ切り替えについて
-
createElementで作成した要素を...
-
[急ぎ] videoタグで埋め込んだm...
-
jqueryで要素の中身を要素の外...
-
スクロール可能なチェックボックス
-
jspでcssが読み込めない
-
eclipseでcssを使うためには?
-
htmlの記述で link rel=styles...
-
アコーディオン自動開閉メニュ...
-
SimplyScrollについて
-
JQuery UIで、表示したタブの中...
-
divのheight指定で画面一杯に表...
-
【初心者】UWSCでjavascriptで...
-
チェックボックスに入っている...
-
jQueryアコーディオンで複数メ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
デフォルト非表示にしたい。【t...
-
jQueryで同じクラス名のものを...
-
Colorboxがうまく設置できません
-
Javascript初心者|jQueryの.va...
-
jQueryでのドラッグアンドドロ...
-
アップロードファイルの種類に...
-
embed要素のsrc属性の値を変更...
-
fancyboxのポップアップ時の画...
-
JQueryで画像の上で文字を動かす
-
一定時間で入れ替わるバナー画...
-
ボタンを押すたびに交互に切り...
-
交互に入れ替わる画像を複数配置
-
全部のサイコロをjavascriptで...
-
clear機能を失わずにファイルア...
-
JavaScriptが、Firefoxで動かな...
-
bxsliderで最初に縦に複数表示...
-
「画像クリックで音声再生」を ...
-
画像マウスオーバーで、checkb...
-
イラストのボタンを押したとき...
-
背景色と連動するスライドショ...
おすすめ情報