html鼠标移动到超链接上时,显示图片的效果怎么做的?
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script type="text/javascript">
onload = function () {
document.getElementById('al').onmouseenter = function () {
if (!document.getElementById('dv')) {
var divObj = document.createElement('div');
divObj.id = 'dv';
var imgObj = document.createElement('img');
divObj.appendChild(imgObj);
imgObj.src = '图片.jpg';
divObj.style.position = 'absolute';
divObj.style.left = this.offsetLeft + 'px';
divObj.style.top = this.offsetTop + this.offsetHeight + 'px';
document.body.appendChild(divObj);
};
};
document.getElementById('al').onmouseleave = function () {
if (document.getElementById('dv')) {
document.body.removeChild(document.getElementById('dv'));
};
};
};
</script>
</head>
<body>
<p><a id="al" href="#" target="_blank">kill</a></p>
</body>
</html>
复制到记事本,另存为 html,utf-8格式;
放个 图片.jpg 放在当前html目录;
浏览器打开之后,鼠标放到kill上就显示图片了。
完美,谢谢了!