【发布时间】：2013-09-04 15:30:24
【问题描述】：
我试图在图像地图上的热点上悬停时显示一个文本框。 这就是我在悬停时使文本出现的方法。
<p class="ms-rteFontSize-3"><map name="FPMap0" id="FPMap0">
<area title="Click to view" href="http://google.com" shape="rect" coords="26, 106, 133, 237"/>
<area title="Click to view" href="http://yahoo.com" shape="rect" coords="322, 113, 414, 250"/>
<area title="Click to view" href="http://ask.com" shape="rect" coords="402, 35, 488, 96"/>
<area title="Click to view" href="http://naver.com" shape="rect" coords="598, 115, 682, 254"/></p>
但不是这样，我想让鼠标悬停在上面时显示彩色、可见的文本框。是否需要CSS？我不熟悉 CSS，所以不知道在这里应用什么。
所以我把我的代码编辑成了这个
<html>
<head>
<script src="/sites/JQueryDemo/JS/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="/sites/JQueryDemo/JS/jquery.SPServices-2013.01.js" type="text/javascript"></script>
<script src="//www.outsharked.com/scripts/jquery.imagemapster.js"></script>
</head>
<body>
<img id="predflow" src="http://http://www.vectortemplates.com/raster/batman-logo-big.gif"
style="width:400px;height:240px;" usemap="#predflow-map">
<map name="predflow-map">
<area shape="rect" data-name="a,all" coords="36,46,121,131" href="google.com" />
<area shape="rect" data-name="b,all" coords="113,76,198,161" href="yahoo.com" />
<area shape="rect" data-name="c,all" coords="192,50,277,135" href="ask.com" />
<area shape="rect" data-name="d,all" coords="262,60,347,145" href="naver.com" />
</map>
<div style="width:390px; height: 120px; font-size: 12px; ">
<div id="predflow-caption" style="clear:both;border: 1px solid black; width: 400px; padding: 6px; display:none;">
<div id="predflow-caption-header" style="font-style: italic; font-weight: bold; margin-bottom: 12px;"></div>
<div id="predflow-caption-text"></div>
</div>
</div>
<script type="text/javascript">
var inArea,
map = $('#predflow'),
captions = {
a: ["google"],
b: ["yahoo"],
c: ["ask"],
d: ["naver"]
},
single_opts = {
fillColor: '000000',
fillOpacity: 0,
stroke: true,
strokeColor: 'ff0000',
strokeWidth: 2
},
all_opts = {
fillColor: 'ffffff',
fillOpacity: 0.6,
stroke: true,
strokeWidth: 2,
strokeColor: 'ffffff'
},
initial_opts = {
mapKey: 'data-name',
isSelectable: false,
onMouseover: function (data) {
inArea = true;
$('#predflow-caption-header').text(captions[data.key][0]);
$('#predflow-caption-text').text(captions[data.key][1]);
$('#predflow-caption').show();
},
onMouseout: function (data) {
inArea = false;
$('#predflow-caption').hide();
}
};
opts = $.extend({}, all_opts, initial_opts, single_opts);
map.mapster('unbind')
.mapster(opts)
.bind('mouseover', function () {
if (!inArea) {
map.mapster('set_options', all_opts)
.mapster('set', true, 'all')
.mapster('set_options', single_opts);
}
}).bind('mouseout', function () {
if (!inArea) {
map.mapster('set', false, 'all');
}
});
</script>
</body>
</html>
静止图像地图工作正常，但是当我将鼠标悬停在上面时什么都没有出现。我在 SharePoint 中添加了 jQuery 插件，here 中的示例在 SharePoint 页面上运行良好。
【问题讨论】：
-
(1) 当您说“图像映射工作正常”时，您是什么意思？图像映射在这一点上做了什么？ （2）你能成功做
Hello World的例子吗（你引用的JQuery-with-SharePoint页面上的第6步）？这样我们就知道 jQuery 已经真正加载并工作了。 -
(1)图像地图上的热点仍然可以正常工作。但是我想要做的是当我将鼠标悬停在 Imagemap 上的热点上时出现文本框。这不起作用 (2) 我成功地做了 Hello World Example。所以我很确定 jQuery 加载得很好。
-
在上面的代码中，哪个 ID（和元素）是您希望在悬停时出现/消失的文本框？
-
请注意您的代码中的此错误：
<img id="predflow" src="http://http://www.vectortemplates.com -
您的文本框正在出现和消失，但图像地图的坐标已关闭。 See this screen shot -- 鼠标光标在红色方块上。 Here's another one
标签： html css sharepoint-2010 imagemapster