本文主要和大家分享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>
相關推薦:
#以上是JS超連結實現動態顯示圖片的詳細內容。更多資訊請關注PHP中文網其他相關文章!