Javascriptはマウスの位置をキャプチャします.(ブラウザをまたぐ)
2775 ワード
Javascript , Memo, Alt Title , Alt Title
<html>
<head>
<script type="text/javascript">
function showMemo(evt,data) {
//alert(evt.clientX);
document.getElementById.('memo').style.left = evt.clientX;
document.getElementById.('memo').style.top = evt.clientY;
document.getElementById.('memo').innerHTML = data;
document.getElementById.('memo').style.display = 'block';
}
function hideMemo() {
document.getElementById.('memo').style.display = 'none';
}
</script>
</head>
<body>
<table>
<tr>
<td onmouseover="showMemo(event,'Memo1');"onmouseout="hideMemo();">aaa</td>
<td onmouseover="showMemo(event,' , Memo2!!!');"onmouseout="hideMemo();">aaa</td>
<td onmouseover="showMemo(event,' , Memo3!!!');"onmouseout="hideMemo();">aaa</td>
<td onmouseover="showMemo(event,' , Memo4!!!');"onmouseout="hideMemo();">aaa</td>
<td onmouseover="showMemo(event,' , Memo5!!!');"onmouseout="hideMemo();">aaa</td>
<td onmouseover="showMemo(event,'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa');"onmouseout="hideMemo();">aaa</td>
</tr>
<tr>
<td>bbb</td>
<td>bbb</td>
<td>bbb</td>
<td>bbb</td>
<td>bbb</td>
<td>bbb</td>
</tr>
<tr>
<td>ccc</td>
<td>ccc</td>
<td>ccc</td>
<td>ccc</td>
<td>ccc</td>
<td>ccc</td>
</tr>
</table>
<div id="memo" style="position:absolute;border:1px solid blue;background:yellow;width:100px;display:none;word-wrap:break-word">ddd</div>
</body>
</html>