今年もおみくじを作成しました。
cssアニメーションによるホバーの動き・クリック時の回転、CSVでの文章の読み込み処理など、技術学習のために作成したページです。
閲覧タイミングによっては、出力結果のCSVがまだダミーテキストになっています…。（2016/01/01までにすべてのテキストを公開しました。）
リンク：2016年申年のおみくじ
参考と素材
ホバーの動き：Hover.css
クリック時の回転：CSS3でアニメーション【vol.4】- クリックでアニメーションを実行させる方法（複数同時実行例含む）
おみくじの筒画像：おみくじの入っている筒を描いたイラスト。お正月の初詣のデザインに。
CSVの読み込みについて：jQueryでCSVを読み込んでみる
2015年未年のおみくじはこちら↓
はじめまして。
サイト拝見させていただき、勉強しております。
早速ですが、おみくじクリック後にテキストではなく用意した画像を結果として表示したいのですが、どう修正すればよろしいかご教授していただけますでしょうか？
よろしくお願いします。
アースさん
コメントありがとうございます。
（返信が大変遅くなりすみません。）
以下、回答となります。
▼背景画像として表示する場合
【jQuery】おみくじ 二号機にて使用しています。以下の部分が該当します。
$(function() { $("#getFortune").click(function() { /* 0から100の範囲 */ var result = Math.floor( Math.random() * 100 ); if( result <= 14 ) {//0以上14未満//大吉 $('#bodyArea').css('background-image', 'url(images/excellent_luck.jpg)'); } else if( 14 < result && result <= 39 ) {//15以上39未満//中吉 $('#bodyArea').css('background-image', 'url(images/chukichi.jpg)'); } else if( 39 < result && result <= 64 ) {//40以上64未満//小吉 $('#bodyArea').css('background-image', 'url(images/shokichi.jpg)'); } else if( 64 < result && result <= 79 ) {//65以上79未満//末吉 $('#bodyArea').css('background-image', 'url(images/sueyoshi.jpg)'); } else if( 79 < result && result <= 94 ) {//80以上94未満//凶 $('#bodyArea').css('background-image', 'url(images/misfortune.jpg)'); } else {//95以上100未満//大凶 $('#bodyArea').css('background-image', 'url(images/daikyo.jpg)'); } }); });▼imgでHTML上に表示する場合
HTML上に、imgの読み込み位置を用意して
jQueryでクリックの際にsrcとaltの中身を変更
$(function() { $("#getFortune").click(function() { /* 0から100の範囲 */ var result = Math.floor( Math.random() * 100 ); if( result <= 14 ) {//0以上14未満//大吉 $("#img").attr({"src":"image/1.jpg","alt":"大吉"}); } else if( 14 < result && result <= 39 ) {//15以上39未満//中吉 $("#img").attr({"src":"image/2.jpg","alt":"中吉"}); } else if( 39 < result && result <= 64 ) {//40以上64未満//小吉 $("#img").attr({"src":"image/3.jpg","alt":"小吉"}); } else if( 64 < result && result <= 79 ) {//65以上79未満//末吉 $("#img").attr({"src":"image/4.jpg","alt":"末吉"}); } else if( 79 < result && result <= 94 ) {//80以上94未満//凶 $("#img").attr({"src":"image/5.jpg","alt":"末吉"}); } else {//95以上100未満//大凶 $("#img").attr({"src":"image/6.jpg","alt":"大凶"}); } }); });で、いかがでしょうか？
初めまして。
こちら参考におみくじ作らさせていただきます〜！！！
よろしくお願いします。