- 締切済み
画像をクリックしたら別ウインドウを開くようにするには？
検索したり本を探したりしたのですが、どうしても見つけられなかったので 投稿します。 アルバムのコンテンツを作ろうと考えています。 いきなり大きな画像を沢山張りつけると重くて仕方がなくなるので、 まずサムネイルをテーブルの中にいれて沢山表示させるページを作りました。 自分の理想としてはサムネイルをクリックすると サイズ指定された別ウインドウが開いて該当サムネイルの大きな画像が 表示されるようにしたいんです。 そこで色々調べてみたのですが、ボタンや、テキストをクリックすると 別ウインドウが開くというサンプルはあっても、画像をクリックした 場合の設定方法が見つかりません。 どのように設定したらいいのか、ご存知の方がいらっしゃいましたら、 教えてください。よろしくお願いします。
- boop
- お礼率100% (3/3)
- JavaScript
- 回答数3
- ありがとう数4
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- cradoll
- ベストアンサー率50% (7/14)
<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> と、こんなのはどうでしょう 画像一枚一枚にスクリプトを記述するのでちょっとソースが長くなりそうですが 改行をいれずに書かないとだめかも知れません
- MMPichu
- ベストアンサー率66% (4/6)
想像されているのと違うかもしれませんが、チョット書いて見ました。 簡単にする為に正式な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>
お礼
どうもありがとうございました！ ネスケとIE両方でスムーズに動くことを 考えると大変だなぁといつも思います。
- kokucho81
- ベストアンサー率61% (157/255)
お望みのものは恐らくこういうものなのでしょう。 <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) のところで設定し、 左から、”本物の画像ファイル”、ｘ幅、ｙ幅 です。 いちどソースをコピって動きを確認なさればどう私用すれば良いかわかると思います。
お礼
ありがとうございました。 早速コピーして動作を確認しましたが、 ウインドウは開きませんでした。 教えていただいたとおりにやってみましたが やはりウインドウは開きません。 多分私のやり方がまずいのだと思います・・・。 もう少し答えを募集してみます。ありがとうございました！
お礼
どうもありがとうございました！ 皆様に教えていただいた情報を参考に 色々やってみたのですがスキルがないせいで うまく設定できず、結局自力で解決してしまいました。 お返事頂きました皆様、お忙しい中回答いただきまして、 本当にありがとうございました！