みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

画像等の切り替えパターンがランダムにならないのですが。

うまく書けなくて申し訳ないのですが。
ボタンをクリックして画像を切り替えるとき
filterのrevealTransでtransition=23を指定して、ランダムな切り替えパターンを使いたいのですが、
durationが同じ時間だと切り替えパターンがランダムになりません。
durationの時間を乱数などで変えても、同じfunctionで処理すると切り替えパターンがランダムになりません。
ボタン「絵4」を実行すると、その直後だけはパターンが切り替わりますが、後は同じパターンの繰り返しとなります。
下の例でfunction「flt1」ひとつだけで処理して切り替えパターンがランダムになるようにするにはどうすれば
よいのでしょうか?


<html>
<head></head>

<script language="JavaScript"> <!--
function flt1(name00){
img1.style.filter="revealTrans(duration=1.500,transition=23)";
img1.filters[0].Apply();
img1.src=name00;
img1.filters[0].Play();
}

function flt2(name01){
img1.style.filter="revealTrans(duration=1.501,transition=23)";
img1.filters[0].Apply();
img1.src=name01;
img1.filters[0].Play();
} //-->
</script>

<body bgcolor="#FFFFCC" text="#000000" >
<center><img id=img1 src="絵0.JPG" width="60%"></center>

<form name="fm">
<table align="center" border=1 bgcolor="#FFFFCC">
<tr> <td colspan=2 align="right"> <input type="button" value="絵1" onClick="flt1('絵1.jpg')"> </td>
<td colspan=2 align="right"> <input type="button" value="絵2" onClick="flt1('絵2.jpg')"> </td>
<td colspan=2 align="right"> <input type="button" value="絵3" onClick="flt1('絵3.jpg')"> </td>
<td colspan=2 align="right"> <input type="button" value="絵4" onClick="flt2('絵4.jpg')"> </td>
</tr>
</table>
</form>

</body>
</html>

投稿日時 - 2008-02-18 09:26:03

QNo.3786377

困ってます

質問者が選んだベストアンサー

こんにちは

>でも、本来は、こんなことしなくても
>transition=23
>で、ランダムになるのではないんですかね?

はい。実際にはそうです
がこれはloadしたり切り替えたりしたときにランダムで表示方法を変えるので質問のように1.500→1.500、23→23ではstyle内はそのままなのでload時(もしくは1回目の表示)に選択された表示方法がそのまま継承されています
※ボタン4を押したら表示方法が変わるのはstyleを変更しているからです
なので>durationの時間を乱数などで変えても・・・の場合だとできてるはずなんですけどね(--;)

質問のものをそのまま使うということでしたら一旦23を切り替えてもう一度23に切り替えればできます

