画像をデザインした別ウィンドウで表示

質問

毎度お世話になっておりますm(__)m
いまHＰ上に小さい画像を貼って、クリックすると大きめの画像を
別ウィンドウで表示させたく、いろいろやっておりまして
ターゲットをブランク指定したりするのは分かるのですが、それだと
ブラウザの画面に画像が余白つきで出てきてしまって嫌なのです。
それを自分でデザインした画像に合った指定の大きさの画面で、ブラウザの上のツールバーなどを
一切表示させないようにし、その画面にクローズボタンもつけたいのですが
いろいろ調べていてもちょっとやり方がわかりません。
onclickのタグなどをそのクリック画像とどうやって関連付けて書けばいいのでしょうか？
ちょっと上手く説明できないのですが、使用ソフトはDreamWeaverMXです。
あまりよくわかっていないので出来れば詳しく教えていただけると嬉しいです。
よろしくお願いします！
参考ＵＲＬ　http://mao-lalala.com/lesson.html
このサイトの上の小さい凹む画像リンクを押すと小窓が現れるように、こんなようにしたいのです。

回答No.1

gura_ · ベストアンサー

タグの貼り付けが可能なら、下記のようなタグを追加すればよいでしょう

<a href="#" onClick="window.open('big.jpg','','width=420,height=385');">
<img border="0" src="small.jpg" width="60" height="100" alt="小さな画像"></a>

ここで、

'big.jpg'は、大きな画像を示し、
'width=420,height=385'は、大きな画像を表示させたいサイズ、
'small.jpg'は、小さな画像を示し、
width="60" height="100"は、小さな画像の表示サイズ、
です。

お礼

ありがとうございます！とてもよくわかりました！そして、DWでgura_さんのお答えでがヒントでDWでもできる方法がわかりましたm(__)m　大変不躾なのですが、もしウインドウの開く位置（左サイドとか右サイド）を指定する方法とかわかりますでしょうか？　このたびはありがとうございました！

回答No.2

tsubaki39

No.1の方も書いていらっしゃるように
コードビュー（ソースビュー）にして、JavaScriptを記述しましょう。

<a href="#" onClick="window.open('大きい画像のパス','','width="開きたいウィンドウの横幅",height="開きたいウィンドウの高さ",scrollbars');">
<img border="0" src="小さい画像のパス" width="小さい画像の幅" height="小さい画像の高さ">

ですね。
日本語の部分を数字やファイル名に置き換えて下さい。
ちなみに参考サイトさんは、画像ではなく、別のhtmlファイルを表示させているようです。
（その場合は「大きい画像のパス」とある部分を、表示したいhtmlのパスにすればOKです）

「scrollbars」とある部分は、他にも色々カスタマイズできるので
参考URLを見てみると良いかもです。
「scrollbars」と入れればスクロールバーが、
さらにカンマ(,)で区切って「toolbar」と入れればツールバーが表示されるウィンドウになります。
本当は「scrollbars="yes"」と書いていくのが正しい(?)みたいですけどね。

ウィンドウを閉じるボタンを付けたいときは
<a href="javascript:window.close()">閉じる（好きな文でOKです）</a>

参考URL：

http://www.tagindex.com/javascript/window/open_option.html

お礼

とてもよくわかりましたm(__)m　HP作成って大変なんですね。でもとてもみなさんが分かりやすくお答えしてくれるおかげで楽しいです！ありがとうございました！また機会がございましたらどうぞよろしくお願いいたします！