その他のテクニック(2)
- 印刷時に改ページするには
- ページの中に時計を表示するには
- アドレス(URL)を表示しないようにするには
- ステータスバーに文字を表示するには
- ステータスバーに文字を流すには
- 「お気に入り」に登録させるには
- 「お気に入り」アイコンを指定するには
- 文字や画像を一時的に非表示にするには
- 画像を自動的に動かすには
- ツリーメニューを表示するには
印刷時に改ページするには
印刷時に改ページするには、page-break-after や page-break-before を用います。下記のような改行を用いることで、印刷時に、この改行の後ろで改ページが行われます。
<br style="page-break-after:always;">
page-break-inside を用いると、指定したブロックの途中での印刷改ページを禁止することも可能です。
<div style="page-break-inside:avoid;"> : </div>
ページの中に時計を表示するには
JavaScript を用いて、デジタル時計を表示します。
<script>
window.addEventListener("DOMContentLoaded", function() {
window.setInterval(function() {
var d = new Date();
document.getElementById('timer').innerHTML = d.toLocaleString();
}, 1000);
});
</script>
<div id="timer"></div>
アドレス(URL)を表示しないようにするには
アドレス(URL)を表示しないようにするには、window.open() で location=no を指定して、アドレスバーの無い別ウィンドウを開くことで可能です。
<button onclick="
window.open('xx.htm', '_blank', 'location=no')">OK</button>
別ウィンドウを開きたくない場合は、画面をフレームに分け、アドレス欄には常にフレームのアドレス(URL)を表示し、個々のページの URL を表示させない方法があります。(→「フレームに分割するには」)
ステータスバーに文字を表示するには
ステータスバーに文字を表示するには、JavaScript の window.status を用います。
<div onmouseover="window.status='★★★'" onmouseout="window.status=''">マウスをのせてみて</div>
リンクに対して用いる場合は、return true を追加してください。
<a href="xx.htm" onmouseover="window.status='★★★'; return true;" onmouseout="window.status=''">マウスをのせてみて</a>
ステータスバーに文字を流すには
私の嫌いなテクニックですが、要望があったので・・・ステータスバーに文字を流します。300 を変更するとスピードを調整できます。鬱陶しいと感じられたり、リンクにマウスを乗せてもジャンプ先が分からなくなるという弊害がありますので、あまり使用しないようにしましょう。
<script>
var msg = "みなさんこんにちは。"
+ "ここは、「とほほのＷＷＷ入門」のページです。"
+ "ゆっくり見ていってください。";
function marqueeStatus() {
msg = msg.substring(1, msg.length) + msg.substring(0, 1);
window.status = msg;
setTimeout("marqueeStatus()", 300);
}
marqueeStatus();
</script>
「お気に入り」に登録させるには
「お気に入り」に登録させるには、JavaScript の addFavorite() を用います。
<script>
function touroku(url, msg) {
if (window.external) {
window.external.AddFavorite(url, msg);
} else {
alert("Internet Explorer 4～11 でのみ使用可能です。");
}
}
</script>
<button onclick="
touroku('http://www.yahoo.co.jp/', 'Yahoo')">お気に入りに登録</button>
「お気に入り」アイコンを指定するには
アラカルトの「「お気に入り」アイコンを指定するには？」を参照してください。
文字や画像を一時的に非表示にするには
スタイルシートの visible を制御することで、文字や画像などの要素を一時的に非表示にすることができます。次の例ではボタンを押すと Hello!! の文字が表示・非表示を繰り返します。
<script>
function kakusu() {
if (window.t1 && window.t1.style) {
if (t1.style.visibility == "hidden") {
t1.style.visibility = "visible";
} else {
t1.style.visibility = "hidden";
}
}
}
</script>
<div id="t1">Hello!!</div>
<button onclick="kakusu()">OK</button>
画像を自動的に動かすには
アラカルトの「画像を自動的に動かす」を参照してください。
ツリーメニューを表示するには
アラカルトの「ツリー型メニューを表示するには」を参照してください。