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

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

就我现在所能想到的，您需要使用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>

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

我希望这足够清楚。否则，只需在此处发布您剩余的疑问：