jsファイルを使って、画像をhtmlファイルに・・・

解決済

質問者：manami1976
質問日時：2005/02/09 01:39
回答数：4件

jsファイルを使って、一つのhtmlファイルにサムネイル版の画像を解説つきで並べて、その画像をクリックするとさらに大判の画像がもう一つのhtmlファイルで表示される。さらにその大きな画像をクリックすると、元のサムネイル版のhtmlファイルに戻る・・・

このような感じで作りたく、試行錯誤しておりましたがどうしてもhtmlファイルにうまく表示されません。

簡単に説明しますと、htmlファイルは2個でいろいろな画像を出力したいのです。それも表示されている画像をクリックするだけで、二つのhtmlファイルに行き来できるような。

どこかにフリーの配布などがあれば、教えていただけませんか？自分ではお手上げでした。　

通報する

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

質問の本文を隠す

回答 (4件)

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

No.2ベストアンサー

回答者： edams
回答日時：2005/02/09 02:30

ヒントになるかな

この回答への補足

ありがとうございました。
test1.htmlを作って、そこに下記のように書きました。

<SCRIPT>
function big_img(back_url, img_src) {
document.open();
document.write('<HTML><HEAD><TITLE>BIG IMAGE</TITLE></HEAD><BODY><A href="' + back_url + '">');
document.write('<IMG src="'+ img_src + '" border="0"></A></BODY></HTML>');
document.close();
}
</SCRIPT>

<A href="javascript:big_img('test2.html', 'test.jpg')">イメージクリック</a>

↑
これだと、test1.html(上のファイル)のイメージクリックをクリックすると、写真だけtest1.htmlに表示されます。bgcolorを指定していたけど、写真が開く同じtest1.htmlでも写真が開いたときは写真だけで、バック画面は真っ白です。

そしてその大きく開いた写真をクリックすると、何も写らないtest2.htmlに飛んでしまいます。

クリックしたときにtest2.htmlにtest.jpg写真を表示させ、その写真をクリックするとtest1.htmlのサムネイル（予定）版に戻るには、どこを直せばいいのでしょうか。

もう頭がごちゃごちゃになって、基本すら失ってしまいました。

もしお時間がありましたら、よろしくお願いいたします。

補足日時：2005/02/09 04:32

通報する

- 0
- 件

通報する

No.4

回答者： edams
回答日時：2005/02/09 19:09

ANo.#2 です

<SCRIPT>
function big_img(back_url, img_src) {
document.open();
document.write('<HTML><HEAD><TITLE>BIG IMAGE</TITLE></HEAD><BODY><A href="' + back_url + '">');
document.write('<IMG src="'+ img_src + '" border="0"></A></BODY></HTML>');
document.close();
}
</SCRIPT>

<A href="javascript:big_img('test2.html', 'test.jpg')">イメージクリック</a>

このスクリプトの詳細を書かなければならなかったみたいですね
これは、特に他のHTMLファイルを必要とせず
画像を表示するだけのHTMLを JAVASCRIPT で書き出しているだけですので
4行目 document.write しているところの<BODY>属性をつければ　背景色の設定ができると思いますよ

そして、big_img の引数ですが第１引数には元に戻るためのパス、
第２引数に表示する画像のパスを指定するように作ってあるので
test2.html と書いてあるところを test1.html と元のパスに指定すると戻れるはずです
このスクリプトには test2.html はいりません

レイアウトを指定するなら「ANo.#3 の const さん」のやり方のほうがいいかもしれませんね

- 0
- 件

通報する

この回答へのお礼

2度もわざわざありがとうございます。

htmlファイル一つでできました。

結局いろいろな写真があるので、いろいろ出し方でページを作ってみようと思います。

通報する

お礼日時：2005/02/10 20:44

No.3

回答者： const
回答日時：2005/02/09 18:01

次のようにすれば、large.html#largeimage.jpg を表示することで、好みのレイアウトを行ったページの中に拡大画像（largeimage.jpg）を表示できます。

■large.js
var imagedir = './image/'; // 拡大イメージのディレクトリ
name = window.location.href;
if ((offset = name.indexOf('#')) >= 0)
document.write('<img src="' + imagedir + name.substring(offset + 1) + '">');

■large.html
<html><head><title>画像をクリックすると戻ります</title></head>
<body><div><a href="javascript:history.back()">
<script type="text/javascript" src="large.js"></script>
<noscript>JavaScriptを有効にしてください</noscript>
</a></div></body></html>