首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >带鼠标输出的ImageMap

带鼠标输出的ImageMap
EN

Stack Overflow用户
提问于 2013-02-08 03:31:55
回答 2查看 422关注 0票数 0

嗨,我问过一次,但是得不到答案。我有一个建筑物的图像地图,请看这里,=>> http://projectpano.netii.net/imagemaper.html,它在建筑物上有5个热点,每个热点都有一个onmouseover onmouseout事件。但我不能做的是,即使我把鼠标移出像这样的热点,比如http://31pennplaza.com/avail.html#,我也不能把节目做对

看到我的源页,请帮助我的脚本,我是新的与此!

EN

回答 2

Stack Overflow用户

发布于 2013-02-08 04:01:33

我无法查看您的示例,因此我将做一些假设。

您的热点可能位于div(或其他一些元素)中,并且每个热点都应该具有惟一的DOM ID。

我相信你希望当你的mouseOver有一个新的热点时,右边的图像就会更新,并且你希望在你mouseOver另一个热点之前,那个图像会一直留在那里。mouseOut事件不应影响右侧的图像。

假设您的热点声明如下:

代码语言:javascript
复制
<div id="hotspot_1" class="hotspot"></div>
<div id="hotspot_2" class="hotspot"></div>
...
<div id="hotspot_5" class="hotspot"></div>

您在右侧更新的图像是:

代码语言:javascript
复制
<img id="floor_detail" src="images/floor_detail.jpg" />

将鼠标悬停在热点上时要显示的图像具有以下路径:

代码语言:javascript
复制
images/hotspot_1_detail.jpg
images/hotspot_2_detail.jpg
...
images/hotspot_5_detail.jpg

您可以使用jQuery配置行为。您不需要mouseOut事件侦听器,因为听起来您希望细节图像保持其状态,直到观察到另一个mouseOver。

jQuery:

代码语言:javascript
复制
<script>
  $(document).ready(function(){
    $(".hotspot").live("mouseover", function() {
      $("#floor_detail").attr("src", "images/" + $(this).attr("id") + "_detail.jpg");
    });    
  });
</script>
票数 0
EN

Stack Overflow用户

发布于 2013-02-08 05:40:56

简单的答案是:删除onMouseOut处理程序。对于您指定的行为,您不需要它们。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/14759419

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档