JS hyperlink realizes dynamic display of pictures-JS Tutorial-php.cn

JS hyperlink realizes dynamic display of pictures

小云云

Release： 2018-03-21 17:28:02

Original

2686 people have browsed it

This article mainly shares with you JS hyperlinks to dynamically display images. It is mainly shared with you in the form of code. I hope it can help everyone.

<!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(&#39;al&#39;);
            al.onmouseover = function () {
                if (document.getElementById(&#39;dv&#39;)) {
                    document.body.removeChild(document.getElementById(&#39;dv&#39;)); //防止重复添加
                }
                var dvObj = document.createElement(&#39;p&#39;);
                dvObj.id = &#39;dv&#39;;
                var imgObj = document.createElement(&#39;img&#39;);
                imgObj.src = &#39;2.jpg&#39;;
                imgObj.width = &#39;200&#39;;//不可以加px
                imgObj.height = &#39;200&#39;;
                dvObj.appendChild(imgObj);
                dvObj.style.position = &#39;absolute&#39;;
                dvObj.style.left = this.offsetLeft + &#39;px&#39;;
                dvObj.style.top = this.offsetTop + this.offsetHeight + &#39;px&#39;;


                document.body.appendChild(dvObj);


            }
            al.onmouseout = function () {
                if (document.getElementById(&#39;dv&#39;)) {
                    document.body.removeChild(document.getElementById(&#39;dv&#39;));
                }
            }
        }
    </script>
</head>
<body>
               
               
               
    <a id="al" href="http://www.baidu.com">百度一下</a>
    <!--<img src="2.jpg" width="200" height="200"/>-->
</body>
</html>

Copy after login

Related recommendations:

Problems with dynamically displaying images in php

The above is the detailed content of JS hyperlink realizes dynamic display of pictures. For more information, please follow other related articles on the PHP Chinese website!