本文主要和大家分享js超链接实现动态显示图片,主要以代码的形式和大家分享,希望能帮助到大家。
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<script>
onload = function () {
var al = document.getelementbyid('al');
al.onmouseover = function () {
if (document.getelementbyid('dv')) {
document.body.removechild(document.getelementbyid('dv')); //防止重复添加
}
var dvobj = document.createelement('p');
dvobj.id = 'dv';
var imgobj = document.createelement('img');
imgobj.src = '2.jpg';
imgobj.width = '200';//不可以加px
imgobj.height = '200';
dvobj.appendchild(imgobj);
dvobj.style.position = 'absolute';
dvobj.style.left = this.offsetleft + 'px';
dvobj.style.top = this.offsettop + this.offsetheight + 'px';
document.body.appendchild(dvobj);
}
al.onmouseout = function () {
if (document.getelementbyid('dv')) {
document.body.removechild(document.getelementbyid('dv'));
}
}
}
</script>
</head>
<body>
<a id="al" href="http://www.baidu.com">百度一下</a>
<!--<img src="2.jpg" width="200" height="200"/>-->
</body>
</html>
相关推荐:
php中动态显示图片问题
以上就是js超链接实现动态显示图片的详细内容。