如何创建带有“可悬停”区域的图像，在 jQuery 或 HTML5 中显示附加信息
Posted
技术标签:
【中文标题】如何创建带有“可悬停”区域的图像，在 jQuery 或 HTML5 中显示附加信息【英文标题】：How to create an image with "hoverable" areas that show additional information in jQuery or HTML5 【发布时间】：2011-03-29 14:32:29 【问题描述】：我正在尝试创建一些我认为在 jQuery 或 html5 中应该很简单的东西，但是我很难找到资源。如果有人可以提供帮助，将不胜感激。
目标- 我有一张包含 16 个可悬停部分的图像。此图像的其他部分是完全静态的。如果用户将鼠标悬停在某个预定义区域上，我希望在图像上弹出缩略图和标题。这是一个静态页面，没有内容需要是动态的。
现在整个图像是 PNG，但它是从矢量图像中保存出来的，因此如果需要，我可以将这些区域转换为 SVG。理想情况下，我可以将其保留为单个图像，因为这将对更广泛的项目有用。
我可以用 HTML5 或 jQuery 来做。
是否已经存在解决方案？我觉得必须的。还有其他问题吗？
我已经意识到这一点，并计划使用与此类似的东西作为备用计划 - http://www.gethifi.com/blog/jquery-vs-flash-for-interactive-map
【问题讨论】：
【参考方案1】：您可以将图像拆分为 16 个单独的图像，并使用更传统的技术进行悬停。如果这不可行，你也可以考虑这个technique using a definition list，或者老派的MAP tag with some javascript。
【讨论】：
【参考方案2】：这样的？另存为 .html 文件作为示例。
<html>
<head>
<style type="text/css">
#image
background-image: url('http://www.breederretriever.com/blog/wp-content/uploads/2008/10/snoopy013f25505ii3.jpg');
height:350px;
width:450px;
#caption
height:50px;
width:100%;
.hoverable
background-color:yellow;
.hoverable2
background-color:purple;
color:white;
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
$('.hoverable').hover(function()
$('#caption').html($(this).attr('title'));
,function()
$('#caption').html('');
);
$('.hoverable2').hover(function()
$('#caption').append($('#' + $(this).attr('title')));
,function()
$('#dvExtraContainer').append($('#' + $(this).attr('title')));
);
);
</script>
</head>
<body>
<div id="caption" ></div>
<div id="image"></div>
<div title="This is a test" class="hoverable" style="position:absolute;top:100px;left:100px;">test</div>
<div title="This is another test" class="hoverable" style="position:absolute;top:200px;left:230px;">test2</div>
<div title="This is yet another test" class="hoverable" style="position:absolute;top:70px;left:430px;">test3</div>
<div title="dvExtra1" class="hoverable2" style="position:absolute;top:150px;left:30px;">test4</div>
<div style="display:none;" id="dvExtraContainer">
<div id="dvExtra1" >
Title: <img src="http://www.opticstalk.com/smileys/Snoopy.gif" />
</div>
</div>
</body>
</html>
【讨论】：
以上是关于如何创建带有“可悬停”区域的图像，在 jQuery 或 HTML5 中显示附加信息的主要内容，如果未能解决你的问题，请参考以下文章