イメージとイベント

　マウスがイメージ上に来た時にイメージを切り替える手法を、ロールオーバーと呼びます。下記の例では、マウスがイメージ上に来た時 (onmouseover) に枠線を青で表示し、それ以外の時 (onmouseout) は白で表示するように設定しています。この時、引数に "this" を使うことで、自オブジェクトを関数に渡すことができます。

// JavaScriptソース 

/* イメージの枠線の更新
     ... 引数 obj : 対象のイメージオブジェクト
     ... 引数 hovered : マウス位置（論理型 : オブジェクト上ならtrue/それ以外はfalse） */
function ResetBorder(obj, hovered) 
{
    obj.style.borderColor = (hovered)? "blue": "white";
}  

<!-- HTMLソース -->
<p style="width:64px; margin:1ex; padding:1em; border:1px solid silver; text-align:center;">
    <img src="image/Heart1.gif" alt='' style="border:1px solid white;" 
        onmouseover="ResetBorder(this, true)" 
        onmouseout="ResetBorder(this, false)" >
</p>    

　以下は、ロールオーバーを利用したイメージの切り替えです。このサンプルでは、マウスがトランプ上に来た時、アトランダムにマークを取得して表向きになるよう設定しています。マウスがトランプ上から離れるとまた裏向きになります。

// JavaScriptソース

/* トランプをひっくり返す（イメージの変更）
     ... 引数 obj : 対象のイメージオブジェクト
     ... 引数 hovered : マウス位置（論理型 : オブジェクト上ならtrue/それ以外はfalse） */
function TurnUp(obj, hovered) {
    if (hovered) {
        var n = Math.random();
        if  (n < 0.25) obj.src = aTrump[0].src;
        else if (n < 0.5) obj.src = aTrump[1].src;
        else if (n < 0.75) obj.src = aTrump[2].src;
        else obj.src = aTrump[3].src;
    } else {
        obj.src = mBack.src;
    }
}    

<!-- HTMLソース -->
<p style="width:160px; margin:1ex; padding:1em; border:1px solid silver; text-align:center;">
    <img src="image/Back.gif" alt='' 
        onmouseover="TurnUp(this, true)" onmouseout="TurnUp(this, false)">
    <img src="image/Back.gif" alt='' 
        onmouseover="TurnUp(this, true)" onmouseout="TurnUp(this, false)">
    <img src="image/Back.gif" alt='' 
        onmouseover="TurnUp(this, true)" onmouseout="TurnUp(this, false)">
    <img src="image/Back.gif" alt='' 
        onmouseover="TurnUp(this, true)" onmouseout="TurnUp(this, false)">
</p>    

　ロールオーバーを利用して説明文などのテキストを表示する例です。マウスがイメージ上に来ると、テキストオブジェクトに文字列を表示します。マウスがイメージから離れると、文字列は消えます。

// JavaScriptソース

/* テキストの表示
     ... 引数 index : 表示文字列を判別するための数値
     ... 引数 hovered : マウス位置（論理型 : オブジェクト上ならtrue/それ以外はfalse） */
function ShowText(index, hovered) 
{
    if (hovered) {
        if (index == 0) document.Form2.Text1.value = "スペードのＡ";
        if (index == 1) document.Form2.Text1.value = "ダイヤのＡ";
        if (index == 2) document.Form2.Text1.value = "ハートのＡ";
        if (index == 3) document.Form2.Text1.value = "クラブのＡ";
    } else {
        document.Form2.Text1.value = "";
    }
}    

<!-- HTMLソース -->
<form name="Form2" 
        style="width:160px; margin:1ex; padding:1em; border:1px solid silver; text-align:center;">
    <img src="image/Spade1.gif" alt="" 
        onmouseover="ShowText(0,true)" onmouseout="ShowText(0,false)">
    <img src="image/Dia1.gif" alt="" 
        onmouseover="ShowText(1,true)" onmouseout="ShowText(0,false)">
    <img src="image/Heart1.gif" alt="" 
        onmouseover="ShowText(2,true)" onmouseout="ShowText(0,false)">
    <img src="image/Club1.gif" alt="" 
        onmouseover="ShowText(3,true)" onmouseout="ShowText(0,false)">
    <br><br>説明 : 
    <input type="text" name="Text1" style="width:96px;margin:0;padding:0;text-align:center;">
</form>    

　これまでの手法をクリッカブルマップに応用した例です。以下のイメージに三つの領域をつくり、それぞれの領域上にマウスを移動させると説明文が下に表示されます。さらにクリックをすると該当ページに移動します。
　なお、このサンプルが完全に動作するのは、IE5以上、NN6以上の環境となります。

// JavaScriptソース

/* マウスホーバー処理（テキストの表示とページの移動）
     ... 引数 index : 表示文字列を識別する数値
     ... 引数 hovered : マウス位置（論理型 : オブジェクト上ならtrue/それ以外はfalse） */
function Hover(index, hovered) 
{
    if (hovered) {
        if (index == 0) document.FormX.TextX.value = "映画鑑賞記のコーナーです";
        if (index == 1) document.FormX.TextX.value = "プログラミングTipsのコーナーです";
        if (index == 2) document.FormX.TextX.value = "読書録のコーナーです";
    } else {
        document.FormX.TextX.value = "";
    }
}    

<!-- HTMLソース -->
<form name="FormX" style="width:320px; margin:1ex;">
    <img src='image/jsimage_1.jpg' usemap="#Map1" alt='' width="192" height="64" border="0">
    <br>
    説明 : <input type="text" name="TextX" 
            style="width:240px; height:1em; border:0; background-color:transparent;">
</form>
<map name="Map1">
    <area shape="polygon" coords="0,0, 55,0, 71,63, 0,63" href="Page2.html" 
         onmouseover="Hover(0,true)" onmouseout="Hover(0,false)" >
    <area shape="polygon" coords="56,0, 156,0, 103,63, 72,63" href="Page3.html" 
         onmouseover="Hover(1,true)" onmouseout="Hover(1,false)" >
    <area shape="polygon" coords="157,0, 191,0, 191,63, 104,63" href="Page4.html" 
         onmouseover="Hover(2,true)" onmouseout="Hover(2,false)" >
</map>