Ads by Google
新しい記事を書く事で広告が消せます。
--年--月--日
新しい記事を書く事で広告が消せます。
2006年07月31日
別窓を開く場合の各種設定（JS初級）
別窓(サブウィンドウ)についてちょっとまとめてみました。
onclick="window.open(
'開きたいページのurl',
'開きたいページのタイトル',
'オプション'
);"
- 画面の上端からの位置 top=ピクセル数
- 画面の左端からの位置 left=ピクセル数
- ウインドウの幅 width=ピクセル数
※サブウインドウのサイズは100px未満は設定できません。- ウインドウの高さ height=ピクセル数
※サブウインドウのサイズは100px未満は設定できません。- スクロールバーの表示/非表示 scrollbars=yes/no
- タイトルバーの表示/非表示 titlebar=yes/no
- メニューバーの表示/非表示 menubar=yes/no
- ツールバーの表示/非表示 toolbar=yes/no
- ロケーションバー※の表示/非表示 location=yes/no
※ウインドウの右下の部分です。- ステイタスバーの表示/非表示 status=yes/no
※ウインドウの左下の部分です。- ディレクトリバーの表示/非表示 directions=yes/no
※ツールバーのアドレスの部分です。- ウィンドウサイズの変更の可/不可 resizable=yes/no
- フルスクリーンで開くかどうか fullscreen=yes/no
※この場合はサイズ指定は不要です。
※オプションは、オプション名＝値で指定します。複数指定をする場合は、「,」(半角カンマ)で区切ります。
記入例1
<input type="button" value="別窓" onclick="window.open('http://yozoblog.exblog.jp/', 'yozoの気が向いたと記','top=10,left=150,width=450,height=450,scrollbars=yes,titlebar=yes,menubar=no,toolbar=no,location=no,status=yes,directions=no,resizable=yes,fullscreen=no');" />
記入例2
ツールバーなど一切表示されず、別窓の内容だけを表示するように設定してみました。
以下のオプションをnoにします。
スクロールバーの非表示 scrollbars=no
タイトルバーの非表示 titlebar=no
メニューバーの非表示 menubar=no
ツールバーの非表示 toolbar=no
ロケーションバーの非表示 location=no
ステイタスバーの非表示 status=no
ディレクトリバーの非表示 directions=no<input type="button" value="別窓" onclick="window.open('http://yozoblog.exblog.jp/', 'yozoの気が向いたと記','top=10,left=150,width=450,height=450,scrollbars=no,titlebar=no,menubar=no,toolbar=no,location=no,status=no,directions=no,resizable=no,fullscreen=no');" />
ウインドウ上のタイトルバーウインドウ下のステイタスバーについては、JavaScriptの設定では非表示にできませんでした。m(_ _)m
記入例3
大きい画像のサムネイルを記事に貼って、そのサムネイル画像をクリックすると元の画像が開くようにしました。
<a onclick=window.open("〜")><img /></a>の形で設定すればできました。
ただ、別窓のタイトルがfc2の画像の場合は見当たらなかったので、'' (シングルクォーテーションマークが２つ並んでいます)と空白にしました。
また、widthとheightは実物よりも少し大きめにしてます。この属性を省略しても動きますがおすすめできません。<a onclick="window.open('クリックしたときに表示させたい画像url','','top=10,left=150,width=450,height=400,scrollbars=no,titlebar=no,menubar=no,toolbar=no,location=no,status=no,directions=no,resizable=no,fullscreen=no');"><img src="サムネイル画像のurl" alt="画像の代わりに表示される文字" width="150" height="132" /></a>
↓ ぽちっと応援お願いします♪ m(_ _)m
≪New BlogPet「うさも」の背景紹介＜夏6＞ | Top | MENSAのWorkout久々のクイズです♪ Old≫
トラックバックURL
コメント
この内容でしたら、鍵コメにする必要はありませんよ。(*^-^)
むしろ、他の訪問してくださるみなさんに読んでいただきたいくらいです。
ここのブログは、「わからないことは、みんなで解決しよう！」をモットーにしています。
ですから、ブログの設定やテンプレート（スキン）等の質問を非公開コメントで
投稿するのは遠慮してもらうようにしています。
詳しくは下の記事を読んでくださいね。m(_ _)m
http://yozoblog2.blog63.fc2.com/blog-category-26.html
それと、今回の質問について、大変勉強になる質問をいただきましたので、
追記させていただこうと思っています。m(_ _)m
Posted by 鍵コメさんへ at 2006.08.21 14:58 | edit
コメント
注意事項に目を通さず、失礼しました。
恥ずかしいですが、公開します。
以前、質問に対する答えで
「ご自分でもっと勉強されたらいかかがでしょうか？」と言う文字を目にしてから
なんだか・・・<(_ _)>
今後とも宜しくお願いします。
また後でゆっくりきますね！
Posted by みみこぉ☆^ at 2006.08.21 19:17 | edit
コメント
遊びにきてくださってうれしいですよ。一応見本としての例しか追記していませんが、まずは「習うより慣れろ」っということで、真似してJavaScriptを動かしてみましょう。それでtopやleftなどを一つずつさわってみてどれだけ変化するのかを確認していけば、自分にあった使い方ができると思いますよ。
＞「ご自分でもっと勉強されたらいかかがでしょうか？」
うーん。どういう事情かわかりませんが、「ご自分で努力すればできるのに、目先の答えだけを求めるなんてもったいないですよ」くらいに受け止めておけばよろしいのではありませんか？相手の方はどうしてそのようにおっしゃたのかというのを、自分に対する意地悪だったのか？激励だったのか？どうせなら、激励として受け取って、質問のしかたなど悪かった点がなかったかどうか、前向きに考えることができますよね。上手くいえませんが、そのようにとらえておけばよろしいと思いますよ。＼(*⌒0⌒)ｂがんばっ♪
Posted by みみこぉ☆^さんへ at 2006.08.21 22:25 | edit
コメント
ありがとうございます
聞きたい事もあるのですが、とりあえず、自分でいじってみます
つまずいてしまったら、ヘルプに来させて頂きますので、その時は宜しくお願いします
「ご自分で・・・」の答えに、質問をした人は悲しい事に逆切れ状態で
「分からないから質問しているのに」みたいな感じで、正直見苦しい状態になっていました
努力をしないと覚えないですよね？
私もまだまだ勉強不足ですが、頑張っていきますので、応援宜しくお願いします
Posted by みみこぉ☆^ at 2006.08.21 23:06 | edit
コメント
やはり、記事を書くところで画像アップしたときに、「記入例3」で紹介されているタグを入れないと無理なのですよね？
今夜は睡魔に勝てそうにないのでPC電源オフします
Posted by みみこぉ☆^ at 2006.08.22 00:36 | edit
コメント
2006.08.21 23:06のレスでーす♪
＞「記入例3」 ものすごく嬉しいです ありがとうございます
お役に立ててうれしいですよ。yozoもいい勉強になりました。
どうもJavaScriptにはまだまだ慣れていませんので、┐( -"-)┌ﾔﾚﾔﾚ...
＞聞きたい事もあるのですが、とりあえず、自分でいじってみます
はい♪まずはさわらないと、動かさないと、おもしろくないですもんね。
これはなんなのだろうってさわって初めて「おお！」とか「あら？」とか
なりますもんね。とってもいいことだと思います。d(@^∇ﾟ)/ﾌｧｲﾄｯ♪
＞「ご自分で・・・」の答えに、質問をした人は悲しい事に逆切れ状態で
＞「分からないから質問しているのに」みたいな感じで、
＞正直見苦しい状態になっていました
あらら・・・そうだったのですか？サポートの掲示板などでよく見られますね。
質問してあげてるんだから教えろよ・・・のような態度はいけませんよね。
また、教えてあげてるんだから・・・もいただけないように思いますよ。
どっちがどうとは、言えませんし、言うつもりもありませんが、見苦しいのはうなづけますね。┐(´-｀)┌
＞私もまだまだ勉強不足ですが、頑張っていきますので、
＞応援宜しくお願いします
はい♪お互いがんばりましょうね。Webを楽しみましょう♪v(*'-^*)ｂぶいっ♪
Posted by みみこぉ☆^ さんへ at 2006.08.22 11:04 | edit
コメント
いろいろがんばっておられるようですね。
まずは、yozoの記事の内容をコピペして使ってみてください。画像はご自分で用意してくださいね。それで動かすことですね。
それから、いろいろと触ればわかってくるのでは・・・と思います。
のんびり楽しみましょうね。 d(@^∇ﾟ)/ﾌｧｲﾄｯ♪
Posted by みみこぉ☆^ さんへ at 2006.08.22 12:13 | edit
コメント
記事を書くところでしか「記入例3」のタグを入れる事が出来ないみたいで・・・
写真館にてテストしてみました
http://tennenmimiko.blog50.fc2.com/
こんな感じでやってみました
↓
<a onClick="window.open('クリック後の画像のULR','','width=340,height=270,scrollbars=no,titlebar=no,menubar=no,toolbar=no,location=no,status=no,directions=no,resizable=no,fullscreen=no');"><img src="小さい画像のURL"alt="クリックすると大きい画像が見れますよぉ"></a>
クリック後のURLの大きさは横＝+20で縦＝+30にしてみたら、私のPCでは真ん中あたりに表示されています。
<a onClick="window.open('クリックしたときに表示させたい画像URL','','top=10,left=150,width=450,height=400,scrollbars=no,titlebar=no,menubar=no,toolbar=no,location=no,status=no,directions=no,resizable=no,fullscreen=no');"><img src="サムネイル画像のURL" alt="画像の代わりに表示される文字" width="150" height="132" /></a>
この色の箇所は抜いてみたのですが、yozoさんのPCではちゃんと見れていますか？
修正箇所がありましたら、ご指導宜しくお願いします
Posted by みみこぉ☆^ at 2006.08.22 22:43 | edit
コメント
たった今、お邪魔してきました。できてますよ♪
ｵﾒﾃﾞﾄｰｺﾞｻﾞｲﾏｯｽ♪(*⌒ｰ⌒)o∠★:ﾟ*PAN!
＞top=10,left=150
yozoのパソコン(WinXP Pro+IE6)ではウインドウの位置は大きい画像は右フレーム一杯でしたね。見る人の画面サイズはまちまちなので、左に寄せる指定をしておいたほうがよいかもしれませんね。
＞width="150" height="132"
面倒でしょうけど、imgタグの中のalt、width、heightは指定しておくほうがいいです。FC2はXHTML準拠ですからね。詳しくはこの記事を見てください。
http://yozoblog2.blog63.fc2.com/blog-entry-371.html
Posted by みみこぉ☆^ さんへ at 2006.08.23 00:49 | edit
コメント
＞width="150" height="132" ← これなんですが、普通に画像を入れて記事を書くときには、設定しているサムネイルの大きさで表示され
記事ないの中には、このタグが入っていなかったので、省いたのですが
やはり指定したほうがいいんですかね？
ど素人なもんで、面倒な質問ばかりでごめんなさい。
Posted by みみこぉ☆^ at 2006.08.23 12:48 | edit
コメント
やっぱり、imgタグの中のalt、width、heightは指定しておくほうがいいですね。ブラウザによって表示に不具合がでることにもなりかねないようですよ。
まだまだ、yozoも勉強中です。お時間のあるときにでも、
このページでエラーチェックしてみてくださいね。(*^-^)
http://openlab.ring.gr.jp/k16/htmllint/htmllint.html
Posted by みみこぉ☆^さんへ at 2006.08.23 13:59 | edit