画像名が変わっても、プログラムは変更しないで、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添付画像のファイルはどんな状態のファイルなのでしょうか?クリってもエラ

添付画像のファイルはどんな状態のファイルなのでしょうか?クリってもエラーしか出た事がないのですが

Aベストアンサー

他の回答者様の記入通り、拡張子が無い事には判断出来ません。
また、クリックしてもエラーとありますが、webから探すとか出ませんか?
憶測ですが、多分質問者様のPCにこのファイルを開くアプリケーションが
インストールされていないのではないかな?って思います。
参考までに
よくありがちなのは、XPで作ったエクセルファイル等(逆だったかな^^;)を
ビスタのPCで見ると似たようなアイコンになります。
オフィスの互換パックをインストールすると見れます。

Qボタンを押すたびに交互に切り替わる背景画像

初めて質問させていただきます。
ボタンを押すたびに、押したボタンの背景画像を交互に切り替わせるにはどうすればいいでしょうか?
例えば×と○の画像があったとします。
○が背景だった場合、クリックすると×に、
×が背景だった場合、クリックすると○になるという物です。
初心者の為、詳しく教えてください。お願いします。

Aベストアンサー

画像ファイルを入れておく変数は、配列変数にした方がよろしいかと。
かつ、Imageオブジェクトにしておくとメモリ上に画像データが読み込まれますので瞬時に表示されます。(メモリを使うのでメモリリークに注意。)
また、HTML側でonclickとしないでスクリプトの中でやってしまった方が無難です。
--------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
 <head>
  <meta http-equiv='Content-Type' content='text/html; charset=Shift_JIS'>
  <meta http-equiv='Content-Style-Type' content='text/css'>
  <meta http-equiv='Content-Script-Type' content='text/javascript'>
  <script type='text/javascript'>
   //@cc_on
   window./*@if (@_jscript) attachEvent( 'on'+ @else@*/addEventListener( /*@end@*/ 'load', function ()
   {
     var arrImgs = [], imgIdx = 0, imgLen, objBtn;
     (arrImgs[0] = new Image()).src = 'images/A.jpg';
     (arrImgs[1] = new Image()).src = 'images/B.jpg';
     imgLen = arrImgs.length; // 毎回arrImgs.lengthを取得していると遅くなるので、最初に取得しておく。
     objBtn = document.getElementById( 'id-btn' );
     objBtn && objBtn./*@if (@_jscript) attachEvent( 'on'+ @else@*/addEventListener( /*@end@*/ 'click', function ()
     {
       // 毎回、button要素を取得しなおしている。
       if( (objBtn = document.getElementById( 'id-btn' )) )
       {
         imgIdx = ( imgIdx + 1 ) % imgLen;
         objBtn.style.backgroundImage = 'url(' + arrImgs[imgIdx].src + ')';
       }
     }, false );
   }, false );
  </script>
  <style type='text/css'>
   input#id-btn{
     background-image : url(images/A.jpg);
   }
  </style>
 </head>
 <body>
  <div>
   <input type='button' id='id-btn' value='背景画像チェンジ'>
  </div>
 </body>
</html>
--------------------------------------------------------------
毎回、button要素を取得しなおしているのは、
万が一、他のスクリプトで(動的に)input要素が削除されたりした場合などを考慮してのこと。
input要素じゃなくても、その親要素に対してなんらかの操作がされる場合もあるかもしれない。
まぁ、そんなことないと思うけど…。
(あんまり、変数objBtnをイベントの中で使うのはしたくなかったが、しちゃった。あまり、よろしくない使い方かもしれません。)

ちなみに、ボタンの背景を変更する場合、IE7では上記のソースではうまくできなかった。
一応buttonタグならIE7でもできるみたいです。
buttonタグはオススメできないけど。
<input type='image'>は送信ボタン扱いっぽいし…。
--------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
  <script type='text/javascript'>
   //@cc_on
   window./*@if (@_jscript) attachEvent( 'on'+ @else@*/addEventListener( /*@end@*/ 'load', function ()
   {
     var arrImgs = [], imgIdx = 0, imgLen, objBtn;
     (arrImgs[0] = new Image()).src = 'images/A.jpg';
     (arrImgs[1] = new Image()).src = 'images/B.jpg';
     imgLen = arrImgs.length; // 毎回arrImgs.lengthを取得していると遅くなるので、最初に取得しておく。
     objBtn = document.getElementById( 'id-btn' );
     objBtn && objBtn./*@if (@_jscript) attachEvent( 'on'+ @else@*/addEventListener( /*@end@*/ 'click', function ()
     {
       var cobj;
       // 毎回、button要素を取得しなおしている。
       if( (objBtn = document.getElementById( 'id-btn' )) )
       {
         if( !(cobj = objBtn.childNodes[0]) ) return; // div
         if( !(cobj = cobj.childNodes[0]) ) return; // div
         if( !(cobj = cobj.childNodes[0]) ) return; // img
         imgIdx = ( imgIdx + 1 ) % imgLen;
         cobj.src = arrImgs[imgIdx].src;
       }
     }, false );
   }, false );
  </script>
  <style type='text/css'>
   button#id-btn
   {
     width : 100px;
     height : 20px;
   }
   button#id-btn div
   {
     position : relative;
     width : 100px;
     height : 20px;
     cursor : default;
   }
   button#id-btn div div
   {
     position : absolute;
     left : 0px;
     top : 0px;
   }
   button#id-btn div div img
   {
     position : absolute;
     left : 0px;
     top : 0px;
     width : 94px;
     height : 14px;
   }
  </style>
