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

Question

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

Answer 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();
    });
}

我希望这很清楚。否则只是在这里发布你剩下的疑惑：）