--年--月--日

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
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の画像の場合は見当たらなかったので、'' (シングルクォーテーションマークが2つ並んでいます)と空白にしました。
 また、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>


group2-1.jpg


↓ ぽちっと応援お願いします♪ m(_ _)m
人気blogランキング

スポンサーサイト

スレッドテーマ:プログラミング:コンピュータ

メイン

≪New BlogPet「うさも」の背景紹介<夏6> | Top | MENSAのWorkout久々のクイズです♪ Old≫

トラックバックURL


コメント

>鍵コメさん、こんにちはー♪
この内容でしたら、鍵コメにする必要はありませんよ。(*^-^)
むしろ、他の訪問してくださるみなさんに読んでいただきたいくらいです。
ここのブログは、「わからないことは、みんなで解決しよう!」をモットーにしています。
ですから、ブログの設定やテンプレート(スキン)等の質問を非公開コメントで
投稿するのは遠慮してもらうようにしています。
詳しくは下の記事を読んでくださいね。m(_ _)m
http://yozoblog2.blog63.fc2.com/blog-category-26.html

それと、今回の質問について、大変勉強になる質問をいただきましたので、
追記させていただこうと思っています。m(_ _)m

コメント

お返事ありがとうございます。
注意事項に目を通さず、失礼しました。

恥ずかしいですが、公開します。

以前、質問に対する答えで
「ご自分でもっと勉強されたらいかかがでしょうか?」と言う文字を目にしてから
なんだか・・・<(_ _)>


今後とも宜しくお願いします。

また後でゆっくりきますね!

コメント

>みみこぉ☆^さん、こんばんはー♪いらっしゃいませー♪
遊びにきてくださってうれしいですよ。一応見本としての例しか追記していませんが、まずは「習うより慣れろ」っということで、真似してJavaScriptを動かしてみましょう。それでtopやleftなどを一つずつさわってみてどれだけ変化するのかを確認していけば、自分にあった使い方ができると思いますよ。

>「ご自分でもっと勉強されたらいかかがでしょうか?」
うーん。どういう事情かわかりませんが、「ご自分で努力すればできるのに、目先の答えだけを求めるなんてもったいないですよ」くらいに受け止めておけばよろしいのではありませんか?相手の方はどうしてそのようにおっしゃたのかというのを、自分に対する意地悪だったのか?激励だったのか?どうせなら、激励として受け取って、質問のしかたなど悪かった点がなかったかどうか、前向きに考えることができますよね。上手くいえませんが、そのようにとらえておけばよろしいと思いますよ。\(*⌒0⌒)bがんばっ♪

コメント

「記入例3」 ものすごく嬉しいです
ありがとうございます
聞きたい事もあるのですが、とりあえず、自分でいじってみます
つまずいてしまったら、ヘルプに来させて頂きますので、その時は宜しくお願いします

「ご自分で・・・」の答えに、質問をした人は悲しい事に逆切れ状態で
「分からないから質問しているのに」みたいな感じで、正直見苦しい状態になっていました

努力をしないと覚えないですよね?
私もまだまだ勉強不足ですが、頑張っていきますので、応援宜しくお願いします

コメント

悪戦苦闘しています。

やはり、記事を書くところで画像アップしたときに、「記入例3」で紹介されているタグを入れないと無理なのですよね?

今夜は睡魔に勝てそうにないのでPC電源オフします

コメント

>みみこぉ☆^ さん、おはよーございまっす♪
2006.08.21 23:06のレスでーす♪

>「記入例3」 ものすごく嬉しいです ありがとうございます
お役に立ててうれしいですよ。yozoもいい勉強になりました。
どうもJavaScriptにはまだまだ慣れていませんので、┐( -"-)┌ヤレヤレ...

>聞きたい事もあるのですが、とりあえず、自分でいじってみます
はい♪まずはさわらないと、動かさないと、おもしろくないですもんね。
これはなんなのだろうってさわって初めて「おお!」とか「あら?」とか
なりますもんね。とってもいいことだと思います。d(@^∇゚)/ファイトッ♪

>「ご自分で・・・」の答えに、質問をした人は悲しい事に逆切れ状態で
>「分からないから質問しているのに」みたいな感じで、
>正直見苦しい状態になっていました
あらら・・・そうだったのですか?サポートの掲示板などでよく見られますね。
質問してあげてるんだから教えろよ・・・のような態度はいけませんよね。
また、教えてあげてるんだから・・・もいただけないように思いますよ。
どっちがどうとは、言えませんし、言うつもりもありませんが、見苦しいのはうなづけますね。┐(´-`)┌

>私もまだまだ勉強不足ですが、頑張っていきますので、
>応援宜しくお願いします
はい♪お互いがんばりましょうね。Webを楽しみましょう♪v(*'-^*)bぶいっ♪

コメント

>みみこぉ☆^ さん、こんにちはー♪ 2006.08.22 00:36 のレスでーす♪
いろいろがんばっておられるようですね。
まずは、yozoの記事の内容をコピペして使ってみてください。画像はご自分で用意してくださいね。それで動かすことですね。
それから、いろいろと触ればわかってくるのでは・・・と思います。
のんびり楽しみましょうね。 d(@^∇゚)/ファイトッ♪

コメント

あれから色々とやってみたり、調べてみたりしましたが
記事を書くところでしか「記入例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ではちゃんと見れていますか?

修正箇所がありましたら、ご指導宜しくお願いします

コメント

> みみこぉ☆^さん、こんばんはー♪
たった今、お邪魔してきました。できてますよ♪
オメデトーゴザイマッス♪(*⌒ー⌒)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

コメント

>top=10,left=150 ← 設定しました

>width="150" height="132" ← これなんですが、普通に画像を入れて記事を書くときには、設定しているサムネイルの大きさで表示され
記事ないの中には、このタグが入っていなかったので、省いたのですが
やはり指定したほうがいいんですかね?

ど素人なもんで、面倒な質問ばかりでごめんなさい。

コメント

>みみこぉ☆^さん、こんにちはー♪
やっぱり、imgタグの中のalt、width、heightは指定しておくほうがいいですね。ブラウザによって表示に不具合がでることにもなりかねないようですよ。
まだまだ、yozoも勉強中です。お時間のあるときにでも、
このページでエラーチェックしてみてくださいね。(*^-^)
http://openlab.ring.gr.jp/k16/htmllint/htmllint.html

コメントする

お楽しみ:
サイト管理者にのみ通知する

チェックするとコメントプレビューがオンになります。

ご利用のブラウザ、設定ではご利用になれません。


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