JavaScript初級 の記事一覧
- 2008/07/24 スポンサーサイト
- 2006/09/30 戻るボタンを設置しましょう（JS初級）
- 2006/07/31 別窓を開く場合の各種設定（JS初級）
- 2006/07/30 ロールオーバーを使ってみましょう。(JS初級)
2006年09月30日
戻るボタンを設置しましょう（JS初級）
ここのリンクは原則target="_blank"なしの、別ウインドウ(別窓)で開かないようになっています。詳しくはコチラ→リンクを別ウインドウ（別窓）で開かないようにしました。
参照先に飛んでそのあと、戻るときに、ブラウザの『戻る』ボタンをクリックすれば元のページに戻れるのですが、記事の最後に、同じ働きの[戻る]ボタンを設置しておくと、訪問してくれている人が元のページに戻りたいと思ったときに、マウスを大きく動かさなくてもいいので便利ですね。
利用者がスクリプトを使わない環境の場合もあるので、URLに"javascript"を使うこの方法は好ましくないようです。ただ、この記事の[戻る]ボタンについては、スクリプトを使わない環境で動作しなくても、ブラウザの[戻る]ボタンを使えばいいので、特に問題はないと思われます。yozoはこれを使用していますが、強くおすすめできるものではありません。
参照先に飛んでそのあと、戻るときに、ブラウザの『戻る』ボタンをクリックすれば元のページに戻れるのですが、記事の最後に、同じ働きの[戻る]ボタンを設置しておくと、訪問してくれている人が元のページに戻りたいと思ったときに、マウスを大きく動かさなくてもいいので便利ですね。
<input type="button" name="backbutton" id="backbutton" value="戻る" onclick="history.back()" onkeypress="history.back()" tabindex="50" accesskey="p" />
history.back()で、1つ前の履歴に戻ります。ボタンがクリックされたときに1つ前の履歴に戻るようにしたいので、onclick="history.back()"としました。また、onclickをサポートしていないブラウザもあるといけませんから、同じ内容のonkeypressも設定しておきましょう。
value="戻る"は、ボタンに表示される文字です。自由に変更してください。
tabindex="50"は、[Tab]キーを押したときに、フォーカスする順を表します。
accesskey="p"は、IEの場合、[Alt]+[設定した値(ここではp)]でそのボタンをクリックできます。(Macは[Ctrl Key]+[設定した値])
ボタンでなくて戻るのように、URLにJavaScriptを使って簡単に設定することもできます。
<a href="javascript:history.back();">戻る</a>
利用者がスクリプトを使わない環境の場合もあるので、URLに"javascript"を使うこの方法は好ましくないようです。ただ、この記事の[戻る]ボタンについては、スクリプトを使わない環境で動作しなくても、ブラウザの[戻る]ボタンを使えばいいので、特に問題はないと思われます。yozoはこれを使用していますが、強くおすすめできるものではありません。
↓ ぽちっと応援お願いします♪ m(_ _)m
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
2006年07月30日
ロールオーバーを使ってみましょう。(JS初級)
マウスを当てると画像が変化するロールオーバーを使って遊んでみました(*^-^)
設定は簡単ですよ。
設定は簡単ですよ。
<img src="最初に表示したい画像のURL"
onmouseover="this.src='マウスをあてたときに表示したい画像URL'"
onmouseout="this.src='マウスを離したときに表示したい画像URL'"
alt="画像の代わりの文字" width="幅" height="高さ" />※これは説明の都合で４行になっていますが、実際は半角スペースでつながった１行です。
ロールオーバーは通常、「最初に表示したい画像のURL」と「マウスを離したときに表示したい画像URL」を同じ画像にします。
また、使用する画像のサイズ(width="幅" height="高さ")は、全部同じサイズのものにしてください。
↓ ぽちっと応援お願いします♪ m(_ _)m