function flt1(name00){
img1.style.filter="";
img1.style.filter="revealTrans(duration=1.500,transition=23)";
・・・

一応filterはIE専用なので前回ので未対応用にもしていますので適当に(?)調整してください

投稿日時 - 2008-02-18 13:11:26

お礼

勉強になりました。
どうもありがとうございます。
今後ともよろしくお願いします。

投稿日時 - 2008-02-18 13:16:16

このQ&Aは役に立ちましたか?

1人が「このQ&Aが役に立った」と投票しています

回答(5)

ANo.5

皆様のご指摘で大変勉強させていただき有難うございました。

さて、問い合わせの中で次の点には触れられていないようです。

>>> function「flt1」ひとつだけで処理して切り替えパターンがランダムになるようにするにはどうすればよいのでしょうか?

この原因としては、
・ フィルタ自身は実行されている。
・ このとき、前画像と次の画像が同じである。
が考えられます。見た目には変化がわからないということです。

そこで、呼び出す度に必ず画像を変化させることにしました。

以下に例を示します。(変化する画像に"絵0.jpg"は含めていません)

--------------------------------------------------------------------------
<html>
<head>
<script language="JavaScript"> <!--
var i_index=-1;

var arrImgs = [ '絵1.jpg', '絵2.jpg', '絵3.jpg', '絵4.jpg' ];
var tmp;
for (j=0; j<arrImgs.length ;j++){
tmp = new Image(); tmp.src = arrImgs[j]; arrImgs[j] = tmp;
}

function flt1(){
img1.style.filter="";
img1.style.filter="revealTrans(duration=1.500,transition=23)";
img1.filters[0].Apply();
img1.src=arrImgs[getGazou()].src;
img1.filters[0].Play();
}

function getGazou(){
var i= Math.floor(Math.random()*arrImgs.length);
if ( i==i_index ) {
if (i_index==arrImgs.length-1) {
i=0;
} else {
i++;
}
}
i_index=i;
return i
}
//-->
</script>
</head>

<body bgcolor="#FFFFCC" text="#000000">
<center>
<img id="img1" src="絵0.jpg" width="60%">
</center>

<form name="fm">
<table align="center" border=1 bgcolor="#FFFFCC">
<tr>
<td colspan=2 align="right">
<input type="button" value="絵のランダム切り替え(フィルタ付)" onClick="flt1()">
</td>
</tr>
</table>
</form>
</body>
</html>

投稿日時 - 2008-02-20 02:59:09

ANo.4

画像は配列で用意しておき、かつ、Imageオブジェクトに読み込ませておくとよいです。(メモリリークに注意)
なので
var arrImgs = [ '絵1.jpg', '絵2.jpg', '絵3.jpg', '絵4.jpg' ];
var tmp;
tmp = new Image(); tmp.src = arrImgs[0]; arrImgs[0] = tmp;
tmp = new Image(); tmp.src = arrImgs[1]; arrImgs[1] = tmp;
tmp = new Image(); tmp.src = arrImgs[2]; arrImgs[2] = tmp;
tmp = new Image(); tmp.src = arrImgs[3]; arrImgs[3] = tmp;
とすると、arrImgs配列の各要素には、絵1~4のImageオブジェクトが格納されます。
Imageオブジェクトにしておくと、自身のコンピュータに画像データが読み込まれますので
画像入れ替え時にロードを待たずに瞬時に次の画像へと移行できます。

-------------------------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang='ja'>

 <head>
  <title></title>
  <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
  <meta http-equiv="Content-Script-Type" content="text/javascript">

  <script type="text/javascript">
   ( function ( toImageObject, clickEvent, initialize )
   {
     var arrImgs = [
       'images/A.jpg',
       'images/B.jpg',
       'images/C.jpg',
       'images/D.jpg'
     ];
     toImageObject( arrImgs ); // Imageオブジェクトに変換
     clickEvent = clickEvent( arrImgs );
     initialize = initialize( clickEvent );
     // onload
     window.attachEvent( 'onload', initialize, false );
   } )(
     // Imageオブジェクトに変換
     function ( arr )
     {
       var i, I, tmp;
       for( i=0,I=arr.length; i<I; i++ )
       {
         (tmp = new Image()).src = arr[i];
         arr[i] = tmp;
       }
       // destroy
       i = I = tmp = arr = null;
     },
     // クリックイベント
     function ( arrImgs )
     {
       var _regexp = { id : /^id-button-([0-9]+)$/ };
       return function ( evt )
       {
         var objInput, objImg, ret, idx;

         objImg = document.getElementById( 'id-img' );
         if( ! objImg ) return;
         objInput = evt.srcElement || evt.target;

         if( (ret = objInput.id.match( _regexp.id )) )
         {
           idx = ret[1] - 0;
           objImg.filters[0].Apply();
           objImg.filters[0].duration  = 1.5;
           objImg.filters[0].transition = 23;
           objImg.src = arrImgs[idx].src;
           objImg.filters[0].Play();
         }
         // destroy
         evt = objInput = objImg = ret = idx = null;
       }
     },
     // ロード時に実行される関数
     function ( clickEvent )
     {
       return function ()
       {
         var i, obj;
         // まず、img要素に revealTrans をつける
         obj = document.getElementById( 'id-img' );
         if( ! obj ) return;
         obj.style.filter = 'revealTrans()';
         // input要素にイベントをつける
         for( i=0; ;i++ )
         {
           obj = document.getElementById( 'id-button-' + i );
           if( ! obj ) break;
           obj.attachEvent( 'onclick', clickEvent, false );
         }
         // destroy
         i = obj = clickEvent = null;
       }
     }
   );
  </script>
 </head>

 <body>
  <img id='id-img' src='images/A.jpg'><br>
  <input id='id-button-0' type='button' value='絵1'><br>
  <input id='id-button-1' type='button' value='絵2'><br>
  <input id='id-button-2' type='button' value='絵3'><br>
  <input id='id-button-3' type='button' value='絵4'><br>
 </body>

</html>
-------------------------------------------------------------------------------

[1] 全角スペースを使用
[2] 特殊な書き方をしているのは、私自身の勉強のためで、他意はありません。

投稿日時 - 2008-02-18 13:41:26

ANo.3

ランダムに関して疑問があるようなので。

ランダムのtransiton=23 は 呼び出すたびにランダムになるのではなく、
付けた時点で ランダムに選ばれた一つが決定し固定されるのが仕様です。

呼び出すたびにランダムにする場合は

■一回 削除してから再設定 の方法をとる (フィルターを1個しか付けてない場合)
function flt1(name00){
img1.style.filter="";
img1.style.filter="revealTrans(duration=1.500,transition=23)";
img1.filters[0].Apply();
img1.src=name00;
img1.filters[0].Play();
}

または
img1.style.filter="revealTrans(duration=1.500,transition=23)";
は最初からタグにつけるか、window.onload でつけてしまっておいて。

■呼ばれるたびに transitionに新たに23を入れる。 (複数合ってもfilter配列で特定)
function flt1(name00){
img1.filters[0].transition = 23;
img1.filters[0].Apply();
img1.src=name00;
img1.filters[0].Play();
}

のどちかかが お決まりです。

投稿日時 - 2008-02-18 13:14:41

ANo.1

こんにちは

<script type="text/javascript"><!--
function flt1(name00){
Img = document.getElementById("img1");
num = Math.random()*23;
if (Img.filters) {
Img.style.filter="revealTrans(duration=1.500,transition="+num+")";
Img.filters[0].Apply();
Img.filters[0].Play();
}
Img.src=name00;
}
//--></script>

表示秒数も変えるのなら
<script type="text/javascript"><!--
function flt1(name00,sec){
Img = document.getElementById("img1");
num = Math.random()*23;
if (Img.filters) {
Img.style.filter="revealTrans(duration="+sec+",transition="+num+")";
Img.filters[0].Apply();
Img.filters[0].Play();
}
Img.src=name00;
}
//--></script>


onClick="flt1('絵1.jpg','1.500')"
のようなかんじで

投稿日時 - 2008-02-18 10:41:52

お礼

leap_dayさんありがとうございます。
なるほど、切り替えパターンを変えるんですね。

でも、本来は、こんなことしなくても
transition=23
で、ランダムになるのではないんですかね?
私の解釈の間違いなのでしょうか?
それとも、規格どおりに動作していない?
なんともいえませんが。

とにかく本当にありがとうございました。

投稿日時 - 2008-02-18 11:52:51

あなたにオススメの質問