ヘルプモード

　これは、松下電器に抗議すべく作成したヘルプモードという、ページの一部をクリックしてその説明を表示させるための機能を持ったスクリプトです。

　左のヘルプアイコンをクリックすると、ヘルプモードになります。このアイコンをクリックしてヘルプモードにした後、このページの一部分（リンクなど）をクリックするとメッセージが表示されます。

　設置するには、まず以下のスクリプトを<head>～</head>に貼り付けてください（若しくはJavaScript外部ファイルにしてください）。

<script type="text/javascript">
<!--
var MEI_helpmode = false;
var MEI_check = false;
var MEI_help_x = 0;
var MEI_help_y = 0;
document.onclick = MEI_viewHelp;
var MEI_message = "";

function MEI_viewHelp(evt){
    if (document.all && document.getElementById && document.compatMode=='CSS1Compat') {
            MEI_help_x = event.clientX + document.documentElement.scrollLeft;
            MEI_help_y = event.clientY + document.documentElement.scrollTop;
    }
    else if(document.all){
        MEI_help_x = event.clientX + document.body.scrollLeft;
        MEI_help_y = event.clientY + document.body.scrollTop;
    }
    else if (window.opera) {
        MEI_help_x = event.clientX;
        MEI_help_y = event.clientY;
        if (navigator.userAgent.match(/Opera 7/) || navigator.userAgent.match(/Opera\/7/)>=0) {
            MEI_help_x += document.body.scrollLeft;
            MEI_help_y += document.body.scrollTop;
        }
    }
    else if (document.layers || document.getElementById) {
        MEI_help_x = evt.pageX;
        MEI_help_y = evt.pageY;
    }
    if(MEI_helpmode && MEI_message){
        window.status = "";
        if(document.all){
            document.all("helpmode").innerHTML = MEI_message;
            document.all("helpmode").style.left = MEI_help_x + "px";
            document.all("helpmode").style.top = MEI_help_y + "px";
            document.all("helpmode").style.display = "block";
        }
        else if(document.getElementById){
            document.getElementById("helpmode").innerHTML = MEI_message;
            document.getElementById("helpmode").style.left = MEI_help_x + "px";
            document.getElementById("helpmode").style.top = MEI_help_y + "px";
            document.getElementById("helpmode").style.display = "block";
        }
        else if(document.layers){
            document.layers["helpmode"].document.open();
            document.layers["helpmode"].document.write(MEI_message);
            document.layers["helpmode"].document.close();
            document.layers["helpmode"].left = MEI_help_x;
            document.layers["helpmode"].top = MEI_help_y;
            document.layers["helpmode"].display = "block";
        }
    }
    MEI_message = "";
    if(MEI_helpmode && MEI_check) {
        MEI_helpmode = false;
        MEI_check = false
        return false;
    }
    else {
        if(document.all){
            document.all("helpmode").style.display = "none";
        }
        else if(document.getElementById){
            document.getElementById("helpmode").style.display = "none";
        }
        else if(document.layers){
            document.layers["helpmode"].display = "none";
        }
        if(MEI_helpmode) MEI_check = true;
        return true;
    }
}

function MEI_setMessage(str){
    if(MEI_helpmode){
        MEI_message = str;
    }
}

function MEI_changeMode(){
    if(!MEI_helpmode){
        MEI_helpmode = true;
        window.status = "ヘルプモード";
    }
}
//-->
</script>

　そして、ヘルプモードにするためのアイコンを用意します。「<img src="./images/helpmode.gif" onclick="MEI_changeMode()">」のように、onclickイベントで、関数MEI_changeModeが実行されるように記述してください。

　ヘルプモードで説明を表示させたい要素には、「onclick="MEI_setMessage('ヘルプモードで表示するメッセージ')"」を追加してください。注意点として、ヘルプモードで表示するメッセージに「"」（ダブルクォート）を使いたい場合は「"」、「'」（シングルクォート）を使いたい場合は「\'」と記述する必要があります。タグも使用可能ですが、「<」と「>」は「<」、「>」と記述してください。

　例えば、ヘルプモードでリンクをクリックした際にメッセージを表示させるなら、次のような記述になります。

<a href="○○○.html" onclick="MEI_setMessage('ヘルプモードで表示するメッセージ')">リンク</a>

　最後に<body>～</body>のどこかに次の要素を貼り付けてください。

<div id="helpmode">ヘルプモード</div>

　さらに、CSSに以下を追加してください。widthは好きな値に変えてください。細かい見栄えなどは自分で設定してください。

#helpmode {
    position: absolute;
    left: 0px;
    top: 0px;
    width: ○em;
    display: none;
    border: solid black 1px;
}

　このスクリプトは古いブラウザで動作する自信はありません。未確認ですが動かないような気がします。