2005年03月29日 21:03
画像を別窓で開く
なんかネタがないので、最近始めるようになった画像をクリックすると別窓で開くというのを書いてみます。
IEでの動きだと新しいブラウザが立ち上がるのではなくて、枠だけのもの。
前にも載せましたが試しに↓をクリックしてみてください。
これはJavascriptで以下のように書いてます
IEでの動きだと新しいブラウザが立ち上がるのではなくて、枠だけのもの。
前にも載せましたが試しに↓をクリックしてみてください。
これはJavascriptで以下のように書いてます
<script type="text/javascript">
<!--
function SubWindow112() {
open("http://junike.livedoor.biz/image/050327_5.jpg", "Window02", "resizable=1, scrollbars=0, menubar=0, directories=0, status=0, location=0, width=540, height=410")
}
document.write("<a href='javascript:SubWindow112()'><img src='http://junike.livedoor.biz/image/050327_5.jpg' width='300' alt='現栃木駅'></a>");
// -->
</script><br>
SubWindowの赤字のところの番号は同じものにします。
同じページにいくつもの画像をこの方法で置く場合はこの赤字の数字がダブらないようにしてください。それは１つの記事だけでなくて、トップページに表示されている間は別の記事であっても番号は違うものにします。
青字には（フォルダ名および）ファイル名をhttpで始まるフルパスで入れます。２箇所ある最初の方が別窓で開いたときに見せるファイル、後の方が記事本体に表示されるもの。同じファイルにすれば手間がかからずいいですが、別のものにすれば記事本体のサムネイルの方を小さい画像ファイルを用意してそれを表示させるということもできます。画像が多い場合や別窓で開く画像が大きい場合は後者の方が記事本体を表示させる時間が短くていいと思います。
緑字のところがサイズですが、最初の方が別窓のサイズ、後の方が記事本体上のサイズ。別窓の方は実際の画像の大きさよりも20〜30pxくらい大きめにした方が余白がちょうどいいかもしれません。後の記事本体の方はwidhtだけでもheightだけでも大丈夫です。
それからもっとも重要なこと。これを含めた記事は編集画面のフォーマットで「改行を<br/>タグに変換」ではなく「変換しない」の方にして書かなければなりません。Javascriptの部分はそのままでいいのですが記事本文の方で改行すべきところには<br/>を入れます。
そこがめんどくさいです。だったらスクリプトの方の改行を削除して「改行を<br/>タグに変換」にすればとも思うのですが、これだとなぜかうまくいきませんでした。
若干めんどうですが、これでももし参考になれば。
もしかしてもっとスマートなやり方があるかもしれませんが。。（あったら教えてください）
ちなみにimgタグにリンクをつけるとよくあるブラウザでの別窓になります。
↓こちら
ソースは↓
<a href="http://junike.livedoor.biz/image/050327_5.jpg" target="_blank"><img src="http://junike.livedoor.biz/image/050327_5.jpg" width="150px"></a>
<!--
function SubWindow112() {
open("http://junike.livedoor.biz/image/050327_5.jpg", "Window02", "resizable=1, scrollbars=0, menubar=0, directories=0, status=0, location=0, width=540, height=410")
}
document.write("<a href='javascript:SubWindow112()'><img src='http://junike.livedoor.biz/image/050327_5.jpg' width='300' alt='現栃木駅'></a>");
// -->
</script><br>
SubWindowの赤字のところの番号は同じものにします。
同じページにいくつもの画像をこの方法で置く場合はこの赤字の数字がダブらないようにしてください。それは１つの記事だけでなくて、トップページに表示されている間は別の記事であっても番号は違うものにします。
青字には（フォルダ名および）ファイル名をhttpで始まるフルパスで入れます。２箇所ある最初の方が別窓で開いたときに見せるファイル、後の方が記事本体に表示されるもの。同じファイルにすれば手間がかからずいいですが、別のものにすれば記事本体のサムネイルの方を小さい画像ファイルを用意してそれを表示させるということもできます。画像が多い場合や別窓で開く画像が大きい場合は後者の方が記事本体を表示させる時間が短くていいと思います。
緑字のところがサイズですが、最初の方が別窓のサイズ、後の方が記事本体上のサイズ。別窓の方は実際の画像の大きさよりも20〜30pxくらい大きめにした方が余白がちょうどいいかもしれません。後の記事本体の方はwidhtだけでもheightだけでも大丈夫です。
それからもっとも重要なこと。これを含めた記事は編集画面のフォーマットで「改行を<br/>タグに変換」ではなく「変換しない」の方にして書かなければなりません。Javascriptの部分はそのままでいいのですが記事本文の方で改行すべきところには<br/>を入れます。
そこがめんどくさいです。だったらスクリプトの方の改行を削除して「改行を<br/>タグに変換」にすればとも思うのですが、これだとなぜかうまくいきませんでした。
若干めんどうですが、これでももし参考になれば。
もしかしてもっとスマートなやり方があるかもしれませんが。。（あったら教えてください）
ちなみにimgタグにリンクをつけるとよくあるブラウザでの別窓になります。
↓こちら
ソースは↓
<a href="http://junike.livedoor.biz/image/050327_5.jpg" target="_blank"><img src="http://junike.livedoor.biz/image/050327_5.jpg" width="150px"></a>
