|
【実例】
|
《おことわり》ここでは私のホームページで実際に使っているテクニックを紹介します。JavaScript や Style Sheet を使っていますが、これらは、もともと Netscape Navigator 用に作られたもので、Internet Explorer では表示結果が異なる場合があります。このページは Mozilla for Linux 1.0 で確認をとってあります。
「文字列のボタン」を作るには
<form><input type="button"></form>を使います。value="ホームページ" とすると「ホームページ」という文字がボタンに表示されます。これを押すと index.html にリンクするようにするには次のようにします。
<form><input type="button" value="ホームページ" onclick="location='../index.html'"></form>もといたところに戻るには JavaScript の history.back を使い、次のようにします。
<form><input type="button" value="もとにもどる" onclick='location="JavaScript:history.back();"'></form>テキストモードのブラウザでは、この機能が使えないので、通常のリンクもあわせて書いておくのが親切かと思います。
|
【実例】 |
私のダイアリーのページへのリンクは index.html のままにしておいて、月のはじめに index.html を変更して、その月のページに飛ぶことができるようにしてあります。トップページのリンクを月毎に変更しなくて済むというのが、こうしておくメリットです。次にソースコードを示します。head の部分で JavaScript を定義しており、window.location を使って、目的のページに飛ぶようにしてあります。テキストモードのブラウザのために、マニュアルでリンク先にいくようにもしてあります。
<html> <head> <title>JavaScript Test</title> <script language="javascript" type="text/javascript"> <!-- Hide script from old browsers window.location="diary2001-12.html" //End hiding script from old browsers --> </script> </head> <body> <p>This is designed for JavaScript-enabled browsers. If you have JavaScript turned off in your preferences, you may want to turn it on. If you have an older browser, we suggest upgrading to a current browser.</p> <p>To read this page, click <a href="diary2001-12.html">here</a>.</p> </body> </html>
私の家内のために作ったインデックスページでは、マウスをメニューの上に置くと、メニューの色が変わるようにしました。メニュー項目は三つで、Music Poem Essay です。まず、MUSIC POEM ESSAY という画像をそれぞれ二つの色でつくり、それを music1.gif music2.gif などのように保存しておきました。music1.gif をクリックすると music.html に行くのは、
<a href="music.html"><img src="music1.gif"></a>で良いのですが、music1.gif にカーソルが乗ると画像が music2.gif に切り替わり、カーソルが離れると、もとの music1.gif にもどるようにしたのが onmouseover onmouseout です。これを実現するためには img src に name 属性をつける必要があります。
<a href="music.html" onmouseover="new Image();music.src='music2.gif'" onmouseout="new Image();music.src='music1.gif'"> <img src="music1.gif" name="music"></a>ついでにメニューページの中央に置いた画像も、メニュー項目にカーソルが乗ると色が変わり、また、ポップアップで日本語が出るようにしました。ハミングバードの画像を赤、青、緑の三色で作成し、それぞれを humingbirds1.gif humingbirds2.gif humingbirds3.gif に保存し、onmouseover onmouseout のそれぞれに new Image();humingbirds.src='humingbirds1.gif' などとしました。ポップアップを可能にしているのは title="…" の部分です。IE では alt="…" だけでもポップアップが出ますが、alt はテキストベースのブラウザのために画像にかわって表示する文字列を指定するもので、正しくは title="…" を用います。次は以下の実例のソースコードです。
<table border="0">
<tr>
<td align="right"><a href="music.html"
onmouseover="new Image();music.src='music2.gif';
new Image();humbirds.src='humbirds2.gif'"
onmouseout="new Image();music.src='music1.gif';
new Image();humbirds.src='humbirds1.gif'">
<img src="music1.gif" width="61" height="32"
alt="音楽" title="音楽" border="0" hspace="30" name="music"></a></td>
<td rowspan="3">
<img src="humbirds1.gif" width="200" height="247" name="humbirds"></td>
</tr>
<tr>
<td align="right"><a href="poem.html"
onmouseover="new Image();poem.src='poem2.gif';
new Image();humbirds.src='humbirds3.gif'"
onmouseout="new Image();poem.src='poem1.gif';
new Image();humbirds.src='humbirds1.gif'">
<img src="poem1.gif" width="57" height="34"
alt="詩集" title="詩集" border="0" hspace="30" name="poem"></a></td>
</tr>
<tr>
<td align="right"><a href="essay.html"
onmouseover="new Image();essay.src='essay2.gif';
new Image();humbirds.src='humbirds4.gif'"
onmouseout="new Image();essay.src='essay1.gif';
new Image();humbirds.src='humbirds1.gif'">
<img src="essay1.gif" width="58" height="33"
alt="エッセィ" title="エッセィ" border="0" hspace="30" name="essay"></a></td>
</tr></table>
|
【実例】
|
上記の方法ですと、メニュー項目のために画像ファイルを作らなければなりませんが、スタイルシートを使うと、マウスが乗ったときに文字のスタイルを変えるようにしておけば、簡単に、どのメニューを選ぼうとしているかを示すことができます。
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=euc-jp">
<title>メニュー・セレクト</title>
<style type="text/css">
<!--
a { text-decoration: none; }
a:link { color: #0000ff; }
a:visited { color: #0000ff; }
a:hover { color: #00ff00; }
a:active { color: #ff0000; }
-->
</style>
</head>
<body>
<center>
<h1><a href="music.html" title="音楽">MUSIC</a></h1>
<h1><a href="poem.html" title="詩集">POEM</a></h1>
<h1><a href="essay.html" title="エッセィ">ESSAY</a></h1>
</cneter>
</body>
</html>
スタイルシートのうち、a:hover
がマウスがあたった時の指定になります。上の HTML
を実際に動かしてみると青い文字が緑に変わるのが確認できるはずです。a
{text-decoration: none;}
によって、リンクをはってある文字列から強制的にアンダーラインをはずすことができます。これを使う場合は、a:link
{color: #0000FF;}
などのように、色を変えるなどして、リンクをはってある文字列を他の文字列から区別する工夫が必要です。|
【実例】 MUSICPOEMESSAY |
新しいウィンドウを開くには、JavaScript に新しいウィンドウを開くファンクションを指定しておきます。ファンクションの記述は C 言語の記述と似ています。
functuion ファンクションの名前(){
ファンクションの詳細;
}
ウィンドウを開くには open() を使います。括弧の中に
ソース、ウィンドウの名前、ウィンドウの属性を指定します。属性にはウィンドウの大きさと表示すべき項目を入れられます。ツールバーのない幅300、高さ300
の小さなウィンドウに neko.html を表示させるのに head
に次のように書きました。
<script language="JavaScript">
<!--
function OpenNeko(){
open("neko.html","SecWin","width=300,height=300,toolbar=no,scrollbars=no");
}
//-->
</script>
body には form-button を使ってクリックすると OpenNeko()
ファンクションを呼び出すようにしました。
<form><input type="button" value="ミースケ" onclick="OpenNeko()"></form>
<a href="JavaScript:OpenNeko()">｜ミースケを見る｜</a>オープンしたウィンドウを閉じるには self.close() を使います。私は neko.html に次のようなボタンを作って、このウィンドウを閉じることができるようにしました。
<form><input type="button" value="Close" onclick="self.close()"></form>ボタンを使わずに
<a href="self.close()"> ｜Close｜ </a>とすることもできます。
|
【実例】 |