• ベストアンサー

クリックするたびに違う文を表示

初心者なのでどの言語を使えばよいかわからないのですが、画像(ボタンでもよいのですが)をクリックするたびに違う文がweb画面上で表示できるようにしたいのですが、どうしたらできるかわからないので教えていただきたいです。お願いします。 m(_ _)m  ソースを教えていただけたらうれしいです。

質問者が選んだベストアンサー

  • ベストアンサー
noname#199778
noname#199778
回答No.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)

noname#199778
noname#199778
回答No.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)」の括弧内の数を、文章の数に合わせて増減すれば対応できます。 意図しているものと違ったらごめんなさい。 参考になれば幸いです。

noname#7922
質問者

お礼

本当にありがとうございました。おかげでだいぶわかりました。 たぶんできないんだろうなと思うんですが、もしクリックする画像のなかに文字を表示させるということは可能なのでしょうか?

全文を見る
すると、全ての回答が全文表示されます。
回答No.1

これは、私の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に書いてあるサイトで、気に入ったソースを見てみては如何ですか?

参考URL:
http://www.moon.sannet.ne.jp/redcap/index.html
noname#7922
質問者

補足

貴重なご意見ありがとうございました。わたし的にはランダムにえらんで表示ではなく、順番通りに文が画面の中で表示できるようにさせたいのですが・・・

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • クリックするとウインドウ表示

    webサイト製作初心者です。 いろんなところを見ながらHTML・CSSで作成していっています。 今回新しいページを作成するに当たり、 メニューの各ボタンをクリックすると真ん中にウインドウを表示したいと思いました。 どう説明していいのかわからなかったので、画像を添付しました。 画像は上のメニューの「CAST」をクリックした図です。 初期画面・「TOP」を押した際はウインドウは非表示の状態にしたいです。 説明不足で申し訳ありませんが、教えていただけるとうれしいです。 HTML・CSSで作れる方法だとうれしいです。

    • ベストアンサー
    • CSS
  • flsh クリックで表示させたり消したり

    今 flashでボタンを作ってます。 1つのボタンで クリックすると画像Aが表示され もう一回 クリックすると画像Aが消える. そんなのがつくりたいんですが。 コードスペニックで クリックして画像を表示する事はできたんですが、 消す事ができません。 どうぞ よろしくお願いします。

  • アイコンをクリック、即全画面表示にしたい

    画像ファイル(拡張子.JPEG等)のアイコンをクリックして開いたとき、画面一杯(全画面表示)で表示できませんか?アイコンをクリック、即全画面表示にしたいのですが、レジストリかどこかを設定するのですか?(一度、「最大化」ボタンで全画面表示すれば、次回からは全画面表示になるのですが) どなたか教えて下さい。当方のパソコンはWindows95です。

  • 全画面表示にするには?

    Webを開くとこの頃全画面でなく、幅が細くなったり、小さい画面でしか開かなくなりました。「最大」ボタンをクリックすれば全画面表示になりますが、どうして最初から全画面表示にならなくなったのでしょうか。出来れば対処法も教えていただければ助かります。初心者的な質問ですが、よろしくお願いいたします。

  • クリックで画像表示、さらに画像の一部をクリックで閉じる

    今、Javascriptを使用したページを立ち上げようと しており、以下のようなことをしたいと思っています。 (1) あるテキスト(または画像)をクリック (2) 説明用の画像が表示 (3) (2)で出た画像内の×マークをクリックすると、   その画像が消える。 イメージとしては、GOOGLEローカルのように、 マーカーをクリックすると、 説明文(画像)が出てきて、 ×を押すと閉じるといった内容です。 Javascriptのonclickとかをうまく使えば…と思うのですが、 ホントに初心者なので、分からないことだらけです。 すいませんが、教えていただけないでしょうか。

  • 画像リンクをクリックしても画面が遷移しません

    Webページ上で画像リンクをクリックしても画面が遷移しないです。 例でいうと、左上の「教えて!goo」の画面をクリックしても変化がありません。 ただ、一度ページを表示させてから更新ボタンを押すと、画像リンクが有効となります。 手間をかければ大丈夫なのですが、私のパソコンは低スペックなため大変な負担と時間がかかっています。 どなたか解決してくださると幸いです。 どうぞ、よろしくお願いいたします。

  • クリックしてハート型画像表示可能ですか

    web初心者です。 クリックしてその場にハートオブジェクトpng画像にしたものを表示する事は可能でしょうか。 もし、出来るのであれば、どんな方法がありますか。 回答よろしくお願いします。

  • 画像がランダムに表示されるFLASH

    いつもお世話になっています。 以下のようなFLASHを作りたいのですが、やり方がわからず困っています。 (1)リロードするたびにランダムで切り替わる画像1~6がある (2)画像の横にボタン1~6があり、マウスオーバーするとそれぞれ画像1、画像2…と表示される (3)ボタン1~6をクリックするとwebページ1~6へジャンプ(リンクさせている) 上記目的のうち、(2)(3)については完成しています。具体的にはAフレームには画像1、Bフレームには画像2…と配置し、ボタン1~6のアクションスクリプトにそれぞれ「マウスオーバー時にAフレームに飛ぶ」と記述しています。そしてメインのタイムライン1フレーム目にはアクションスクリプトに「ボタン1がクリックされたらwebページ1へ、ボタン2がクリックされたらwebページ2へ…」と記述しています。 これで(2)(3)の目的は果たせており、問題は(1)です。 ランダム表示される画像があり、ボタンのマウスオーバーで指定した画像が表示され、クリックでwebページへとぶ、ためにはどこにどんな記述をすれば良いのでしょうか? ちなみに作ったFLASHがサイトのトップページの一部となり、クリックで飛ぶwebページはそのサイト内です。 アドバイスいただけると助かります。 どうかよろしくお願いします。FLASHは上記がほぼ初めての挑戦である初心者です。

  • PHPでクリックするたびに変数を10ずつ増やすには?

    PHPでクリックするたびに変数を10ずつ増やすには? HTML、PHPの初心者です。 画面に作ったボタンをクリックするたびに、変数$maxの値が10ずつ増えるような プログラムを作りたいと思っています。 非常に簡略化していますが、下記のようなソースを書いてみました。 <html> <body> <?php $max = 0; ?> ---------中略---------- <form method="post" action=""> <input type="submit" name="max_1" value="10増やす"> </form> <?php ---------中略---------- if (isset($_POST["max_1"])) { $max += 10; } ---------中略---------- ?> </body> </html> これだと、「10増やす」というボタンを1回クリックすると、 変数$maxの値が、0から10になりますが、 2回、3回、4回とクリックしても、$maxの値は10のままです。 これを、「10増やす」ボタンを2回クリックしたら、$maxの値が20になり、 3回クリックしたら、$maxの値が30になり、4回クリックしたら、$maxが40になる・・・・ という風にしたいのですが、どう書き換えたらよいでしょうか? どなたか教えていただけると幸いです。 よろしくお願い致します。

  • phpのwhile文で、ボタンをクリックすると次が表示されるようにしたい。

    初めまして。PHP+MySQLの初心者ですが、昔BASICなどは組んで遊んでいました。 現在、Mysqlでプライベートで使うためのと練習として、住所録データーベースを作っているのですが、whele文で一覧表示させたときに、10項目ずつぐらい表示させて、何らかのリンクボタンクリックすると、また次の10項目ぐらいが表示されるようにしたいのです。 いろいろと検索してみたのですが、どうもわかりません。どのようなスクリプトを書けばよろしいのでしょうか?

    • 締切済み
    • PHP