画像をクリックしたら別ウインドウを開くようにするには？

締切済

質問者：boop
質問日時：2001/03/17 14:30
回答数：3件

検索したり本を探したりしたのですが、どうしても見つけられなかったので
投稿します。

アルバムのコンテンツを作ろうと考えています。
いきなり大きな画像を沢山張りつけると重くて仕方がなくなるので、
まずサムネイルをテーブルの中にいれて沢山表示させるページを作りました。

自分の理想としてはサムネイルをクリックすると
サイズ指定された別ウインドウが開いて該当サムネイルの大きな画像が
表示されるようにしたいんです。

そこで色々調べてみたのですが、ボタンや、テキストをクリックすると
別ウインドウが開くというサンプルはあっても、画像をクリックした
場合の設定方法が見つかりません。

どのように設定したらいいのか、ご存知の方がいらっしゃいましたら、
教えてください。よろしくお願いします。

通報する

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

質問の本文を隠す

回答 (3件)

最新から表示
回答順に表示

No.3

回答者： cradoll
回答日時：2001/03/18 15:04

<a href="Javascript:tempWin.focus()" onClick="tempWin=window.open('images/sample_big.jpg','sample','width=200,height=200')" border="0">

<img src="images/sample_smoll.jpg" width="50" height="50" border="0"></a>

と、こんなのはどうでしょう
画像一枚一枚にスクリプトを記述するのでちょっとソースが長くなりそうですが
改行をいれずに書かないとだめかも知れません

- 1
- 件

通報する

この回答へのお礼

どうもありがとうございました！
皆様に教えていただいた情報を参考に
色々やってみたのですがスキルがないせいで
うまく設定できず、結局自力で解決してしまいました。

お返事頂きました皆様、お忙しい中回答いただきまして、
本当にありがとうございました！

通報する

お礼日時：2001/03/23 11:54

No.2

回答者： MMPichu
回答日時：2001/03/18 01:23

想像されているのと違うかもしれませんが、チョット書いて見ました。

簡単にする為に正式なHTML記述では書いていませんので適当に変更して
下さいね。
新たなウィンドウのイメージを縮小する必要がない場合は、
document.writeを使わずに、window.open(obj.src, .....);
でもOKです。
ただし、NetScapeでは動くかどうかは確かめていません。

<html><head>
<title>abc</title>
<script language="JavaScript">

</script></head>
<body>
<img height="64" width="64" src="abc.jpg" border="0" onClick=imageOpen(this,300,300)>
</body></html>

- 0
- 件

通報する

この回答へのお礼

どうもありがとうございました！
ネスケとIE両方でスムーズに動くことを
考えると大変だなぁといつも思います。

通報する

お礼日時：2001/03/23 11:48

No.1

回答者： kokucho81
回答日時：2001/03/17 15:56

お望みのものは恐らくこういうものなのでしょう。

<html>

<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
</head>

<script type="text/javascript">

</script>

<body>
<table border="4" cellpadding="0" cellspacing="2" width="200">
<tr>
<td><a href='javascript:open_window("a_big.gif",300,200)'><img height="32" width="32" src="a.gif" border="0"></a></td>
<td><a href='javascript:open_window("b_big.gif",200,320)'><img height="32" width="32" src="b.gif" border="0"></a></td>
<td><a href='javascript:open_window("c_big.gif",250,220)'><img height="32" width="32" src="c.gif" border="0"></a></td>
</tr>
<tr>
<td><a href='javascript:open_window("d_big.gif",250,220)'><img height="32" width="32" src="d.gif" border="0"></a></td>
<td><a href='javascript:open_window("e_big.gif",250,300)'><img height="32" width="32" src="e.gif" border="0"></a></td>
<td><a href='javascript:open_window("f_big.gif",50,450)'><img height="32" width="32" src="f.gif" border="0"></a></td>
</tr>
<tr>
<td><a href='javascript:open_window("g_jpg.gif",300,50)'><img height="32" width="32" src="g.jpg" border="0"></a></td>
<td><a href='javascript:open_window("h_jpg.gif",350,330)'><img height="32" width="32" src="h.jpg" border="0"></a></td>
<td><a href='javascript:open_window("i_jpg.gif",250,220)'><img height="32" width="32" src="i.jpg" border="0"></a></td>
</tr>
</table>
</body>

</html>
サルネイムガ像が a.gif b.gif　・・・・・・ i.jpgなどで、
本物画像が a_gif.gif, b_big.gif ・・・・・・ i_big.jpg と考えます。

javascript:open_window("i_jpg.gif",250,220)　のところで設定し、
左から、”本物の画像ファイル”、ｘ幅、ｙ幅です。

いちどソースをコピって動きを確認なさればどう私用すれば良いかわかると思います。