リンクの最近のブログ記事

お気に入り(ブックマーク)登録リンク(Firefox/IE対応)

masanori (2009年1月25日 11:25) | コメント(0)

ブラウザのお気に入り(ブックマーク)に登録するための
リンクです。

HTMLの、表示したい場所へ下のタグを挿入してください。

<a href="javascript:void(0);" onClick="var a=location.href,b=document.title,s=window.sidebar;if(/*@cc_on!@*/false){external.AddFavorite(a,b)}else if(s){s.addPanel(b,a,'')}else{alert('非対応です')};return false;">このページをお気に入りに登録</a>

Internet Explorerおよび、Firefox(Mozilla系)に対応しています。

サンプル：
このページをお気に入りに登録  

 

ページを印刷するリンク

masanori (2009年1月 4日 22:02) | コメント(0)
現在のページを印刷するリンクタグをご紹介します。
HTMLの好きな場所に、次のようなタグを入れるだけです。
<a href="javascript:void(0)" onclick="print();return false;">このページを印刷</a>

画像にマウスを重ねると画像切り替え

masanori (2008年12月29日 10:39) | コメント(0)
画像にマウスを重ねると、画像が切り替わるJavaScript。
最近のブラウザでは、IMGタグ自体にOnmouseoverがあるようですが、
少し前のブラウザは対応していないので、今回は、Aタグで囲っておきます。
次のタグを画像を表示したい場所へ記述し、
画像1ファイル名の箇所と、画像2ファイル名の箇所をそれぞれの画像ファイル名にします。
<a href="javascript:void(0);" onmouseover="document.chgimg.src='画像2ファイル名'" onmouseout="document.chgimg.src='画像1ファイル名'"><img src="画像1ファイル名" name="chgimg"></a>
サンプル：

画像は、イラスト素材の素材ダス様からお借りしました。

ページを移動したり閉じるときに確認する

masanori (2008年12月28日 19:44) | コメント(0)
ページを閉じたり、ページから移動したりするときに
確認ダイアログを出したいときってありますよね。
(ページにとどまることも出来る確認ダイアログ。)
そんなときの方法。

HTMLのBODYタグに、次のような記述を追加します。
onbeforeunload="return '表示したいメッセージ';"
つまり・・・次のように書くということ。
<body onbeforeunload="return '表示したいメッセージ';">

すると・・・そのページから移動したり、そのページを閉じるときに、
本当に良いのかどうか確認するダイアログが表示されます。

サンプルを見る


ボタンをリンクの代わりにする

masanori (2008年12月28日 16:49) | コメント(0)
ボタンをリンクの代わりにして、
ボタンで移動させたいことってありませんか？（ありませんか・・・ね？＾＾；
まあ、ひとまずやってみますか。かなり簡単です。
<input type="button" onclick="location.href='http://ohgita.info/'" value="Masanori's WebSiteへ">
これだけ。このタグを記述するだけです。
念のため書いておきますと、http://ohgita.info/の部分が、リンク先URL。
Masanori's WebSiteへの部分が、表示する文字列です。

サンプル：

履歴移動リンク

masanori (2008年12月28日 16:30) | コメント(0)
履歴を移動するリンクをJavaScriptで作ってみましょう。
次のようなHTMLタグを挿入します。
<a href="javascript:void(0)" onclick="history.back();return false;">前にもどる</a>
<a href="javascript:void(0)" onclick="history.forward();return false;">次へすすむ</a>
<a href="javascript:void(0)" onclick="location.reload();return false;">ページを更新する</a>
サンプル：
前にもどる
次へすすむ
ページを更新する

href(リンク先)をvoid(0)としているのは、リンクが実際にはJavaScriptなので、
リンクとして無効とするため。
onclickで、クリック(またはEnterキーを押すなど)した時に行うJavascript処理を定義します。
return falseは・・・まぁおまじないというか念のためというやつでしょうか。

余談ですが・・・
よくあるJavaScriptの呼び出し方で、
<a href="#" onclick="alert("hoge")">hoge</a>
みたいな感じのがありますが、これは相応しくありません。
なぜなら、hrefが#になっているので、ページ上部へ移動してしまうからです。
« ランダム | メインページ | アーカイブ | 時計・日付 »