</head>
<body>
 <div>
  <button id='id-btn'><div><div><img src='images/A.jpg'></div><div>画像チェンジ</div></div></button>
 </div>
</body>
</html>
--------------------------------------------------------------
ちなみに、動作確認はしていないです。

個人的にはtype='image'もbuttonも一度も使ったことがない。
そもそもボタンに画像を使うより、
imgタグをボタン代わりとして使ったほうがいいのではないかと思う。
この方がどのブラウザでもできるはずだし。

画像ファイルを入れておく変数は、配列変数にした方がよろしいかと。
かつ、Imageオブジェクトにしておくとメモリ上に画像データが読み込まれますので瞬時に表示されます。(メモリを使うのでメモリリークに注意。)
また、HTML側でonclickとしないでスクリプトの中でやってしまった方が無難です。
--------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
 <head>
 ...続きを読む

Q右クリで画像保存が出ない!

画像を取りたくて矢印を画像に置くと!手のマークに代わり!右クリができなくなりました。
どうしたらよいのでしょうか?

Aベストアンサー

最近のサイトでは著作権の問題もあり、勝手に保存ができないように右クリックができないように設定しいるところが多くなっているであります。法律に抵触する場合もあるであります。

方法としては、色々あるでありますが、ただ見えてる画像が欲しいのであれば、プリントスクリーンでPC画面全体をコピーして、ペイントソフトにペースト、余分な部分を削除して保存すればいいと思うであります。

プリントスクリーンはググってほしいであります。

Q始めに読み込む画像を固定して、画像クリックで複数登録してある画像にラン

始めに読み込む画像を固定して、画像クリックで複数登録してある画像にランダムで切り替える方法

当方HTML+CSSは習得していますがJAVAの知識は殆どありません。

ページ内で画像を使った占いのようなコンテンツを作りたいのですが、画像ランダム切り替えのスクリプトにページをリロードしたときにしか表示されない扉画像を付けたいのと思っています。扉画像ををクリックすると「占い結果」画像が表示される、といった具合です。また、「占い結果」画像をさらにクリックすることでまた別画像に切り替えるようにしたいのですが、どなたか教えてください。

Aベストアンサー

サンプルです。(画像切り替えにアニメーション効果付けてます。)

HTML-ヘッダ内
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="sample.js"></script>

HTML-BODY内(imgにidを付けておく)
<img src="扉絵のURI" id="fortune" alt="" width="~" height="~">

sample.js
$(function(){
var imglist = new Array(
'画像AのURI',
'画像BのURI',
~略~
'画像XのURI'
);
var fadeOutTime = 200; // 単位:ミリ秒
var fadeInTime = 600; // 単位:ミリ秒

for(var i=0;imglist[i];i++) $('<img src="'+imglist[i]+'">');
$('#fortune').click(function(){
var no = Math.floor( Math.random() * (imglist.length));
$(this).animate({opacity:0.1},fadeOutTime,function(){
$(this).attr('src',imglist[no])
.animate({opacity:1},fadeInTime);
});
});
});

サンプルです。(画像切り替えにアニメーション効果付けてます。)

HTML-ヘッダ内
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="sample.js"></script>

HTML-BODY内(imgにidを付けておく)
<img src="扉絵のURI" id="fortune" alt="" width="~" height="~">

