映射图像 onClick 事件加上 maphilight 悬停
Posted
技术标签:
【中文标题】映射图像 onClick 事件加上 maphilight 悬停【英文标题】：Mapped image onClick event plus maphilight hover 【发布时间】：2014-01-21 00:22:11 【问题描述】：上面是一个带有 4 个映射区域的示例图像。这是我想要做的： 如果鼠标悬停在任何映射区域上，则只有该区域应该改变颜色 如果在任何映射区域上单击鼠标，则一个全新的图像应替换图像 1
到目前为止我所尝试的：
点击 mapped_region 时更改图像
<img class="map" id="myimage" src="image_1.png" border="0" usemap="#map1" />
<map name="map1" id="map1">
<area id="button1" coords="4,49,148,138" shape="rect" onclick="document.getElementById('myimage').src='image_2.png'" />
</map>
鼠标悬停时突出显示映射区域
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://davidlynch.org/js/maphilight/jquery.maphilight.min.js"></script>
<script type="text/javascript">
$(function()
$('.map').maphilight();
);
</script>
maphighlight 和 map_click_event 分别工作正常。但是当我同时启用它们时，只有 maphilight 有效。如何在 maphilight 处于活动状态时为映射图像启用 onclick 事件？
编辑：图片和问题更清楚
【问题讨论】：
【参考方案1】：您必须使用 Jquery 来实现这一点。 以下网站为初学者提供了很好的教程： codeacademy
这可能有助于您掌握 jquery 的概念。 复制粘贴并运行。 它很粗糙，您将不得不进行一些更改，但这正是您在上面询问的方式。
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function ()
$('.area').mouseenter(function ()
$(this).addClass("change");
);
$('.area').mouseleave(function ()
$(this).removeClass("change");
);
$('#a1').click(function ()
$('.map').addClass("img_add");
$('.map div').hide();
);
$('#a2').click(function ()
$('.map').addClass("img_add");
$('.map div').hide();
);
$('#a3').click(function ()
$('.map').addClass("img_add");
$('.map div').hide();
);
$('#a4').click(function ()
$('.map').addClass("img_add");
$('.map div').hide();
);
</script>
<style>
.map
height:40px;
width:220px;
.area
height:30px;
width:50px;
background-color: yellow;
float: left;
margin: 2px;
.change
background-color: red;
.img_add
background-image:url('some_image.ext');
background-repeat: no-repeat;
background-position: center;
</style>
</head>
<body>
<div class="map">
<div class="area" id="a1"></div>
<div class="area" id="a2"></div>
<div class="area" id="a3"></div>
<div class="area" id="a4"></div>
</div>
</body>
</html>
输出看起来像this。
附注： 要显示有效图像，请为 .img_add 提供有效的样式链接（将“some_image.ext”替换为正确的图像链接）
【讨论】：
没有人“必须”使用图书馆。您可以提出建议，但在不发布实际解决方案的情况下这样做不是答案 - 而是将其发布为评论。 我的坏人，我应该把它作为评论留下，但现在我不能忽视你的要求。 感谢您的回复，检查一下 不幸的是，我的 js 知识非常有限，我未能在我的情况下完成这项工作。我编辑了我的问题以更清楚，你能再检查一次吗？ 您的特定代码已在 jsfiddle.net 上更新，这里是链接：jsfiddle.net/hnpaP/3。我已经写了更多的内容，以便为您简化它。您可以使用 if 语句来减少代码，但我喜欢保持简单，因为我是阶段 1（链的开始）开发人员。【参考方案2】：$("#link").click(function()
$("#image").attr("src", "images/medium/2.png");
);
link 是用于点击的 id 或类元素，#image 是用于更改来源的 id 图像
【讨论】：
以上是关于映射图像 onClick 事件加上 maphilight 悬停的主要内容，如果未能解决你的问题，请参考以下文章
Django cloudinary 图像如何在模板 % % 标签中添加 onClick 事件？
React：从按钮 onclick 传递映射数据以显示在另一个组件上