ID登録せずに、無料で質問できる♪ 教えて!gooアプリ>>

画像名が変わっても、プログラムは変更しないで、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">

よろしくお願い致します

このQ&Aに関連する最新のQ&A

A 回答 (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になっています)
    • good
    • 0
この回答へのお礼

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

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

お礼日時:2011/04/14 21:28

こういうのは?



<!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

#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

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


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に関連する人気のQ&A

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

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Q画像イメージの上下左右、欲しいところに好きな間隔を入れられますか?

こんにちは。タイトルの通りサイト作成で、
画像の上下左右、好きな方向に間隔を入れられるかその方法をお教えください。

参考までに、DreamWeaver(ドリームウィーバー)2004MXです。

画像とテキストの兼ね合いで、画像の右側や左側に、
ところどころで間隔が欲しいと思っています。

間隔をいじれるところといえば縦間隔、横間隔になりますが、
縦間隔なら「上」と「下」、横間隔なら「右」と「左」、
これらが一度に動いてしまうのです。
片方には確かに欲しい間隔が得られるのですが、
ほう片方に要らない間隔ができてしまい困っています。

例えば右だけに間隔が欲しい。
左だけに間隔が欲しい。

こういう場合って、何かやり方があるのでしょうか。

もともと余白込みの画像を用意するという手も講じましたが、
その場合はその場合で、その画像が他のレイアウトに流用しづらい
という弱点を生んでしまい、レイアウトごとに画像を用意しなければならないので
対症療法としてはうまくいきませんでした。

また、画像ごとにセルを用意して任意の余白を作り出す手もありましたが、
セルがあまりにも絡まりあってしまい、
かなりぐちゃぐちゃなものになるためうまくいきませんでした。

やはりもうちょっと詳しい方にお訊きしようと思いまして
質問を立てさせていただきました。
素人質問で大変申し訳ありません。
どうぞ宜しくお願いいたします。

こんにちは。タイトルの通りサイト作成で、
画像の上下左右、好きな方向に間隔を入れられるかその方法をお教えください。

参考までに、DreamWeaver(ドリームウィーバー)2004MXです。

画像とテキストの兼ね合いで、画像の右側や左側に、
ところどころで間隔が欲しいと思っています。

間隔をいじれるところといえば縦間隔、横間隔になりますが、
縦間隔なら「上」と「下」、横間隔なら「右」と「左」、
これらが一度に動いてしまうのです。
片方には確かに欲しい間隔が得られるのですが、
ほう片方...続きを読む

Aベストアンサー

HTMLの初歩です。具体的には、
-------------------------------------------
<img src="○○.gif" width="100" height="100" alt="*"
style="margin: 10px 20px 0 30px;">

上10px 右20px 下0 左30px の四方の隙間が開く。
数値は例なので適当に変更を。
-------------------------------------------

<img src="○○.gif" width="100" height="100" alt="*"
style="margin: 5px 20px;">
上下5px 右右20px の2方の隙間が開く。

Qテーブル内の文字サイズを変更したい。

HTMLのテーブル内の文字サイズを変更したいのですが。
イマイチ上手くいかずに悩んでいます。
出来れば全体的に<TABLE></TABLE>のほうでいじれますか?
<TD>タグや<TR>タグのところでいじくるのですか?

Aベストアンサー

いろいろやり方はありますが
文字単位でサイズを変更するには
#2の方法ですね。

テーブルごとやセル(<TD>)ごとにサイズを変更するには
スタイルシート(CSS)を使用します。

テーブルごとにサイズを変更する場合
<TABLE style="font-size : 20px;">

セル(<TD>)ごとにサイズを変更する場合
<TD style="font-size : 20px;">あああ</TD>

#1の方法だとページ内の全てのセル(<TD>)に設定することになります。

スタイルシート(CSS)はこれら以外にも
いろいろな設定方法があります。

Qtable を使用せずに、画像とテキストを同じ行に配置

table タグを使用せずに、画像とテキストを交互に同じ行に配置するようなことはできますでしょうか?

例えばこのような感じです。

画像画像 テキスト 画像画像 テキスト 画像画像 テキスト
画像画像 テキスト 画像画像 テキスト 画像画像 テキスト
画像画像 テキスト 画像画像 テキスト 画像画像 テキスト

方法をご存知の方おられましたれらよろしくお願いいたします。 

Aベストアンサー

floatを使うときは横幅も必要です。
画面の横幅が合計に足りないと折り返されますけど。
下記は横幅が全部同じと考えた場合。違うならそれぞれにclassをつけるとか。
No.1さんのソース流用させていただきます。
<style type="text/css">
<!--
.box {
float: left; width:100px;
}
.box2 {
clear: both;
}
-->
HTML部分
<div class="box"><img src="***" alt=""></div>
<div class="box">テキストテキスト<br>テキストテキスト</div>
<div class="box"><img src="***" alt=""></div>
<div class="box">テキストテキスト<br>テキストテキスト</div>
<div class="box"><img src="***" alt=""></div>
<div class="box">テキストテキスト<br>テキストテキスト</div>
<div class="box2"><p>以下回り込みを解除して下から続きます。</p></div>

