- ベストアンサー
jsファイルを使って、画像をhtmlファイルに・・・
jsファイルを使って、一つのhtmlファイルにサムネイル版の画像を解説つきで並べて、その画像をクリックするとさらに大判の画像がもう一つのhtmlファイルで表示される。さらにその大きな画像をクリックすると、元のサムネイル版のhtmlファイルに戻る・・・ このような感じで作りたく、試行錯誤しておりましたがどうしてもhtmlファイルにうまく表示されません。 簡単に説明しますと、htmlファイルは2個でいろいろな画像を出力したいのです。それも表示されている画像をクリックするだけで、二つのhtmlファイルに行き来できるような。 どこかにフリーの配布などがあれば、教えていただけませんか？自分ではお手上げでした。
- manami1976
- お礼率23% (14/60)
- JavaScript
- 回答数4
- ありがとう数4
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
ヒントになるかな <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('one.html', 'man.jpg')">Open Big Image</a>
その他の回答 (3)
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 さん」のやり方のほうがいいかもしれませんね
お礼
2度もわざわざありがとうございます。 htmlファイル一つでできました。 結局いろいろな写真があるので、いろいろ出し方でページを作ってみようと思います。
- const
- ベストアンサー率66% (12/18)
次のようにすれば、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>
お礼
ありがとうございました。 好きなレイアウトで写真を出せました。
- JADASCRIPUTO
- ベストアンサー率0% (0/1)
フリーの画像表示は、沢山あると思いますが、サイバーガーデンとかに、サンプルがあります。 HIDE-G LANDには、フリーのスライドショウとかのソフトもあります。あとは、翔泳社の10日間で覚えるJAVASCRIPTにそのサブネイル表示から、拡大等の方法まで、載っています。
お礼
ありがとうございました！
補足
ありがとうございました。 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のサムネイル（予定）版に戻るには、どこを直せばいいのでしょうか。 もう頭がごちゃごちゃになって、基本すら失ってしまいました。 もしお時間がありましたら、よろしくお願いいたします。