×××××'s home page

・自己紹介

・日記

・リンク

・隠し部屋

　----上の、よくある形のＨＰ。この中には幾つかの隠されたリンクがあります----

　初級編として、ＨＴＭＬだけで表現できる隠しページリンクを二三紹介します。これらは「ソースを見る」という作業によって移動先のＵＲＬがモロバレになってしまうので、あまり機密に用いることはお勧めできません。バレてもいい、あるいはバレることが目的であるような場合に使いましょう。

1-1.　背景と同じ色の文字を使う

　背景と同じ色の文字は、背景にまぎれて見えません。その文字から隠しページへリンクさせます。

<a href="移動先url" style="color:#背景色">文字</a>

　ただしカーソルがその文字に重なると、矢印の形状が変わります。また、フッタに移動先のＵＲＬが表示されてしまうため、簡単に見つかってしまいます。それを防ぐには、以下のようにすると良いでしょう。

<a href="移動先url" style="color:#背景色;cursor:default"
 onmouseover="status=''; return true"
 onmouseout="status=''; return true">文字</a>

　ここでonmouseoverを、

status='みつかっちゃった！'

　あと問題があるとしたら、ブラウザの設定で「スタイルシート」をOFFにしている人には、色が変わらないため、文字は丸見えになります。またネットスケープで見た場合、カーソルの形状はしっかりと指差し形に変わってしまいます。

　上の例では「・リンク」の下にありますよ。

1-2.　リンク文字の下線を消す

　リンクを設定すると、その文字の下に線が引かれます。しかしこの線は取ることができます。headタグの間に、以下のように打ち込んで下さい。

<style type="text/css">
<!--
	a{text-decoration:none}
-->
</style>

　これでリンク文字の下線が消えます。上の例では、たくさん並んでいる★のひとつがリンクしています。

　また、マウスを重ねるとポインタの形状が変わる、フッタにＵＲＬが出る、これらを防ぎたいときは、

<a href="移動先url" onmouseover="status=''; return true"
 onmouseout="status=''; return true"
 style="cursor:text">★</a>

として下さい。でもここまですると、誰も見つけられないかも…。

　ちなみにこれも、スタイルシートをOFFにされると下線が消えません。あきらめましょう。

1-3.　クリッカブルマップ

　画像の一部分をクリックすると別のＵＲＬにジャンプする、これをクリッカブルマップと呼びますが、結構簡単に作ることができます。

<img src="画像url" usemap="#名前１">
<map name="名前１" style="cursor:default">
<area shape="circle"
 coords="Ｘ座標,Ｙ座標,半径" href="移動先url">
</map>

　「名前１」とあるところは適当につければよい。Ｘ座標,Ｙ座標,半径はピクセル単位の数字を入れる。半径を小さくすればかなり見つかりにくくなるでしょう。これはどんな写真にも適用できるので、いろいろ面白い使い方があると思います。ちょっと勉強してみて下さい。ちなみに上の例では、ちょうど太陽の位置がリンクしています。

　フッタのメッセージは、クリッカブルマップの場合は消せないみたい。消し方知ってる人は教えて。

1-4.　その他

　あとは、「ソースのコメントに書き込んでおく」とかいう方法もあるが、

<!--
秘密の部屋にご招待！
/himitu.html
-->

多分誰も気付かない。ほどほどに。