↑jumpマークにカーソルを合わせて暫く経つと（ここでは2秒で）indexに戻る。直ぐではないところがミソで、カーソルをはずせば作動は停止する。クリック不要だし、撤回も出来る。ユニバーサルアクセス的ではないだろうか。 （実装は見合わせてますが...）
↑jumpマークにカーソルを合わせて暫く経つと（ここでは2秒で）indexに戻る。直ぐではないところがミソで、カーソルをはずせば作動は停止する。クリック不要だし、撤回も出来る。ユニバーサルアクセス的ではないだろうか。
（実装は見合わせてますが...）
一般に、コンテンツを複数のページに分けた場合、末尾に［次のページ］へのリンクが設けられる。そこをマウスでクリックすればいいのだが、カーソルキーでこれを行なう手がある。
下記のスクリプトはいかがだろうか。<head></head>の間にこれを記述すればよい。"前ページのURL"、"次ページのURL"には、しかるべきリンク先URLを入れておくこと。但しIE4以降（MacではIE5）でないと作動しない。［03.7.13］
<script type="text/javascript"><!--
function checkCSRKey()
{
if (event.keyCode == 37) location.href = "前ページのURL";
if (event.keyCode == 39) location.href = "次ページのURL";
}
window.document.onkeydown = checkCSRKey;
// --></script>
これで、カーソルキー右（→）で次のページへ、カーソルキー左（←）で前ページに移動する。
※なお、history（履歴）のナビゲーションは、閲覧順序の問題であり、はじめて見るページで、次のページ？は意味をなさない。
実はLINKエレメントのRELで、prev（previous）、next、contents等といったナビゲーションもあるのだが、IEやNN等のブラウザではサポートされていない［注2］（実装されているブラウザもある）。この種のナビゲーションを、ボタンを使って実現する事は出来るが、Webアクセシビリティの観点では、キーボードが使えた方がよい［注3］。
LINK…REL…contentsに相当する機能、つまり一連の文書群の目次ページへのリンク機能も同様に実現可能である。ただ、それに相応しいキーの選択が難しい。カーソルキー上・下は画面のスクロールに使われている。またescキーは左手を使う（カーソルキーは右手にある）し、WindowsのIEでは作動しない（MacのIEでは作動する）。そこで /（スラッシュ）キーを使ってみる。メインキーボードのスラッシュは日本語入力オフでないと作動しないが、テンキーの方は常に作動するので、両方仕込んでみる。
<script type="text/javascript"><!--
function checkNavigation()
{
if (event.keyCode == 37) location.href = "前ページのURL";
if (event.keyCode == 39) location.href = "次ページのURL";
if (event.keyCode == 111) location.href = "目次ページのURL";
if (event.keyCode == 191) location.href = "目次ページのURL";
}
window.document.onkeydown = checkNavigation;
// --></script>
任意のキーに任意のリンクを設定する事ができるわけだから、例えばテンキーを使って、複数のメニューからダイレクトに選べるi-modeのようなナビゲーションも可能である［注3］。ノートPCを考えると、メインキーボードの数字キーも使えた方がいいから、そちらのキーコードも併用した方がいいだろう。
関連キーコードをまとめて以下に示す（資料によって異なるが、現実に下記のコードで動いている）。d、f、p、t は一つの提案である（実装してみると、結構便利）。なお実際に数字キーを仕込む時は、1から使い始め、最後を0にした方がいいだろう。
|
|
※本ページにはキーナビを仕込んでおいた。IEであれば、カーソル左右の他、スラッシュで本ディレクトリのindexページに、またMacならescで本サイトのトップページに行けるはずだ。また、いくつかのlink要素も仕込んでおいたので、対応ブラウザ（MozillaやiCab）ではナビゲーションバーが有効なはずだ。ただ、キーナビとlink要素を両方書くのは、少々面倒くさい（いずれにせよ、URL誤記のリスクもある）。これには、ツールが使用できれば問題ないのかもしれない。
スライドショーには色々やり方があるが、スライドの数だけファイルを作るのも、枚数によっては面倒である。一定時間のスライド送りで良ければ、ファイルは一つで済む。下記は簡単な一例である。画像をキャッシュしておらず、画像枚数は無制限である。画像のファイル名は連番数字で、サイズは統一している。下記例では、101.jpg〜142.jpg、700×500になっている。経過時間は6秒にしてある（変更可能にも出来る）。
<head>
<script type="text/javascript"<!--
timerID = 0;
count = 101;
function changeImg()
{
if (count >=101){
count %= 142;
count ++;
document.pho.src = count + ".jpg";}
}
// --></script>
</head>
<body onload="timerID = setInterval('changeImg()',6000);" onunLoad="clearInterval(timerID);">
<table border="0" cellspacing="0" cellpadding="10">
<tr><td align="center"><img src="101.jpg" name="pho" width="700" height="500"></td></tr>
</table>
</body>
ついでに、一時停止、再開（一時停止からの再開）、リスタート（最初から再開）のボタンも付ける場合。
<form>
<input type="button" value="Back To Index" onClick=location.href="../index.html">
<input type="button" value="一時停止" onClick="clearInterval(timerID)">
<input type="button" value="再開" onClick="clearInterval(timerID);timerID = setInterval('changeImg()',6000)">
<input type="button" value="リスタート" onClick="clearInterval(timerID);location.reload()">
</form>
次の写真ボタン、前の写真ボタンを付ける事もできる。前ボタンには、タイマーを減らすfunctionを追加しておく必要がある。下記例では、0.3秒後に作動するようにした（特に意味はないが）。［03.9.16］
function prevImg()
{
if (count >= 102) {
count --;
document.pho.src = "0" + count + ".jpg";}
}
#ボタンの追加↓
<input type="button" value="次の写真" onClick="clearInterval(timerID);timerID = setTimeout('changeImg()',300);">
<input type="button" value="前の写真" onClick="clearInterval(timerID);timerID = setTimeout('prevImg()',300);">
報告書HTMLを作る際、図版の扱いが最大の問題になる。現状では133dpiにしている（現状で多い96dpi位のディスプレイで充分な視認性がある）。つまり元の図版（印刷するとした場合の）が16.4×24cmだとすると、858×1256ピクセルになる。こうした大サイズ画像は、全体を見渡すのが難しい。そこで、読込んだ画像のサイズを変えられるScriptである。とりあえず、デフォールトを実ピクセル表示とし、画像をクリックすることでサイズを半分にしている。（ひねりはないが）再拡大も可能にしてみた。
<a href="#" onClick="document.img.width=429 ;document.img.height=628"> <img src="fig/f01.jpg" name="img" width="858" height="1256" alt="図" align="left" hspace="8" vspace="4" border="0"> </a> <a href="#" onClick="document.img.width=858 ;document.img.height=1256">再拡大</a>