画像をクリックして同じページに拡大画像を出す

解決済

質問者：tamanokosi
質問日時：2007/08/19 11:07
回答数：3件

小さい画像をクリックすると同じページに拡大画像が表示されるようにしたいのです。小さい画像が７つ程横に並んでいて、クリックするとその下に拡大画像が表示されるページです。フレームは使わないで出来ますか？フレームを使うとテーブルの背景が切れてしまうので使わないで作りたいのですがわかりません。教えてもらえたら嬉しいです。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： gura_
回答日時：2007/08/19 14:36

　拡大画像 1.gif - 7.gif があるとして、このようなのはいかがですか↓

この回答への補足

ありがとうございます。やってみたら出来ました。私の説明が悪くてまた教えていただきたいのですが、小さい画面と大きい画面はトリミングでプロポーションが変わっているので別画像扱いにしたいです。
大きい画面が上にあって、その下に1列に小さい画面が並んでいるレイアウトなのですが、どう変えればよいのでしょうか？何度も申し訳ありません。よろしくお願いします。

補足日時：2007/08/20 10:13

通報する

- 0
- 件

通報する

No.3

回答者： leap_day
回答日時：2007/08/19 19:33

こんにちは

こんな感じですか？

<script language="javascript"></script>
<style type="text/css">
#preview {
width:300px;
height:300px;
display:none;
}
</style>

<img src="sample0.gif" onClick="imgch(this.src)">
<img src="sample1.gif" onClick="imgch(this.src)">
<img src="sample2.gif" onClick="imgch(this.src)">
・・・sample7まで

<div id="preview" onClick="this.style.display='none'"></div>

このままだと表示・非表示のたびにこれ以下のコンテンツが上がったり下がったりするのでそれがお嫌でしたら
preview{ }内に
position:absolute;
top:***px;
left:***px;
background-color:***;
を追加してtop,leftで位置調整してください

- 0
- 件

通報する

この回答へのお礼

どうもありがとうございました。敏速な対応で驚きました。初心者なのでわからない事だらけでとても参考になりました。

通報する

お礼日時：2007/08/20 10:23

No.1

回答者： keita_2007
回答日時：2007/08/19 12:57

>>フレームを使わないで出来ますか？

フレームは必要ありません。JavaScriptで実現可能です。また、表示
する場所を設定するためにCSSを使用します。

・body間に<div>タグを追加します。
<div id="preview"></div>

・CSSをヘッダ間に追加します。
<style type="text/css"></style>

・<img>タグにonClick属性を追加します。
<img src=* width=* height=* onClick="Preview(1)">
<img src=* width=* height=* onClick="Preview(2)">
<img src=* width=* height=* onClick="Preview(3)">

・JavaScriptをhead間に追加します。
<script type="text/javascript"></script>

tamanokosiさんがJavaScriptやCSSについてどれほどの知識があるのか
わからないので、解説は省きますが、わからないようでしたら、
補足なりお礼でその旨をお伝え下さい。

*参考URLにて、サンプルを表示しています。

参考URL：http://sakuratan.ddo.jp/uploader/source/date4955 …