sample.js
$(function(){
var imglist = new Array(
'画像AのURI',
'画像BのURI',
~略~
'画像XのURI'
);
var fadeOutTime = 200; // 単...続きを読む

Q 友近さんの画像を探しています。本当にいい人で、美人で、セクシーだと思

 友近さんの画像を探しています。本当にいい人で、美人で、セクシーだと思います。着衣・水着・スカート、なんでもOKです(あまり小さいサイズじゃない方がよいです)。どうぞよろしくお願いします。

Aベストアンサー

こちらに数点ありました。
http://bsearch.goo.ne.jp/image.php?UI=web&TAB=web&STYPE=0&CC=1&SCRDEF=0&IMGST=0&IMGSZ=0&IMGC=3&IMGFT=0&IMGFT=1&IMGFT=2&IMGFT=3&MOVPT=0&MOVFT=0&MOVFT=1&MOVFT=2&MOVFT=3&AUDPT=0&NSDP=1&KWDP=1&DC=20&FR=1&SM=mc&OCR=1&SITE=&SITE2=&SITE3=&SITE4=&SITE5=&SITEH=&AUDST=0&AUDMST=0&MOVTHN=0&QGR=1&MOVSC=0&NOJSB=0&QGA=1&NOJS=0&AUDSITE=0&MT=%CD%A7%B6%E1&button=%B2%E8%C1%FC%B8%A1%BA%F7
画像を使用される場合は自己責任でお願いします。

Q複数の画像ボタンから複数の画面に遷移

javascript、struts初心者です。
画像ボタンAをクリックするとA.doに
画像ボタンBをクリックするとB.doに遷移するようにしたくて、以下のように書いたのですが、動きません。
【JSP】
<html:form action="/chksubmit" method="get">

<html:hidden property="submitdata" value=""/>
<html:image src="../image/aaa.gif" onclick="func_submit('aaa')"/>
<html:image src="../image/bbb.gif" onclick="func_submit('bbb')"/>

</html:form>

【javascript】
function func_submit(id)
{
submitdata.value = id;
}
DispatchActionを使って、submitdataの値を見て遷移先を決めるやり方です。
submitdataに値が入ってくれないため、「そんなメソッドがないよ!」とエラーになります。
どうしてsubmitdataに値がはいってくれないのでしょうか?どなたかご教授お願いします。

javascript、struts初心者です。
画像ボタンAをクリックするとA.doに
画像ボタンBをクリックするとB.doに遷移するようにしたくて、以下のように書いたのですが、動きません。
【JSP】
<html:form action="/chksubmit" method="get">

<html:hidden property="submitdata" value=""/>
<html:image src="../image/aaa.gif" onclick="func_submit('aaa')"/>
<html:image src="../image/bbb.gif" onclick="func_submit('bbb')"/>

</html:form>

【javascript】
function func_submit(id)
{
submitdata.value = id;
}
...続きを読む

Aベストアンサー

JSPのことはJAVAのカテゴリで聞いたほうがいいかもしれませんよ。
javascripterがJAVAも理解しているケースは低いかも。

javascriptはある程度わかるつもりですが、
私自身質問者さんのソースの意味がわかりません。

Q●「美人アプリ」の画像を保存したい!

●「美人アプリ」というアプリを使用しています。

●ここで表示される画像を保存したいのですが、方法がわかりません。可能かどうかも。。

●もし、方法をご存知の方がいらっしゃいましたら教えていただけませんか?おねがいします。

Aベストアンサー

保存したい画像を表示させて、↓の方法で画面をキャプチャすると、写真アルバムから見れます。
http://blog.livedoor.jp/sakusakupocky/archives/50263981.html

QFile API で複数画像を複数回に分けて選択

HTML5から追加されたFile APIでハマってしまったので質問させてください。

FileAPIで、複数画像を複数回に分けて選択するための機能を作っているのですが、うまくいきません。
1回目の選択は問題ないのですが、2回目にファイル選択をすると、1回目に選択したファイルに上書きされる形でpostされてしまい、データを受け取ることができません。

過去に同じようなものを作ったことがある方がいらっしゃいましたらご教授願いたいです。
よろしくお願いします。

Aベストアンサー

ちょっと気になったのですが、間違えて選択しても取り消さないという仕様でよろしいのでしょうか?

複数の画像選択ボタンを配置するという発想ではいかがしょうか。
複数回目は動的に表示するという感じで。

Q右クリ禁止のサイトの画像を保存

質問の通りなのですが右クリック禁止のサイトの画像を保存できるようにする方法はないでしょうか?あと、よく海外でおもしろ動画とかを見せてるサイトがありますが、そういった動画を保存する方法はありますか?重ねて質問すいません^^;

Aベストアンサー

そのサイトを見ないとなんとも言えませんが、
JAVAをオフにしてみると右クリック禁止がはずれる事もあります。

それで駄目ならば、プリントスクリーンを取って画像を修正してください。
まぁ画像を持ち出されたくないサイトならばあまり持ち出さないほうがよろしいかと思います。

ちなみに動画を保存する場合は専用のソフトなどが必要。

Qhtmlソースの書き換え

UWSCで自動的にvalueに値を入れるように、以下のようなスクリプトを書いております。

IE.Document.All["hogehoge"].value = "hogehogehoge"

通常これで問題ないのですが、
参照ソースが<input name="hogehoge">で完結しており、
valueが存在しない為に値を入力する事が出来ません。
たしかjavascriptを使用して参照ソースを
<input name="hogehoge" value="">に書き換えれば
値を入力する事が出来たと思うのですが、
どのようにすればよろしいでしょうか。

すみませんが、どなたか良い方法をお教えいただけないでしょうか。

Aベストアンサー

失礼しました。よく見ると
IE.Document.All
IEの後ろに . がありますね。javascriptのお話しじゃなかったのですね。
UWSCですか、ちょっと見てみましたが、VBAなんかでIEを操作するのと同じように、
IEオブジェクトを使って、テキストボックスに値セットするんじゃ出来ないんで
しょうか、↓のフォームに値をセットの例を見つけましたが。

http://www.confrage.com/uwsc/ie/iesetdata/iesetdata.html


人気Q&Aランキング