人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

おみくじを作成しているのですが、
クリック後に画像で表示させたいので、ご教授お願いします。

http://kittoo.net/omikujisite/

上記URLでおみくじクリックして結果がテキストで表示されるのですが、テキストではなく画像で表示させたい。

画像は「大吉」、「中吉」等画像で20種類ぐらい作成します。

参照URLのようにデフォルトはおみくじ画像のみで、クリック後(アニメーション後)に結果の画像(大吉、中吉等20種類のなかから1つランダムで)を表示させたいのです。

以下のスプリクトをどのように修正すればいいのか教えていただけますでしょうか?
http://kittoo.net/omikujisite/js/omikuji.js


HTMLは以下
<table id="result">
<thead>
<tr>
<th class="no">第<span></span>番</th>
<th class="result"></th>
</tr>
</thead>
</table>


●質問者: とし
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● rsc
●20ポイント

こちらは参考になるでしょうか。
イヌでもわかるJavaScript講座 - おみくじ その2
JavaScriptでおみくじ


としさんのコメント
参考URLありがとうございます。 初期画面はおみくじ画像のみで、 おみくじクリック(アニメーション後)に結果を表示したいのです。。

質問者から

初期画面は おみくじ画面のみで クリック後に 結果を表示させたいのです。


2 ● a-kuma3
●180ポイント ベストアンサー

こんな感じ。

$(function() {
 $("#getFortune").click(function() {
 /* 0から100の範囲 */
 var result = Math.floor( Math.random() * 100 );
 var com =['大吉','中吉','小吉','吉','半吉','末吉','末小吉','凶','小凶','半凶','末凶','大凶'];
 // ★画像の URL
 var com_img = [
 'result_dai_kichi.jpg', // 大吉
 'result_chu_kichi.jpg', // 中吉
 'result_sho_kichi.jpg', // 小吉
 'result_kichi.jpg', // 吉
 'result_han_kichi.jpg', // 半吉
 'result_sue_kichi.jpg', // 末吉
 'result_suesho_kichi.jpg', // 末小吉
 'result_kyo.jpg', // 凶
 'result_sho_kyo.jpg', // 小凶
 'result_han_kyo.jpg', // 半凶
 'result_sue_kyo.jpg', // 末凶
 'result_dai_kyo.jpg', // 大凶
 ];
 
 var omikuji;
 var omikuji_img; // ★

 if( result <= 18 ) {//0以上18未満//大吉
 omikuji = com[0];
 omikuji_img = com_img[0]; // ★
 } else if( 18 < result && result < 33 ) {//18以上33未満//中吉
 omikuji = com[1];
 omikuji_img = com_img[1]; // ★
 } else if( 33 < result && result < 48 ) {//33以上48未満//小吉
 omikuji = com[2];
 omikuji_img = com_img[2]; // ★
 } else if( 48 < result && result < 58 ) {//48以上58未満//吉
 omikuji = com[3];
 omikuji_img = com_img[3]; // ★
 } else if( 58 < result && result < 68 ) {//58以上68未満//半吉
 omikuji = com[4];
 omikuji_img = com_img[4]; // ★
 } else if( 68 < result && result < 76 ) {//68以上76未満//末吉
 omikuji = com[5];
 omikuji_img = com_img[5]; // ★
 } else if( 76 < result && result < 84 ) {//76以上84未満//末小吉
 omikuji = com[6];
 omikuji_img = com_img[6]; // ★
 } else if( 76 < result && result < 90 ) {//84以上90未満//凶
 omikuji = com[7];
 omikuji_img = com_img[7]; // ★
 } else if( 90 < result && result < 94 ) {//90以上94未満//小凶
 omikuji = com[8];
 omikuji_img = com_img[8]; // ★
 } else if( 94 < result && result < 97 ) {//94以上97未満//半凶
 omikuji = com[9];
 omikuji_img = com_img[9]; // ★
 } else if( 97 < result && result < 99 ) {//97以上99未満//末凶
 omikuji = com[10];
 omikuji_img = com_img[10]; // ★
 } else {//99以上100//大凶
 omikuji = com[11];
 omikuji_img = com_img[11]; // ★
 }
 
 
 $("#getFortune").addClass('after').fadeOut(2000);
 $("#result").delay(2000).fadeIn(2000);
 $("#result tr .no span").text(result);
// $("#result tr .result").text(omikuji);
 $("#result tr .result").html('<img src="' + omikuji_img + '">'); // ★


 });
});

