- ベストアンサー
始めに読み込む画像を固定して、画像クリックで複数登録してある画像にラン
始めに読み込む画像を固定して、画像クリックで複数登録してある画像にランダムで切り替える方法 当方HTML+CSSは習得していますがJAVAの知識は殆どありません。 ページ内で画像を使った占いのようなコンテンツを作りたいのですが、画像ランダム切り替えのスクリプトにページをリロードしたときにしか表示されない扉画像を付けたいのと思っています。扉画像ををクリックすると「占い結果」画像が表示される、といった具合です。また、「占い結果」画像をさらにクリックすることでまた別画像に切り替えるようにしたいのですが、どなたか教えてください。
- digiline
- お礼率33% (1/3)
- JavaScript
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
サンプルです。（画像切り替えにアニメーション効果付けてます。） 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); }); }); });
その他の回答 (2)
- zeff
- ベストアンサー率69% (137/198)
＞また別画像に切り替える の意味が良くわかりませんでした。 とりあえずクリックするとまた占うようにしましたが。 素人作なので参考程度です。 それでも意味が判るのにかなり時間はかかると思います。 リロード＝window.onload ランダム＝Math.floor( Math.random() * Len ); （0以上Len未満の整数をランダムで返す。） <style type="text/css"> <!-- body,dl,dd{ margin: 0px;padding: 0px; } dl#x img{cursor:pointer;} --> </style> <script type="text/javascript"> <!-- var ImgList = new Array( ["image01.jpg","画像01"], ["image02.jpg","画像02"], ["image03.jpg","画像03"], ["image04.jpg","画像04"], ["image05.jpg","画像05"] ); var Len = ImgList.length; var w = 300,h = 225; var fortuneImg = new Array( Len ); /* 画像先読み */ function preLoad(){ for (var i = 0; i < Len; i++ ){ fortuneImg[i] = new Image(); fortuneImg[i].setAttribute('src', ImgList[i][0]); fortuneImg[i].setAttribute('alt', ImgList[i][1]); fortuneImg[i].setAttribute('width', w); fortuneImg[i].setAttribute('height', h); } } function showDoorImg(){ var dl = document.getElementById("x"); var dd = document.createElement('DD'); var img = document.createElement('IMG'); img.setAttribute('src',"image00.jpg"); img.setAttribute('alt',"扉画像"); img.setAttribute('width',w); img.setAttribute('height',h); if( navigator.userAgent.indexOf("MSIE") != -1 ) { img.setAttribute( 'onclick', new Function( 'showResult(this)' ) ); }else{ img.setAttribute( 'onclick', 'showResult(this)'); } dd.appendChild( img ); dl.appendChild( dd ); } function showResult( t ){ var r = Math.floor( Math.random() * Len ); t.src = fortuneImg[r].src; t.alt = fortuneImg[r].alt; } //--> </script> <script type="text/javascript"> <!-- window.onload = function(){ preLoad(); showDoorImg(); } //--> </script> </head> <body> <dl id="x"><dt>画像をクリックすると占い結果が出ます。</dt></dl> </body> </html>
補足
回答ありがとうございます。 通常のHTMLページでは動作するのですが、ECショップ内のページにて使用するため、スクリプトを外部で読み込ませるようにしなければならないのです。
- steel_gray
- ベストアンサー率66% (1052/1578)
扉画像Aクリック→画像B～画像X（ランダム）、クリック→？？ これもランダム？それともB´～X´って感じで元画像に対応した画像ってこと？ あと、占いってあるけど、ただのランダムでいいの？
補足
回答ありがとうございます。 扉画像Aクリック→画像B～画像X（ランダム）、さらにクリック→画像B～画像X（ランダム） といった感じです。本気の占いなどではないので、ただのランダムで良いです。
お礼
回答ありがとうございます。 ページに組み込んだところ、しっかりと動作しました！ フェード効果も雰囲気に良い作用をしています。 改めてどうもありがとうございました。