-PR-
締切済み

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

  • すぐに回答を!
  • 質問No.52893
  • 閲覧数484
  • ありがとう数4
  • 気になる数0
  • 回答数3
  • コメント数0

お礼率 100% (3/3)

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

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

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

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

どのように設定したらいいのか、ご存知の方がいらっしゃいましたら、
教えてください。よろしくお願いします。
通報する
  • 回答数3
  • 気になる
    質問をブックマークします。
    マイページでまとめて確認できます。

回答 (全3件)

  • 回答No.1
レベル11

ベストアンサー率 61% (157/255)

お望みのものは恐らくこういうものなのでしょう。 <html> <head> <meta http-equiv="content-type" content="text/html;charset=shift_jis"> </head> <script type="text/javas ...続きを読む
お望みのものは恐らくこういうものなのでしょう。

<html>

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

<script type="text/javascript">
<!--
function open_window(img,x,y){
s="width="+x+",height="+y;
win1=window.open('','','resizable=yes,scrollbars=no,'+s);
win1.document.open("content-type:text/html");
win1.document.write("<html>\n<body bgcolor='#ffffff' leftmargin='0' topmargin='0' marginwidth='0' marginheight='0'>\n");
win1.document.write("<img src='+img+'>");
win1.document.write("</body>\n</html>");
win1.document.close();
}
//-->
</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) のところで設定し、
左から、”本物の画像ファイル”、x幅、y幅 です。

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

お礼率 100% (3/3)

ありがとうございました。
早速コピーして動作を確認しましたが、
ウインドウは開きませんでした。

教えていただいたとおりにやってみましたが
やはりウインドウは開きません。

多分私のやり方がまずいのだと思います・・・。
もう少し答えを募集してみます。ありがとうございました!
投稿日時 - 2001-03-17 21:05:11
関連するQ&A


  • 回答No.2
レベル6

ベストアンサー率 66% (4/6)

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

<html><head>
<title>abc</title>
<script language="JavaScript">
<!--
function imageOpen(obj,w,h) {
var bound = 20;
var winInf = "toolbar=no,width=" + (w+bound) + ",height=" + (h+bound)
+ ",status=no,scroolbars=yes,resize=no,menubar=no";
var imgTag = "<img height=" + h + " width=" + w
+ " src=" + obj.src + " border=0>";
window.open(null,null,winInf).document.write(imgTag);
}
//-->
</script></head>
<body>
<img height="64" width="64" src="abc.jpg" border="0" onClick=imageOpen(this,300,300)>
</body></html>
お礼コメント
boop

お礼率 100% (3/3)

どうもありがとうございました!
ネスケとIE両方でスムーズに動くことを
考えると大変だなぁといつも思います。
投稿日時 - 2001-03-23 11:48:44
  • 回答No.3
レベル7

ベストアンサー率 50% (7/14)

<a href="Javascript:tempWin.focus()" onClick="tempWin=window.open('images/sample_big.jpg','sample','width=200,height=200')" border="0"> & ...続きを読む
<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>

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

お礼率 100% (3/3)

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

お返事頂きました皆様、お忙しい中回答いただきまして、
本当にありがとうございました!
投稿日時 - 2001-03-23 11:54:21
このQ&Aで解決しましたか?
関連するQ&A
-PR-
-PR-
こんな書き方もあるよ!この情報は知ってる?あなたの知識を教えて!
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。

その他の関連するQ&A、テーマをキーワードで探す

キーワードでQ&A、テーマを検索する
-PR-
-PR-
-PR-

特集


新大学生・新社会人のパソコンの悩みを解決!

いま みんなが気になるQ&A

関連するQ&A

-PR-

ピックアップ

-PR-
ページ先頭へ