用意する画像をそのまま HTML に差し込んでいます。
画像の大きさによっては、スタイルシートで大きさを調整する必要があります。

画像のファイル名を通し番号にしたりとかすると、もっと短く書けるような気もしますが、元のソースを活かしてあります。
追加したところには、コメントで「★」を入れてあります。
元のソースの文字列の部分は、(必要ないけど)残してありますので、動作を確認したら消しちゃってください。


としさんのコメント
考えていたとおりにできました。 ご教授いただきありがとうございました。

a-kuma3さんのコメント
このコードのまま使うのでしょうか。 三つほど間違いがあります。 >|javascript| if( result <= 18 ) {//0以上18未満//大吉 ||< これだと、18以下ですね。 >|javascript| } else if( 18 < result && result < 33 ) {//18以上33未満//中吉 ... } else if( 33 < result && result < 48 ) {//33以上48未満//小吉 ||< 33 が判定に入らず、最後の else(「大凶」)になります。 これ以降の else if の最初の条件は <tt>&lt;=</tt> ですよね。 >|javascript| } else if( 76 < result && result < 84 ) {//76以上84未満//末小吉 ... } else if( 76 < result && result < 90 ) {//84以上90未満//凶 ||< タイプミス。76 → 84 。

a-kuma3さんのコメント
そういったことも踏まえて、ぼくならこう書くと思います。 >|javascript| function get_display_data(num) { var data = [ [ 18 , '大吉' , '/result_dai_kichi.jpg', ], [ 33 , '中吉' , '/result_chu_kichi.jpg', ], [ 48 , '小吉' , '/result_sho_kichi.jpg', ], [ 58 , '吉' , '/result_kichi.jpg', ], [ 68 , '半吉' , '/result_han_kichi.jpg', ], [ 76 , '末吉' , '/result_sue_kichi.jpg', ], [ 76 , '末小吉' , '/result_suesho_kichi.jpg', ], [ 90 , '凶' , '/result_kyo.jpg', ], [ 94 , '小凶' , '/result_sho_kyo.jpg', ], [ 97 , '半凶' , '/result_han_kyo.jpg', ], [ 99 , '末凶' , '/result_sue_kyo.jpg', ], [ 999 , '大凶' , '/result_dai_kyo.jpg', ], ]; for (i = 0 ; i < data.length ; ++i) { if (num < data[i][0]) { return data[i]; } } // ここには来ないはず alert("ERROR !!!"); return null; } /* 0から100の範囲 */ var result = Math.floor( Math.random() * 100 ); var data = get_display_data(result); var omikuji = data[1]; var omikuji_img = data[2]; ... ||< 書き方はいろいろとありますが、意識していることは - データを配列で持つこと - 関数にすること です。 データを配列で持つことによって、判定の境界値を間違うこと(以下と未満の取り違えとか)はあっても、歯抜けになるようなミスは起こりえません。 関数にすることのメリットは、テストができることです。 例えば、 >|javascript| // test for (ii = 0 ; ii < 100 ; ++ii) { console.log(ii, get_display_data(ii)); } ||< こんな感じで、乱数で発生させる 0 から 99 を全て渡して、その結果を確認してみる。 # 蛇足でした <tt>:-)</tt>

としさんのコメント
新設丁寧にアドバイス有難うございます。 勉強になりました。
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