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

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

我希望这是足够清楚。否则只是在这里发布你的遗留疑问:)