- ベストアンサー
クリックするたびに違う文を表示
初心者なのでどの言語を使えばよいかわからないのですが、画像（ボタンでもよいのですが）をクリックするたびに違う文がweb画面上で表示できるようにしたいのですが、どうしたらできるかわからないので教えていただきたいです。お願いします。 ｍ(_ _)ｍ ソースを教えていただけたらうれしいです。
- HTML
- 回答数3
- ありがとう数1
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
#2です。 見た目上で画像の中に文字を表示させることは、スタイルシートを利用すれば可能です。 以下にCSSを利用したソースの一例を書きますね。 <p> <a href="javascript: changer()"><img src="*" width="200" height="50" style="vertical-align: middle; z-index: 1;"></a> <span id= "aaa" style="position: relative; left:-200px; z-index: 2;">ここに出力</span> </p> これを前回のソースの<body>内に置き換えれば、画像とテキストが重なって表示されます。 上の場合は、仮に幅200の画像を想定して、本来その右側に表示されるはずのテキストを「position: relative; left: -200px;」の指定で200px左に移動させ、重ねて表示させています。 各数値は、画像のサイズなどに合わせて適宜調整してください。 あるいは、同様の方法ですが、設定のアプローチを変えて、 <p> <a href="javascript: changer()"><img src="*" width="200" height="50" style="z-index: 1;"></a><br> <span id= "aaa" style="position: relative; top: -50px; z-index: 2;">ここに出力</span> </p> こちらは改行を受けて画像の下にくるはずのテキストを、上に移動させる(top: -50px;)ことで重ねて表示させています。 こちらの書き方は、センタリングなどをしている時に調整がしやすくなります。 とりあえず一例として挙げてみました。 上記の他にも、いろいろなやり方があります。 私にはこのくらいが精一杯ですが、上記よりも優れたやり方もあるでしょう。 表示の設定については、CSSなどスタイルシートについて調べてみると、いろいろと工夫できると思います。 参考になれば幸いです。
その他の回答 (2)
HTMLのみでは実現できないでしょう。 JavaScriptなどを利用すれば可能です。 以下にサンプルのソースを書き出してみます。 <html> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <meta http-equiv="content-script-type" content="text/javascript"> <title>サンプル</title> <script type="text/javascript"> <!-- var n=0; sen=new Array(4); sen[0]="1番目に書き出される文章"; sen[1]="2番目に書き出される文章"; sen[2]="3番目に書き出される文章"; sen[3]="4番目に書き出される文章"; sen[4]="最後に書き出される文章"; function changer(){ if(document.getElementById){ if (n<5){ document.getElementById("aaa").innerHTML=sen[n]; n++; } } else {return;} } // --> </script> </head> <body> <p id="aaa">ここに出力</p> <p><a href="javascript: changer()"><img src="*"></a></p> </body> </html> リンクをクリックすると、<p id="aaa"></p>内の文章が書き換えられます。 IE 6とNetscape 7では動きました。 その他のブラウザでは動かない可能性もあります。 上では5つの文章を順番に差し替えて表示させますが、順番に差し替える文章の数が上記と違う場合は、「sen=new Array(4)」の括弧内の数と「function changer()」内の「if (n<5)」の括弧内の数を、文章の数に合わせて増減すれば対応できます。 意図しているものと違ったらごめんなさい。 参考になれば幸いです。
- cafedemocha
- ベストアンサー率29% (232/789)
これは、私のHPのなんちゃって御神籤のソースですが、こんなのでも宜しいのかな？ <P align="center"><SCRIPT language="JavaScript"> <!-- function omi(){ ra=Math.random();// raに乱数が入ります if(ra>0.95){ mes="「最大吉」\n\nおめでとうございます。\nあなたは史上稀にみる強運の持ち主です・・・と言って、調子に乗り過ぎないようにね～・・・過ぎたるは、何とやら (^_^;)"; } else if(ra<= 0.95 && ra>0.85){ mes="「大の大吉」\n\nおめでとうございます！今日も良い事あるかもね～"; } else if(ra<=0.85 && ra>0.7){ mes="「大吉」\n\n多分、これから良い事が、どしどし起きるかも (^_^)"; } else if(ra<=0.7 && ra>0.4){ mes="「中の大吉」\n\nチョット良い事が、ありそうな予感がしませんか？"; } else if(ra<=0.4 && ra>0.2){ mes="「中吉」\n\n何となく良い事がありうな予感が・・・\nでも、それに頼ってばかりではね～・・・\n自力で切り拓く事もお忘れなく (^^ゞ"; } else if(ra<=0.2 && ra>0.1){ mes="「小の中吉」\n\n一応・・・良い事あるかもしれないけど、拾ったお金は、\nちゃんと届けましょうね～・・・って事ですね～ (^^ゞ"; } else if(ra<=0.1 && ra>0.02){ mes="「小吉」\n\nう～ん・・・何とも言えない微妙な所・・・気を付けてれば、チャンスを見逃さないで済むかも・・・\nでも、チャンスが微妙だからね～ (^_^;)"; } else{ mes="「末末末吉」\n\nある意味、スゴイかもね (^_^;)\n運勢は上昇するだけ、上のみを見る事が出来るって運勢です (^_^;)"; } alert(mes); } //--> </SCRIPT></P> <FORM> <P align="center"><INPUT type="button" name="b1" value="占う！" onclick="omi()"></P> </FORM> さもなければ、参考URLに書いてあるサイトで、気に入ったソースを見てみては如何ですか？
補足
貴重なご意見ありがとうございました。わたし的にはランダムにえらんで表示ではなく、順番通りに文が画面の中で表示できるようにさせたいのですが・・・
お礼
本当にありがとうございました。おかげでだいぶわかりました。 たぶんできないんだろうなと思うんですが、もしクリックする画像のなかに文字を表示させるということは可能なのでしょうか？