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

解決済

質問者：mune77
質問日時：2008/02/18 09:26
回答数：5件

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

<html>
<head></head>

<script language="JavaScript"> 
</script>

<body bgcolor="#FFFFCC" text="#000000" >
<center><img id=img1 src="絵０.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('絵１.jpg')"> </td>
<td colspan=2 align="right"> <input type="button" value="絵２" onClick="flt1('絵２.jpg')"> </td>
<td colspan=2 align="right"> <input type="button" value="絵３" onClick="flt1('絵３.jpg')"> </td>
<td colspan=2 align="right"> <input type="button" value="絵４" onClick="flt2('絵４.jpg')"> </td>
</tr>
</table>
</form>

</body>
</html>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (5件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： leap_day
回答日時：2008/02/18 13:11

こんにちは

＞でも、本来は、こんなことしなくても
＞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専用なので前回ので未対応用にもしていますので適当に(？)調整してください

- 0
- 件

通報する

この回答へのお礼

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

通報する

お礼日時：2008/02/18 13:16

No.5

回答者： auty
回答日時：2008/02/20 02:59

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

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

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

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

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

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

--------------------------------------------------------------------------
<html>
<head>
<script language="JavaScript"> 
</script>
</head>

<body bgcolor="#FFFFCC" text="#000000">
<center>
<img id="img1" src="絵０.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>

- 0
- 件

通報する

No.4

回答者： ai10
回答日時：2008/02/18 13:41

画像は配列で用意しておき、かつ、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] 特殊な書き方をしているのは、私自身の勉強のためで、他意はありません。

- 0
- 件

通報する

No.3

回答者： arexis
回答日時：2008/02/18 13:14

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

ランダムの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();
}

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

- 0
- 件

通報する

No.1

回答者： leap_day
回答日時：2008/02/18 10:41

こんにちは

- 0
- 件

通報する

この回答へのお礼

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

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

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

通報する

お礼日時：2008/02/18 11:52

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