本文主要和大家分享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>
相关推荐:
Atas ialah kandungan terperinci JS超链接实现动态显示图片. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!