毎度お世話になっておりますm(__)m
いまHP上に小さい画像を貼って、クリックすると大きめの画像を
別ウィンドウで表示させたく、いろいろやっておりまして
ターゲットをブランク指定したりするのは分かるのですが、それだと
ブラウザの画面に画像が余白つきで出てきてしまって嫌なのです。
それを自分でデザインした画像に合った指定の大きさの画面で、ブラウザの上のツールバーなどを
一切表示させないようにし、その画面にクローズボタンもつけたいのですが
いろいろ調べていてもちょっとやり方がわかりません。
onclickのタグなどをそのクリック画像とどうやって関連付けて書けばいいのでしょうか?
ちょっと上手く説明できないのですが、使用ソフトはDreamWeaverMXです。
あまりよくわかっていないので出来れば詳しく教えていただけると嬉しいです。
よろしくお願いします!
参考URL http://mao-lalala.com/lesson.html
このサイトの上の小さい凹む画像リンクを押すと小窓が現れるように、こんなようにしたいのです。
No.1ベストアンサー
- 回答日時:
タグの貼り付けが可能なら、下記のようなタグを追加すればよいでしょう
<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
- 回答日時:
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_o …
とてもよくわかりましたm(__)m HP作成って大変なんですね。でもとてもみなさんが分かりやすくお答えしてくれるおかげで楽しいです!ありがとうございました!また機会がございましたらどうぞよろしくお願いいたします!
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS トリミングで表示した画像をクリックで元どおりにしたい 3 2022/12/16 18:49
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- モニター・ディスプレイ WindowsノートPC 13.3で画面縮小したい 画面全体が見えない めり込んでしまってます 1 2023/01/22 13:42
- Windows 10 2つのウィンドウ選択時の表示について 10 2023/07/25 08:48
- その他(動画サービス) VLCメディアプレーヤーについて 1 2022/11/29 14:19
- フリーソフト 倍率自動調整して全画面表示できるフリーの画像ビューアー 1 2023/08/24 10:55
- AJAX 自作の地図をグーグルマップのようにしたい 3 2022/11/15 11:53
- Windows 10 フォルダ内の全ての画像を矢印キーでスライドできるようにしたい 1 2022/10/21 12:53
- Windows 10 Windows10 の設定?について (長文ですがよろしくお願いします)m(_ _)m 3 2022/05/14 12:22
- その他(クラウドサービス・オンラインストレージ) firestorage_androidスマホでダウンロードできない 1 2022/10/25 08:18
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
Irfan Viewで表示する画像の順...
-
イメージプレビューの多数画像...
-
色相のヒストグラムを表示する方法
-
JWWに張り付けた写真開かない
-
JavaScriptを使わずにやりたい...
-
exif informatioを表示しない
-
Easy-PhotoPrintで印刷したいの...
-
お勧めのSVGのビューアーを教え...
-
既存画像(gif または png)の背...
-
JW CAD の 挿入した画像への...
-
discordで画像保存できない
-
Googleフォトで画像が半分グレ...
-
黒文字のロゴを白抜きで使いた...
-
画像の白抜きの意味
-
自作アイコンの背景が透明にな...
-
Illustratorで図形の背景のみを...
-
写真を交互に複数枚切り替え表...
-
JPG画像のURLを得る方法に関して
-
オンマウスで画像が変わる
-
一太郎で透かしを入れる
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
イメージプレビューの多数画像...
-
お勧めのSVGのビューアーを教え...
-
JWWに張り付けた写真開かない
-
エクスプローラー サムネイル表...
-
Irfanviewの枚数認識について
-
Easy-PhotoPrintで印刷したいの...
-
Irfan Viewで表示する画像の順...
-
色相のヒストグラムを表示する方法
-
GIMP2.2のプレビュー画面について
-
PDFについて質問です。 adobe s...
-
ダウンロードしたHTMLの画像が...
-
画像のプロパティに利用不可と...
-
壁紙 スライドショー ファイ...
-
ビルダーでプレビューすると、...
-
画面いっぱいに同じ画像を並べる
-
itunesのアートワークを別々に...
-
店頭デモに使えそうな「画像ラ...
-
ファイルの移動 フォルダ整理
-
画像のアップが出来ない
-
Exif情報を画像に表示するアプ...
おすすめ情報