ポインタの装飾
前回はポインタの指定方法をご紹介しましたが、今回のテーマはそのポインタを動かした時、囲りに四角い飾りが現われるスクリプトの記述方です。これまで｢文字の応用｣や｢ポップアップ･ヘルプの挿入｣でご紹介したパターン同様、今回もCSS(スタイルシート)とJavaScriptの機能を組み合わせます。また、最初にお断りしておくと、ネットスケープなどインターネット･エクスプローラ以外では機能しません。
ポインタの四角い装飾それが具体的にどのような装飾かといえば右図のようなもので、実例はサンプル･ページをご覧いただければ、よくおわかりいただけることでしょう。なお、サンプル･ページの各メニューへ実際にリンクを設定してありますが、便宜上、すべてのリンクは新しいウィンドウへ表示されます。したがって、メニューとして活用されるのでしたら、こちらのサンプル･ページでなく｢ホームページ｣をご利用ください。
スクリプトはＨＴＭＬ文書の“ヘッダ”と呼ばれる最初の部分(<head>と</head>の間)と“ボディー”と呼ばれる本文の部分(<body>と</body>の間)の両方へ書き込む必要があります。まず、ヘッダ部は、
<head>
<meta http-equiv="imagetoolbar" content="no">
<script>
var i = 0
function moveCursor(){
++i
if(i == 20){
i = 0}
cursor.item(i).style.pixelLeft = event.clientX - cursor.item(i).style.pixelWidth/2
cursor.item(i).style.pixelTop = event.clientY - cursor.item(i).style.pixelHeight/2
cursor.item(i).style.visibility = "visible"}
document.onmousemove = moveCursor
var j = 0
function disappear(){
++j
if(j == 20){
j = 0}
cursor.item(j).style.visibility = "hidden"}
</script>
<style type="text/css">
.type1 {position:absolute;visibility:hidden;font-size:1pt;z-index:10;border-top:1 solid #b00f0f;
border-bottom:1 solid #f08040;border-left:1 solid #008040;border-right:1 solid #112090;}
</style>
</head>
以上のスクリプトで<script>から</script>の部分がJavaScript、最初の<script>は<script Language="javascript">の省略形であり、スクリプト上、省略してもしなくても機能面での違いがあるわけではありません。そして、続く<style type="text/css">から</style>の部分がスタイルシート(CSS)です。この中で｢border-top:1 solid #b00f0f;｣、｢border-bottom:1 solid #f08040;｣、｢border-left:1 solid #008040;｣、｢border-right:1 solid #112090;｣の部分は、それぞれがポインタの囲りへ表示される四角の上辺、下辺、左辺、右辺の太さと色の指定であり、もっと太くしたいなら現在｢1｣となっているのを｢2｣とか｢3｣とか任意の数値に変更すればよく、各６桁の数値を変更する四辺の色が変わります。
続くボディー部では、ヘッダ部で指定した太さや色の四角を、どのようなサイズとタイミングで表示するか指定する必要があり、そのためのスクリプトの記述は以下のとおりです。
<body onload="setInterval('disappear()',30)" style="overflow:hidden;"
bgcolor=#ffffff topmargin=8>
<div id="cursor" class="type1" style="width:200;height:200;"></div>
<div id="cursor" class="type1" style="width:190;height:190;"></div>
<div id="cursor" class="type1" style="width:180;height:180;"></div>
<div id="cursor" class="type1" style="width:170;height:170;"></div>
<div id="cursor" class="type1" style="width:160;height:160;"></div>
<div id="cursor" class="type1" style="width:150;height:150;"></div>
<div id="cursor" class="type1" style="width:140;height:140;"></div>
<div id="cursor" class="type1" style="width:130;height:130;"></div>
<div id="cursor" class="type1" style="width:120;height:120;"></div>
<div id="cursor" class="type1" style="width:110;height:110;"></div>
<div id="cursor" class="type1" style="width:100;height:100;"></div>
<div id="cursor" class="type1" style="width:90;height:90;"></div>
<div id="cursor" class="type1" style="width:80;height:80;"></div>
<div id="cursor" class="type1" style="width:70;height:70;"></div>
<div id="cursor" class="type1" style="width:60;height:60;"></div>
<div id="cursor" class="type1" style="width:50;height:50;"></div>
<div id="cursor" class="type1" style="width:40;height:40;"></div>
<div id="cursor" class="type1" style="width:30;height:30;"></div>
<div id="cursor" class="type1" style="width:20;height:20;"></div>
<div id="cursor" class="type1" style="width:10;height:10;"></div>
:
本 文
:
</body>
ボディー部の最初で｢setInterval('disappear()',30)｣と指定することによって、マウスを動かすとその後20個ある<div>タグが順番に呼び出され、それぞれ30ミリ秒で消えてゆきます。これをもう少し専門的な言葉で説明すると、ページを読み込めばdisappear()関数が30ミリ秒ごとに呼び出され、その役割は<div>タグのvisibilityプロパティを｢hidden｣へ変え、不可視にすることです。いっぽう、ヘッダ部のJavaScriptでマウスのポインタ(カーソル)を動かすとmoveCursor()関数が呼び出され、縦横サイズの違う<div>タグ20個をポインタの周辺へ順を追って配置し、visibilityプロパティを｢visible｣として可視にします。
要は一定時間ごとで20個の<div>タグを不可視にするdisappear()関数と、マウスを動かせば20個の<div>タグをポインタの囲りへ配置して可視にするmoveCursor()関数の２つが同時に機能する仕組みで、<div>タグの数は20個でなくとも任意の数でかまいません。同じく、それぞれの<div>タグで指定している縦と横のサイズやヘッダ部で指定している四辺の色、そして<div>タグでしている表示(消えるまでの)時間などを変えてみると、そうとう違う雰囲気が出ますので、ぜひお試し下さい。
＊興味があるかたは、｢Yokochinのハイパーテキスト･マニュアル｣の｢スタイルシート(CSS)との組み合わせ｣も、ご参照いただけます。
|
お断り