html悬浮框显示图片

以下是两种实现HTML悬浮框显示图片的方法：

1. 使用CSS的:hover伪类和position属性来实现悬浮框效果：

<style>
    .container {
        position: relative;
        display: inline-block;
    }
    
    .image {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 1;
    }
    
    .container:hover .image {
        display: block;
    }
</style>

<div class="container">
    <img src="thumbnail.jpg" alt="Thumbnail Image">
    <div class="image">
        <img src="fullsize.jpg" alt="Fullsize Image">
    </div>
</div>

2. 使用JavaScript来控制悬浮框的显示和隐藏：

<style>
    .container {
        position: relative;
        display: inline-block;
    }
    
    .image {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 1;
    }
</style>

<div class="container" onmouseover="showImage()" onmouseout="hideImage()">
    <img src="thumbnail.jpg" alt="Thumbnail Image">
    <div class="image" id="image">
        <img src="fullsize.jpg" alt="Fullsize Image">
    </div>
</div>

<script>
    function showImage() {
        document.getElementById("image").style.display = "block";
    }
    
    function hideImage() {
        document.getElementById("image").style.display = "none";
    }
</script>