鼠标悬停在一个主要图像的不同位置显示不同的图像答案

【问题标题】：Display different images on different locations of one major image with mouseover鼠标悬停在一个主要图像的不同位置显示不同的图像
【发布时间】：2010-09-09 07:59:29
【问题描述】：

我已经映射了一个主要图像，以便有许多不同的热点链接到其他图像。我想要做的是当用户用鼠标越过热点时弹出这些图像的缩略图。我怎样才能做到这一点？请记住，我是 HTML 新手，几乎不知道 JavaScript……有没有简单的出路？

【问题讨论】：

标签： html image popup mouseover

【解决方案1】：

就我现在所能想到的，你需要使用 JavaScript，至少一点点......

我认为最好的解决方案是这样的：

<div id="mappedImage">
    <img src="bigImage.jpg">
    <div id="smallImage1">
        <img src="smallimage1.jpg">
    </div>
    <div id="smallImage2">
        <img src="smallimage2.jpg">
    </div>
</div>

然后您可以使用 position:absolute; 将 DIV 定位在#mappedImage 中。最后，您将使用 JavaScript 隐藏“小”DIV，并在要显示它们的标签上使用 onmouseover。

我建议将 JQuery 作为 JavaScript 框架。代码是这样的：

$(function() {
    $("#mappedImage div").hide();
    $("area#small1").hover(function(){
        $("#smallImage1").show();
    },function(){
        $("#smallImage1").hide();
    });
}

我希望这已经足够清楚了。否则就在这里发布你剩下的疑问:)

【讨论】：