ボタンの色と形

セキュリティ
訪問者名記憶
簡易パスワード
右クリック禁止

便利項目
ポップアップヘルプ
案内ウィンドウ
メニュー小窓
フォームリンク
メールフォーム1
メールフォーム2
簡易注文フォーム
簡易電卓

日時表示
カレンダー
リアルタイム時計
時計と挨拶表示
タイプ風日時バー
最終更新日表示
○○の○○日

メッセージ・画像
挨拶ダイアログ
新ウィンドウを開く
スクロール伝言板
タイプ風伝言板
スクロールバー
画像フェードイン/アウト
背景色変更
クリックボタン

ボタンの色と形

ボタンにカーソルを乗せて見て下さい。クリックするとマイホームにジャンプします。

使用例では、


  
    
       image/a_on.gif
      

      
      
      　　
      
       image/a_off.gif
      

      
    
    
       image/b_on.gif
      

      
      
      　　
      
       image/b_off.gif


上記の一般的な２枚と、下記のはっきりと違いが分かる２枚の画像を使ってみました。 
      

まず、ＨＴＭＬの<HEAD>……</HEAD>の部分（最初の部分）に置きます。

<SCRIPT LANGUAGE="JavaScript">
<!----------------------

var ver4 = (navigator.appVersion.charAt(0) == "4");
var NN4  = ver4 && (navigator.appName == "Netscape");
var IE4 = ver4 && (navigator.appName.charAt(0) == "M");
var NN3 = ((navigator.appVersion.charAt(0) == "3") && (navigator.appName == "Netscape"));


function In(nam,num) {
        if(NN3 || NN4 || IE4) document.images[nam].src = menu[num].src;
}

function Out(nam,num) {
        if(NN3 || NN4 || IE4) document.images[nam].src = menu[num].src;
}    

if(NN3 || NN4 || IE4){
        var menu = new Array();
        menu[0] = new Image();  menu[0].src = "image/a_on.gif";
        menu[1] = new Image();  menu[1].src = "image/a_off.gif";
        menu[2] = new Image();  menu[2].src = "image/b_on.gif";
        menu[3] = new Image();  menu[3].src = "image/b_off.gif";
}

//----------------->
</SCRIPT>



そして、表示させたいところにはこれをおいてください。

<A HREF="Aをクリックしたときのリンク先のアドレス" OnMouseOver="In('A',0);return true" OnMouseOut="Out('A',1)">
<img src="image/a_off.gif" name="A"  BORDER="0"></A>

<A HREF="Bをクリックしたときのリンク先のアドレス" OnMouseOver="In('B',2);return true" OnMouseOut="Out('B',3)">
<img src="image/b_off.gif" name="B"  BORDER="0"></A>

更に解説します。

        menu[0] = new Image();  menu[0].src = "image/a_on.gif";
        menu[1] = new Image();  menu[1].src = "image/a_off.gif";
        menu[2] = new Image();  menu[2].src = "image/b_on.gif";
        menu[3] = new Image();  menu[3].src = "image/b_off.gif";


ですが、今回は2つの画像(変化後のも入れると4つですが)の例になっていますが、もちろんいくつでも可能です。
その場合、必ずマウスを乗せた時の画像とマウスを乗せてないときの画像を用意し、2つずつ増やしていってください。

例えば、次は

        menu[4] = new Image();  menu[4].src = "image/c_on.gif";
        menu[5] = new Image();  menu[5].src = "image/c_off.gif";


というようにです。(menuの後の数字はその画像を指し示す値となるので、順に増やしていってください。)


次に、

<A HREF="Aをクリックしたときのリンク先のアドレス" OnMouseOver="In('A',0);return true" OnMouseOut="Out('A',1)">
<img src="image/a_off.gif" name="A"  BORDER="0"></A>


はどうなっているかというと、まず
<img src="image/a_off.gif" name="A"  BORDER="0"> 
を見てみます。

image/a_off.gifは、最初に表示されている画像です。つまり、マウスを乗せてないときの画像です。自由に変更してください。

name="A"のAは、その画像のペアを指し示しています。つまり、1組の画像に対して1つ指定してください。
(名称は、ABC..ではなくても、Image_1などの文字列でも結構です。)

In('A',0) のAはname="A"で指定したAです。
0は、menu[0] = new Image(); menu[0].src = "image/a_on.gif";で指定した0です。
つまり、Aの画像にマウスを乗せると0で指定ある画像image/a_on.gifをその上に表示するということです。 
      

Out('A',1)も同じように、Aの画像からマウスを移動させると(乗せてない状態にすると)
1で指定ある画像image/a_off.gifをその上に表示するということです。


つまり、

        menu[4] = new Image();  menu[4].src = "image/c_on.gif";
        menu[5] = new Image();  menu[5].src = "image/c_off.gif";


を追加した場合には、

<A HREF="Cをクリックしたときのリンク先のアドレス" OnMouseOver="In('C',4);return true" OnMouseOut="Out('C',5)">
<img src="image/c_off.gif" name="C"  BORDER="0"></A>


とすれば、3つ目の画像が表示できます。画像はまだまだ増やすことが出来ます。

HP初心者の方にはちょっと難しいかもしれませんが、上記を参考にして、いろいろな画像でお楽しみ下さい。

ページの上へ戻る

マイホーム

[★高収入が可能！ＷＥＢデザインのプロになってみない？！自宅で仕事がしたい人必見！ ]
[ CGIレンタルサービス | 100MBの無料HPスペース | 検索エンジン登録代行サービス ]
[ 初心者でも安心なレンタルサーバー。５０MBで２５０円から。CGI・SSI・PHPが使えます。 ]

FC2		キャッシング花	出会い　無料アクセス解析

image/a_on.gif		image/a_off.gif
image/b_on.gif		image/b_off.gif