Html 将鼠标悬停在图像地图上时如何使文本框出现？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18617957/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make text box appear when hover over on the image map?
提问by user2747356
I am trying to make a text box appear when hover over hotspot on image map. This is what I did to make text to appear when I hover over.
我试图在图像地图上的热点上悬停时显示一个文本框。这就是我在鼠标悬停时显示文本所做的工作。
<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>
But instead of this, I want to make colored, visible text box to appear when I hover over. Is it something CSS is required? I am not familiar with CSS, so not sure what to apply here.
但不是这样，当我悬停时，我想让彩色的、可见的文本框出现。是否需要 CSS ？我不熟悉 CSS，所以不确定在这里应用什么。
So I edited my code to this
所以我编辑了我的代码
<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>
Still image map is working fine, but nothing appears when I hover over. I added jQuery plugin to SharePoint, example from hereworks fine on SharePoint page.
静止图像地图工作正常，但当我悬停在上面时什么也没有出现。我向 SharePoint 添加了 jQuery 插件，此处的示例在 SharePoint 页面上运行良好。
回答by cssyphus
Here is how to do what you want in straight jQuery/javascript:
以下是如何在直接 jQuery/javascript 中执行您想要的操作：
HTML:
HTML：
Instructions: Mouse over computer's monitor to see hidden DIV
<div id="imagemap">
<img src="http://img716.imageshack.us/img716/8287/3ylp.jpg" width="275" height="207" usemap="#Map" border="0" />
<map name="Map">
<area shape="poly" coords="105,26,107,126,257,140,256,27" href="#" id="CUST_1" name="CUST:1" />
<area shape="poly" coords="10,21,14,178,71,184,69,19" href="#" id="CUST_2" name="CUST:2" />
<area shape="poly" coords="113,145,94,172,241,192,251,164,250,164" href="#" id="CUST_3" name="CUST:3" />
</map>
<p>
<div id="myDiv">This DIV hidden unless hover over the computer's monitor</div>
</p>
</div>
<!-- Yellow DIV ID numbers overlaid on top of computer components -->
<div id="num_cust1">1</div>
<div id="num_cust2">2</div>
<div id="num_cust3">3</div>
javascript/jQuery:
javascript/jQuery：
function hovIn() {
var areaID = $(this).attr('id');
//alert('['+areaID+']');
if (areaID == 'CUST_1') {
$('#myDiv').show();
}
}
function hovOut() {
$('#myDiv').hide();
}
$('map area').hover(hovIn, hovOut);
CSS:
CSS：
#num_cust1 {
padding: 10px;
background-color:yellow;
position:absolute;
top:60px;
left:180px;
}
#num_cust2 {
padding: 10px;
background-color:yellow;
position:absolute;
top:60px;
left:40px;
}
#num_cust3 {
padding: 10px;
background-color:yellow;
position:absolute;
top:160px;
left:180px;
}
#myDiv {
display:none;
width:50%;
height:50px;
padding: 10px;
background-color:skyblue;
}
回答by cssyphus
Are you open to using jQuery?
您愿意使用 jQuery 吗？
If so, have you heard of the ImageMapster plugin?
如果是这样，您听说过ImageMapster 插件吗？
See this link for demos: http://www.outsharked.com/imagemapster/default.aspx?demos.html
有关演示，请参阅此链接：http://www.outsharked.com/imagemapster/default.aspx? demos.html
Since ImageMapster is a jQuery plugin, you will need the following lines in the head tag of your page:
由于 ImageMapster 是一个 jQuery 插件，您将需要在页面的 head 标记中添加以下行：
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//www.outsharked.com/scripts/jquery.imagemapster.js"></script>
The first line loads the jQuery library, and the next line loads the ImageMapster plugin.
第一行加载 jQuery 库，下一行加载 ImageMapster 插件。
After that, it's just the code to make the imagemap work.
之后，这只是使图像映射工作的代码。
See the demos above for what you can do.
请参阅上面的演示，了解您可以做什么。
