ベストアンサー

選択された画像の表示

2003/08/24 20:52

画像をＨＰに掲載する場合に、例えば画面の右側に10種類の画像の名前を記載します。左側にフォトフレームのようなものを置いて、左の文字「画像１」をクリックするとフォトフレームの中に山の写真が出る、「画像２」をクリックすると山に変わって海の写真が出る、などのようなことができるでしょうか。タグうちでのＨＰ作成初心者です。よろしくお願い致します。

fumi2304
お礼率60% (20/33)

HTML
回答数3
ありがとう数3

みんなの回答 （3）
専門家の回答

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

ベストアンサー

noname#199778

2003/08/24 21:28 回答No.2

JavaScriptを使う方法でも大丈夫であれば、JavaScriptを使うのが良いかと思います。 <html> <head> <script type="text/javascript">  </script> </head> <body> <p> <div style="float: right;"> <a href="#" onClick="roimg('画像1のURL'); return false;">画像1</a><br> <a href="#" onClick="roimg('画像2のURL'); return false;">画像2</a><br> <a href="#" onClick="roimg('画像3のURL'); return false;">画像3</a><br> <a href="#" onClick="roimg('画像4のURL'); return false;">画像4</a><br> <a href="#" onClick="roimg('画像5のURL'); return false;">画像5</a><br> <a href="#" onClick="roimg('画像6のURL'); return false;">画像6</a><br> <a href="#" onClick="roimg('画像7のURL'); return false;">画像7</a><br> <a href="#" onClick="roimg('画像8のURL'); return false;">画像8</a><br> <a href="#" onClick="roimg('画像9のURL'); return false;">画像9</a><br> <a href="#" onClick="roimg('画像10のURL'); return false;">画像10</a> </div> <img src="初めの画像のURL" name="imgs" alt="*"> </p> </body> </html> こんな感じではいかがでしょうか。 JavaScriptを使いたくない場合は、インラインフレームなどを使うのが良いかと思います。参考までに…

質問者

補足 2003/08/26 01:57

簡単にできました。ありがとうございます。追加でお伺いさせていただけるなら、画像の位置を真ん中にして文字を下に書く場合はどこをどう変更すればようにでしょうか。

その他の回答 (2)

noname#199778

2003/08/26 09:33 回答No.3

再び失礼します。補足読みました。表示される内容のレイアウトについては、通常のHTMLをレイアウトする方法と同じです。前回は、スタイルシートを使って、リンクの文字を右にフロートさせるような指定を入れていました。これを書き換えて、部品の配置をし直せば良いでしょう。なお、スクリプトは、リンクタグの中身を書き間違えない限りは問題なく動作すると思いますので、その部分を書き換えることを避ければ、HTMLを修正しても問題ないはずです。具体的なソースですが、body内を以下のようなものにするのではいかがでしょうか。 <body> <p style="text-align: center;"> <img src="初めの画像のURL" name="imgs" alt="*"><br> <a href="#" onClick="roimg('画像1のURL'); return false;">画像1</a> / <a href="#" onClick="roimg('画像2のURL'); return false;">画像2</a> / <a href="#" onClick="roimg('画像3のURL'); return false;">画像3</a> / <a href="#" onClick="roimg('画像4のURL'); return false;">画像4</a> / <a href="#" onClick="roimg('画像5のURL'); return false;">画像5</a><br> <a href="#" onClick="roimg('画像6のURL'); return false;">画像6</a> / <a href="#" onClick="roimg('画像7のURL'); return false;">画像7</a> / <a href="#" onClick="roimg('画像8のURL'); return false;">画像8</a> / <a href="#" onClick="roimg('画像9のURL'); return false;">画像9</a> / <a href="#" onClick="roimg('画像10のURL'); return false;">画像10</a> </p> head内については、前回提示したものをそのまま使用してみてください。

質問者