当前位置：文江博客话题详情

通过鼠标悬停在一张主图像的不同位置显示不同的图像

发布于 2024-09-18 12:41:46 字数 119 浏览 8 评论 0原文

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

笙痞 2024-09-25 12:41:46

据我现在所能想到的，你将需要使用 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();
    });
}

我希望这足够清楚。否则，请在这里发布您剩下的疑问:)

As far as i can think now, you will need to use JavaScript, at least a little bit...

I think the Best solution, would be something like this:

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

And then you could position the DIV inside the #mappedImage using position:absolute; And to finalize, you would use JavaScript to hide the "small" DIVs and using onmouseover on the tags you would reveal them.

I would suggest JQuery as a JavaScript framework. The code would be something like this:

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

I hope this is clear enough. otherwise just post here your remaining doubts :)

回复收藏 0 原文

~没有更多了~