floatを使うときは横幅も必要です。
画面の横幅が合計に足りないと折り返されますけど。
下記は横幅が全部同じと考えた場合。違うならそれぞれにclassをつけるとか。
No.1さんのソース流用させていただきます。
<style type="text/css">
<!--
.box {
float: left; width:100px;
}
.box2 {
clear: both;
}
-->
HTML部分
<div class="box"><img src="***" alt=""></div>
<div class="box">テキストテキスト<br>テキストテキスト</div>
<div class="box"><img src="***" alt=""></div>
<div c...続きを読む

Qonclickで2個指定するには?

例えば、下記のような二つの指定があるします。

function checkd1(){
document.FORM.CHECK1.checked=true
}
function checkd2(){
document.write("テスト");
}

これをonclickで二つとも指定するということはできるのでしょうか?

<a href="#" onclick="checkd1()">ボタン</a>
<a href="#" onclick="checkd2()">ボタン2</a>

を<a href="#" onclick="checkd1(),checkd2()">ボタン</a>としても動いてくれないので、書き直すのではなく、このまま二つを指定したいのですが、どうすればよいのでしょうか?

Aベストアンサー

><a href="#" onclick="checkd1(),checkd2()">ボタン</a>

<a href="#" onclick="checkd1();checkd2()">ボタン</a>

おしいですね。
, ではなく ; なら両方の関数が呼ばれると思います。
(Firefox3とIE6で確認しました。)

なぜ ; かと言うと、
Javascriptの文法で、文の区切りは ; だからですね。

QjQueryのアコーディオンメニューで、他をクリックした際に自動で閉めたい。

JavaScript、CSS初心者のものです。
今回、jQueryのアコーディオンメニューを使用しているのですが、現状ではクリックするとメニューはうまく開くのですが、他をクリックした際にはじめにクリックした箇所が開いたままになってしまいます。
これを自動で閉じ、常に最新のクリックしたメニューのみ表示するにはどうすればよいのでしょうか?
お手数ですが、ご教示お願いします。

以下ソースを載せておきます。

◆javascript◆
<script type="text/javascript">
$(function()
{
$("#simpleAccordion div").hide();
$("#simpleAccordion h2").each(function(i)
{
var elementVal = $(this).next("div");

$(this).click(function()
{
elementVal.toggle("fast");
});
});
});
</script>

◆HTML◆
<div id="simpleAccordion">
 <h1>画像の箇所</h1>
 <h2><a href="#">クリックする箇所</a></h2>
 <div>クリックされると開く箇所</div>
 <h2><a href="#">クリックする箇所</a></h2>
 <div>クリックされると開く箇所</div>
</div>

JavaScript、CSS初心者のものです。
今回、jQueryのアコーディオンメニューを使用しているのですが、現状ではクリックするとメニューはうまく開くのですが、他をクリックした際にはじめにクリックした箇所が開いたままになってしまいます。
これを自動で閉じ、常に最新のクリックしたメニューのみ表示するにはどうすればよいのでしょうか?
お手数ですが、ご教示お願いします。

以下ソースを載せておきます。

◆javascript◆
<script type="text/javascript">
$(function()
{
$("#simpleAccordion div"...続きを読む

Aベストアンサー

#1です。

最初の1行目で、サブメニューを閉じて(=非表示にする)いるので、それをコピペすればよいだけでは?
自作ではなかったのかな?

$(function()
{
$("#simpleAccordion div").hide();
$("#simpleAccordion h2").each(function(i)
{
var elementVal = $(this).next("div");

$(this).click(function()
{
$("#simpleAccordion div").hide(); //←1行追加
elementVal.toggle("fast");
});
});
});
(これだと、トグルでクリックして閉じるようにはならないので、トグルを生かしたいのなら、自分以外を閉じるようにする必要あり)


ついでにちょっとだけコンパクトにして、不用のiを削除すれば

$(function() {
$("#simpleAccordion div").hide();
$("#simpleAccordion h2").each(function() {
$(this).click(function() {
$("#simpleAccordion div").hide();
$(this).next("div").toggle("fast");
});
});
});

#1です。

最初の1行目で、サブメニューを閉じて(=非表示にする)いるので、それをコピペすればよいだけでは?
自作ではなかったのかな?

$(function()
{
$("#simpleAccordion div").hide();
$("#simpleAccordion h2").each(function(i)
{
var elementVal = $(this).next("div");

$(this).click(function()
{
$("#simpleAccordion div").hide(); //←1行追加
elementVal.toggle("fast");
});
});
});
(これだと、トグルでクリックして閉じるようにはならないので、トグルを生かしたいのなら...続きを読む

Qボタンを横に並べて表示させる方法

<input type="button"> ←このボタンを、並べて表示させるにはどうしたら良いでしょうか? (tableは使わない方法で) よろしくお願いいたします

Aベストアンサー

ソースをください。

inputはインライン要素なので改行は入らないです。


人気Q&Aランキング