JavaScriptのサンプル

リンクをポイント時に、リンク先の説明を表示するスクリプトです。（テキストフィールドに表示するタイプ）

コード

<html>
<head>
<title>TAG index Webサイト</title>

<style type="text/css">
<!--

ul {
margin: 0;
padding: 0;
list-style-type: none;
}

-->
</style>

<script type="text/javascript"> 
<!-- 

function disp(msg){

	document.form1.field1.value = msg;

}

// -->
</script>

</head>
<body>

<form action="#" name="form1">
<input type="text" name="field1" size="40">
</form>

<ul>
<li><a href="exp2.html" onMouseOver="disp('●●●説明のサンプル1●●●')" onMouseOut="disp('')">Sample1</a></li>
<li><a href="exp2.html" onMouseOver="disp('◇◇◇説明のサンプル2◇◇◇')" onMouseOut="disp('')">Sample2</a></li>
<li><a href="exp2.html" onMouseOver="disp('★☆★説明のサンプル3★☆★')" onMouseOut="disp('')">Sample3</a></li>
</ul>

</body>
</html>

解説

<head> ～ </head> 内にスクリプトを記述しておき、リンクメニュー部分のアクション（マウスオーバー・マウスアウト）でスクリプトを実行します。

リンクメニュー部分では、aタグにマウスオーバー、マウスアウトの指定を記述します。

  • onMouseOver="disp('ここに説明文')" … ポイント時の指定（マウスオーバー）
  • onMouseOut="disp('')" … 放した時の指定（マウスアウト）

青い文字の部分は、必要に応じて書き換えてください。