質問 |
||
| QNo.4191411 | かぶらないランダム画像 | |
|---|---|---|
| 質問者:19780405 |
こんにちは。 現在ランダムに画像表示+画像毎に各リンク+マウスオーバーで画像切り替え を下記スクリプトで行っております。 function randomImage1() { img = new Array(); img[0] = "photo1.gif"; img[1] = "photo2.gif"; img[2] = "photo3.gif"; img[3] = "photo4.gif"; n = Math.floor(Math.random()*2); url = 'URL1 URL2'.split(' '); document.write('<a href="'+url[n]+'" target="_top"><img src="'+img[n]+'" border="0" onMouseOver="this.src=\''+img[n-0+2]+'\'" onMouseOut="this.src=\''+img[n]+'\'" onClick="location.href=\''+url[n]+'\'"></a>'); } ここで相談です。さらにこのソースを改造して 重複しないでランダムに画像表示させたいのですが、 どこをどう改造すれば良いかアドバイス宜しくお願い致します。 |
|
困り度:
|
||
| 質問投稿日時: 08/07/20 20:00 |
||
回答良回答20pt |
|
| ANo.8 | No7です。 あれで動作しますが 一回目のbasyo=moji.indexOf(n);余分でした。(いらない) 別コード(自作)をコピペしていじってるんで、余分なものが。 |
|---|---|
| 回答者:shinya23so | |
| 種類:回答 どんな人:一般人 自信:参考意見 |
|
| 回答日時: 08/07/23 04:46 |
|
| |
| この回答へのお礼 | ありがとうございます! 自分の思ってるとおり動きました。 とても勉強になりました。 |
回答 |
|
| ANo.7 | No234です。 cookieに書き込んでますので、 使用者がcookieを消すと、切り替え動作しません。 cookieについては調べてください。 ------------------------------------------- <html><head><script type="text/JavaScript"> function randomImage1(){ img = new Array(); img[0] = "photo1.gif"; img[1] = "photo2.gif"; img[2] = "photo3.gif"; img[3] = "photo4.gif"; //一回目 if(document.cookie==null){ n=Math.floor(Math.random()*2); basyo=moji.indexOf(n);} //二回目以降 else{ k=document.cookie; if(k==0){n=1;}else{n=0;}} //cookieに書き込み document.cookie=n; url = 'URL1 URL2'.split(' '); document.write('<a href="'+url[n]+'" target="_top"><img src="'+img[n]+'" border="0" onMouseOver="this.src=\''+img[n-0+2]+'\'" onMouseOut="this.src=\''+img[n]+'\'" onClick="location.href=\''+url[n]+'\'"></a>'); } randomImage1(); </script></head><body></body></html> |
|---|---|
| 回答者:shinya23so | |
| 種類:回答 どんな人:一般人 自信:参考意見 |
|
| 回答日時: 08/07/23 04:33 |
|
| |
| この回答へのお礼 | この回答にお礼をつける(質問者のみ) |
回答良回答10pt |
|
| ANo.6 | >そこからさらに更新しても重複しない処理を >したいのですが、可能でしょうか? 2種類しかデータがないので前回と違うデータを表示したいという意味? それとも2種類を単に並べて表示したい(順番がランダム)という意味? 仕様があいまいなので、正確には答えられません。 (元ソースがひとつしか画像を表示しないようになっているのに 重複しない・・・といわれても、一つしかないものは重複しないとしか) 更新してもデータが引き継がれるようにするにはcookieなど 今のデータがなんだかを次のページに渡す必要がありますね。 これは結構面倒です。 cookieという方法を理解してから再度ご質問になるとよいと思いますよ。 |
|---|---|
| 回答者:yambejp | |
| 種類:アドバイス どんな人:一般人 自信:参考意見 |
|
| 回答日時: 08/07/22 17:48 |
|
| |
| この回答へのお礼 | 説明不足ですいません。 画像表示はひとつです、 私のソースだと表示確率が完全にランダムなので 画像が切り替わる事もあれば、何回更新しても切り替わらない事もあります。 そこをかならず切り替えたいと思っております。 (例) photo1が表示されている時に更新すると、かならずphoto2に変わる。 又は、photo2が表示されている時は、かならずphoto1に変わる。 こんな感じです。説明不足で申し訳ありません。。 |
回答 |
|
| ANo.5 | 配列じゃなくオブジェクトで管理すればわかりやすくなります。 function randomImage1(){ var list={ 0:{orgImg:"photo1.gif",newImg:"photo3.gif",url:"hoge1.htm"} ,1:{orgImg:"photo2.gif",newImg:"photo4.gif",url:"hoge2.htm"} } var n = Math.floor(Math.random()*2); document.write('<a href="'+list[n].url+'" target="_top"><img src="'+list[n].orgImg+'" border="0" onMouseOver="this.src=\''+list[n].newImg+'\'" onMouseOut="this.src=\''+list[n].orgImg+'\'" ></a>'); } |
|---|---|
| 回答者:yambejp | |
| 種類:アドバイス どんな人:一般人 自信:参考意見 |
|
| 回答日時: 08/07/22 14:31 |
|
| |
| この回答へのお礼 | yambejp様、回答ありがとうございます。 そこからさらに更新しても重複しない処理を したいのですが、可能でしょうか? |
回答 |
|
| ANo.4 | No2、3です。しつこくてスミマセン。 No3は多い画像数向けでした。(少ないと重なる可能性が高い) img = new Array(); img[0] = "photo1.gif"; img[1] = "photo2.gif"; img[2] = "photo3.gif"; img[3] = "photo4.gif"; の部分3つ以上推奨です。 |
|---|---|
| 回答者:shinya23so | |
| 種類:アドバイス どんな人:一般人 自信:参考意見 |
|
| 回答日時: 08/07/21 05:33 |
|
| |
| この回答へのお礼 | shinya23so様、回答ありがとうございました。 私の説明不足で申し訳ありません。 photo1の時にマウスオーバーするとphoto3に切り替わり photo2の時にマウスオーバーするとphoto4に切り替わる ランダムで表示されるのはphoto1とphoto2の2枚だけです。 そんなこと可能でしょうか? |
回答 |
|
| ANo.3 | //ANo2です。 //Url部分コーティング忘れてました。 //もちょっとましにしましたが、シャッフル使ってないので、 //少ない画像数向けです。(ランダムじゃなきゃ駄目だと思ってました) <html><head><script type="text/JavaScript"> function randomImage1(){ img = new Array(); img[0] = "photo1.gif"; img[1] = "photo2.gif"; img[2] = "photo3.gif"; img[3] = "photo4.gif"; var m=img.length+1; for(i=1;i<=2;i++){ randomx = Math.random(); for(t=0;t<=3;t++){ if((randomx<=(1/img.length)*(t+1))&&(randomx>=(1/img.length)*t)){k=t;} } if(i==1){n=k;}else{m=k;} if(n==m){i--;} } url = 'URL1 URL2 URL3 URL4'.split(' '); document.write('<a href="'+url[n]+'" target="_top"><img src="'+img[n]+'" border="0" onMouseOver="this.src=\''+img[m]+'\'" onMouseOut="this.src=\''+img[n]+'\'" onClick="location.href=\''+url[n]+'\'"></a>'); } randomImage1(); </script> </head><body></body></html> |
|---|---|
| 回答者:shinya23so | |
| 種類:回答 どんな人:一般人 自信:参考意見 |
|
| 回答日時: 08/07/21 05:23 |
|
| |
| この回答へのお礼 | この回答にお礼をつける(質問者のみ) |
回答 |
|
| ANo.2 | <html> <head> <script type="text/JavaScript"> function randomImage1() { //新しいmに十分に大きな数を入れる4以上ならいい var m=15000; for(i=1;i<=2;i++){ img = new Array(); img[0] = "photo1.gif"; img[1] = "photo2.gif"; img[2] = "photo3.gif"; img[3] = "photo4.gif"; randomx = Math.random(); if (randomx<=0.25){ k=0;} else{if(randomx<=0.5){ k=1;} else{if(randomx<=0.75){k=2;} else{ k=3; } } } //kでnを変数mでもうひとつも4種類に if(i==1){n=k;}else{m=k;} //2つが重なった時もう一度 if(n==m){i--;} } url = 'URL1 URL2'.split(' '); //次の行 onMouseOver="this.src=\''+img[m]+'\'" n-0+2を 変数m document.write('<a href="'+url[n]+'" target="_top"><img src="'+img[n]+'" border="0" onMouseOver="this.src=\''+img[m]+'\'" onMouseOut="this.src=\''+img[n]+'\'" onClick="location.href=\''+url[n]+'\'"></a>'); } randomImage1(); </script> </head> <body > </body> </html> |
|---|---|
| 回答者:shinya23so | |
| 種類:回答 どんな人:一般人 自信:参考意見 |
|
| 回答日時: 08/07/21 03:20 |
|
| |
| この回答へのお礼 | この回答にお礼をつける(質問者のみ) |
回答 |
|
| ANo.1 | ランダムなら必ずかぶります。 かぶらせないのならランダムではなくてシャッフルを使います。 少し面倒ですが選んだものをランダムの対象範囲から外すという仕組みを組み入れればうまく行きます。 |
|---|---|
| 回答者:ymmasayan | |
| 種類:アドバイス どんな人:経験者 自信:参考意見 |
|
| 回答日時: 08/07/20 21:01 |
|
| |
| この回答へのお礼 | 御回答ありがとうございます。 具体的にどこをいじればいいかわかりません。 勉強不足で申し訳ありません。。 |