スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

小窓研究 その1

例1  例2  例3 < 例4 <

 ブログで写真のサムネールをクリックすると小窓が開いて大きな写真が表示される仕組みは、上の写真のように、Gooブログの編集画面でIMGというボタンを押して画像を表示する場合の基本ですが、いまいち不満がのこります。

 そこで画像のハイパーリンクの <a href="画像のURL">となっているタグの中に、別窓で開くターゲット先を target="_blank" といれると、例2のとおりだが、開いた別窓が画像より大きすぎてなんだか格好が悪い。

 ということで、例3では、Javasriptのwindow.open( URL, ウィンドウ名 [,オプション] ) という命令を使ってみることにする。この命令では、開く小窓についてのオプションを指定できます。

 例4では、ふちに白いものが残るのがいやとなると、今度はサイトにマージンを0にしたページをアップしてそれをオープンさせることになる。

 指定できる主なパラメーターは以下のとおりです。

width数値ウィンドウ幅
height数値ウィンドウ高さ
left数値ウィンドウ位置左
top数値ウィンドウ位置上
menubaryes/noメニューバー有無
toolbaryes/noツールバー有無
locationyes/noアドレスバー有無
statusyes/noステータスバー有無
resizableyes/noリサイズ可否
scrollbarsyes/noスクロールバー有無


例3では、画像のサイズが366ピクセル×550ピクセルだから、余白やメニューバーの部分を足して、たて、よこの幅をそれぞれ30ピクセルと20ピクセルほど大きくして、各パラメータを次のように設定する。
'width=386, height=580, menubar=no, toolbar=no, scrollbars=no'

例1、例2はソースが簡単になるが、例3の場合は、開く小窓をシンプルに表示することができる。例4では、余白部分を見せずに表示します。


それぞれのソースをおいておきます(例によって<>改行は半角に)

例1 <a href="http://blogimg.goo.ne.jp/user_image/47/87/f2a4a8d66d800b7cbc309412222f3b93.jpg"><img src="http://blogimg.goo.ne.jp/thumbnail/47/87/f2a4a8d66d800b7cbc309412222f3b93_s.jpg"></a> 

例2 <a href="http://blogimg.goo.ne.jp/user_image/47/87/f2a4a8d66d800b7cbc309412222f3b93.jpg"
target="_blank"><img src="http://blogimg.goo.ne.jp/thumbnail/47/87/f2a4a8d66d800b7cbc309412222f3b93_s.jpg"></a> 

例3 <span style="font-size:0px;">
<<img src="http://blogimg.goo.ne.jp/thumbnail/47/87/f2a4a8d66d800b7cbc309412222f3b93_s.jpg"
onclick="window.open('http://blogimg.goo.ne.jp/user_image/47/87/f2a4a8d66d800b7cbc309412222f3b93.jpg',
'_blank','width=386, height=580,menubar=no, toolbar=no, scrollbars=no')"></span>

例4 <span style="font-size:0px;">
<<img src="http://blogimg.goo.ne.jp/thumbnail/47/87/f2a4a8d66d800b7cbc309412222f3b93_s.jpg"
onclick="window.open('http://dongwcat.net/test/test.htm',
'_blank','width=386, height=580,menubar=no, toolbar=no, scrollbars=no')"></span>

コメントの投稿

非公開コメント

FC2カウンター
プロフィール

dongwcat

Author:dongwcat
FC2ブログへようこそ!

最新記事
最新コメント
最新トラックバック
カテゴリ
検索フォーム
RSSリンクの表示
リンク
ブロとも申請フォーム

この人とブロともになる

QRコード
QRコード
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。