Mouse over to display larger image

The requirement is such that the pictures in the page cannot display the original size, so the layout will be messed up, so it is necessary to display the small picture, and then display the large picture when the mouse passes over it.

<div id="Photo" style="overflow:hidden;text-align:center;padding:10px">
            
</div>
<div id="enlarge_images"></div>

This is enough for the page code. Of course, since my picture is loaded after a background request, the picture is temporarily empty.

                var Photo = document.getElementById("Photo");
                var gg = Photo.getElementsByTagName("img");
                var ei = document.getElementById("enlarge_images");
                for (i = 0; i < gg.length; i++) {
                    var ts = gg[i];
                    ts.onmousemove = function (event) {
                        event = event || window.event;
                        ei.style.display = "block";
                        ei.innerHTML = '<img src="' + this.src + '" />';
                        ei.style.top = 60 + "px";
                        ei.style.left = document.body.scrollLeft + event.clientX + 10 + "px";
                    }
                    ts.onmouseout = function () {
                        ei.innerHTML = "";
                        ei.style.display = "none";
                    }
                    ts.onclick = function () {
                        window.open(this.src);
                    }
                }

This is relatively simple, that is, when the mouse passes the img tag, a pop-up window showing the larger image is opened.

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    #demo {
        overflow: hidden;
        width: 120px;
        text-align: center;
        padding: 10px;
    }

    #demo img {
        border: none;
        width: 100px;
        height: 100px;
        border: 5px solid #f4f4f4
    }

    #enlarge_images {
        position: absolute;
        display: none;
        z-index: 2;
        border: 5px solid #f4f4f4
    }
    </style>
</head>

<body>
    <div id="demo" style="overflow:hidden;width:120px;text-align:center;padding:10px">
        <img src="aaa.jpg"><img src="aaa.jpg"><img src="aaa.jpg">
    </div>
    <div id="enlarge_images"></div>
    <script>
    var demo = document.getElementById("demo");
    var gg = demo.getElementsByTagName("img");
    var ei = document.getElementById("enlarge_images");
    for (i = 0; i < gg.length; i++) {
        var ts = gg[i];
        ts.onmousemove = function(event) {
            event = event || window.event;
            ei.style.display = "block";
            ei.innerHTML = '<img src="' + this.src + '" />';
            ei.style.top = document.body.scrollTop + event.clientY + 10 + "px";
            ei.style.left = document.body.scrollLeft + event.clientX + 10 + "px";
        }
        ts.onmouseout = function() {
            ei.innerHTML = "";
            ei.style.display = "none";
        }
        ts.onclick = function() {
            window.open(this.src);
        }
    }
    </script>
</body>

</html>

full code

Mouse over to display larger image

Guess you like