マウスが重なったらページの説明を表示する


リンク１	リンク２	リンク３
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<script type="text/javascript">
<!--
//元画像
var imgSrc = '';
//サンプル画像
arrI = new array("view1.gif","view2.gif","view3.gif");
//サンプル文章
arrS = new array(
"情報技術におけるネットワークを学習するために、必須と思われる項目、又は付随する項目をまとめた「ネットワーク総合辞書」です。",
"HPを初めて作る方向けに構成されています。まず何から始めればいいの？難しい専門用語ばかりだけど、どういう意味？こんなときはどうすればいいの？ってときに、このページを開いてください。",
"HTML タグをいっしょに覚えましょ。ここに書いてあるタグは自由にこぴぺして使って下さいね。HP作成で分からないことがあったら掲示板の方で気軽に聞いて下さい"
);
//元のセル背景色
var bgCell1 = "#ffffff";
//マウスが重なったときのセル背景色
var bgCell2 = "#ccccff";


function mouseOver(num,obj){
	if(document.getElementById){
        document.getElementById('key_view').style.backgroundImage = 'url('+arrI[num]+')';
		document.getElementById('strClm').innerHTML = arrS[num];
	}else if(document.all){
		document.all('key_view').style.backgroundImage = 'url('+arrI[num]+')';
		document.all('strClm').innerHTML = arrS[num];
    }
    obj.style.backgroundColor = bgCell2;
}
function mouseOut(obj){
	if(document.getElementById){
        document.getElementById('key_view').style.backgroundImage = 'url('+imgSrc+')';
		document.getElementById('strClm').innerHTML = '';
	}else if(document.all){
		document.all('key_view').style.backgroundImage = 'url('+imgSrc+')';
		document.all('strClm').innerHTML = '';
    }
    obj.style.backgroundColor = bgCell1;
}
function clkC(str){
	str = str.match(/href=\"(.+)\"/i);
	location.href=str[1];
}

//-->
</script>
</head>
<body>
<table border="1" cellpadding=20>
<tr><td id="key_view" style="width:400px;height:300px;background-image:url('1.gif');" colspan=3 align="left" valign="top">
<span id="strClm" style="font-weight:700;font-size:20px;color:#ff0000;"></span></td></tr>
<tr>
<td align="center" onMouseOver="mouseOver('0',this)" 
  onMouseOut="mouseOut(this)" onClick="clkC(this.innerHTML)">
<a href="https://www.7key.jp/">リンク１</a>
</td>
<td align="center" onMouseOver="mouseOver('1',this)"
  onMouseOut="mouseOut(this)" onClick="clkC(this.innerHTML)">
<a href="https://www.7key.jp/hp/">リンク２</a>
</td>
<td align="center" onMouseOver="mouseOver('2',this)"
  onMouseOut="mouseOut(this)" onClick="clkC(this.innerHTML)">
<a href="http://plaza.rakuten.co.jp/hacdic/">リンク３</a>
</td>
</tr>
</table>
</body>
</html>