ウェブサイトのボタンをWindows98風に？
今回は、ご自分でウェブサイトを作成なさっているかた以外は、あまり役立たないかもしれませんが、ウェブサイトでWindows98風のボタンを作成する“Javaスクリプト”の書き方をご紹介します。“ＨＴＭＬ(ハイパー･テキスト･マークアップ･ランゲージ)”に関する知識のないかたでも、なんらかのソフトを使って作成したＨＴＭＬ文書をメモ帳などで開き、以下で説明するとおりのスクリプトを挿入することで、ボタンはWindows98風になるわけです。
各ボタンを３パターンづつ･･･ただし、紙面の関係上、作例を示す以外、大ざっぱな説明しか出来ませんので、疑問があるかたはご遠慮なく電子メールを下さい。可能な限り、お手伝いをさせていただきます。ということで、まずページ下の“ナビゲーション･バー”を作例として、そのスクリプトを書く前に、下準備が必要です。この場合はボタンが４つありますから、それぞれ“枠なし"､"枠あり"､"押した状態”の３パターンづつ、合計12のボタンをペイントなどのツールで作成します。
それが準備できれば、いよいよスクリプトの作成です。最初のステップは以下のスクリプト(<script>から</script>まで)をＨＴＭＬ文書の“ヘッダ”と呼ばれる部分(<head>と</head>の間)へ書き込んで下さい。赤文字で示した部分は先の12ボタンを指定しており､“navbt_1.gif”〜“navbt_4.gif”が“枠なし"、そして“枠あり”は各番号の後に“f”が､“押した状態”は“p”が付いています。これら画像の名称はご使用のファイル名と置き換え、ボタンが４つ以上あれば同じ要領で番号を増やしていくだけです。
<html>
<head>
<script>
function getAppVersion(){
appname=navigator.appName;
appversion=navigator.appVersion;
majorver=appversion.substring(0, 1);
if ( (appname == "Netscape") && ( majorver >= 3 ) ) return 1;
if ( (appname == "Microsoft Internet Explorer") && (majorver >= 4) ) return 1;
return 0;}
function swtch(num, imgname){
if (getAppVersion())
imgname.src=img[num].src;}
imgsrc=new Array();
imgsrc[0]="../images/navbt_1.gif";
imgsrc[1]="../../images/navbt_1f.gif";
imgsrc[2]="../../images/navbt_1p.gif";
imgsrc[3]="../../images/navbt_2.gif";
imgsrc[4]="../../images/navbt_2f.gif";
imgsrc[5]="../../images/navbt_2p.gif";
imgsrc[6]="../../images/navbt_3.gif";
imgsrc[7]="../../images/navbt_3f.gif";
imgsrc[8]="../../images/navbt_3p.gif";
imgsrc[9]="../../images/navbt_4.gif";
imgsrc[10]="../../images/navbt_4f.gif";
imgsrc[11]="../../images/navbt_4p.gif";
if (getAppVersion()){
img=new Array();
for (i = 0; i < imgsrc.length; i++){
img[i]=new Image();
img[i].src=imgsrc[i];}}
</script>
</head>
ヘッダ部のスクリプトが書けると、とりあえず半分終わりました。ＨＴＭＬ文書は、この後“ボディー”と呼ばれる本文へ続き、そこで目指すボタンの部分を見つけて下さい。この作例の場合、最初から“オンマウス”を使ってデザインしましたが、わかりやすいよう、使わない場合を示しておきましょう。ご自分のＨＴＭＬ文書の中でボタンを使っていれば、これと同じようなパターンは見つかるはずです。
<a href="../index.html">
<img src="../../images/navbt_1.gif" border=0 alt="ﾎｰﾑﾍﾟｰｼﾞに戻ります" hspace=10></a>
<a href="../windex.html">
<img src="../../images/navbt_2.gif" border=0 alt="目次に戻ります" hspace=10></a>
<a href="w03.html">
<img src="../../images/navbt_3.gif" border=0 alt="Windows98への乗り換え" hspace=10></a>
<a href="w11.html">
<img src="../../images/navbt_4.gif" border=0 alt="ﾃﾞｽｸﾄｯﾌﾟ･ﾃｰﾏ" hspace=10></a>
これはＨＴＭＬ文書の一部分でボタン３つを指定しています。この部分を以下のように書き換えることで、その画像へポインタを持っていくと“枠つき"、クリックすると“押した状態”の画像に入れ替わるわけです。どこをどう直せばいいかは上と下の作例をじっくり見比べ、ご自分のＨＴＭＬ文書で試してみて下さい。
<img name="Home" src="../../images/navbt_1.gif" border=0 hspace=10 usemap=#Home>
<img name="Index" src="../../images/navbt_2.gif" border=0 hspace=10 usemap=#Index>
<img name="Previous" src="../../images/navbt_3.gif" border=0 hspace=10 usemap=#Previous><map name="Home">
<area coords="0,0,81,17" href="../index.html" onMouseOver='swtch(1,Home)'
onMouseOut='swtch(0,Home)' onClick='swtch(2,Home)' alt="ﾎｰﾑﾍﾟｰｼﾞに戻ります">
</map>
<map name="Index">
<area coords="0,0,81,17" href="../windex.html" onMouseOver='swtch(4,Index)'
onMouseOut='swtch(3,Index)' onClick='swtch(5,Index)' alt="目次に戻ります">
</map>
<map name="Previous">
<area coords="0,0,81,17" href="w03.html" onMouseOver='swtch(7,Previous)'
onMouseOut='swtch(6,Previous)' onClick='swtch(8,Previous)' alt="Windows98への乗り換え">
</map>
<map name="Next">
<area coords="0,0,81,17" href="w11.html" onMouseOver='swtch(10,Next)'
onMouseOut='swtch(9,Next)' onClick='swtch(11,Next)' alt="ﾃﾞｽｸﾄｯﾌﾟ･ﾃｰﾏ">
</map>
その時、特に注意していただきたいのが、<img>タグ、<map>タグ、<area>タグの“name”を変更するなら、関連性のある名前はすべて変えないと機能が損なわれます。同じく､“swtch”の属性(かっこの中)は“ヘッド”のスクリプトで指定した[0]〜[11]の画像と番号が一致しなくてはなりません。また、画像(ボタン)のサイズが本例の82ピクセル×18ピクセルと違う場合は“coords”の数字を画像に合わせて変更して下さい。
以上の基本が把握できたかたは､“Windows98パターンのボタン”に拘(こだわ)らず、いろんな活かし方を考えてみればいいと思います。メニューへマウスを持っていくと、ポインタを置いた項目の色が変わるばかりでなく、左例のような、その項目に｢
｣を付けたりは簡単です。そして静止画と動画を組み合わせた右例のようなパターンなど、アイデア次第でこのスクリプトをどれだけ広げられるか？･･････これも１つのチャレンジでしょう。そこで、薦めた手前、ページ全体を使った筆者の“作例”をご紹介しておきます。
なお、筆者の各“画像目次”下のメニュー･ボタンや“スター･コレクション･ポスター集”本編の写真メニュー･ボタン、そして“マックスのプロフィール”で登場するＴＶボタンをはじめ、それらのデザインが少しでも参考になれば何よりです。
|
お断り