Javascript 在图像顶部显示文本
目前我有一张这样的图片Javascript 在图像顶部显示文本,javascript,jquery,html,css,imagemap,Javascript,Jquery,Html,Css,Imagemap,目前我有一张这样的图片 <img src="Floor1.jpg" alt="Floor1" usemap="#Floor1"> <map id="Floor1" name="Floor1"> <area shape="rect" name="Seat1" title="Seat1" coords="535,311,133,555" href="#" target="" /> <area shape="rect" name="Seat2
<img src="Floor1.jpg" alt="Floor1" usemap="#Floor1">
<map id="Floor1" name="Floor1">
<area shape="rect" name="Seat1" title="Seat1" coords="535,311,133,555" href="#" target="" />
<area shape="rect" name="Seat2" title="Seat2" coords="121,211,111,555" href="#" target="" />
</map>
谢谢你的帮助 如果我正确理解了你的问题,你应该可以用css和html来完成这项工作
html:
HTML:
<div id="map">
<img src="http://placehold.it/600" width="600" height="600" alt="Floor1" usemap="#Floor1">
<div id="map_title"><span></span>
</div>
</div>
<map id="Floor1" name="Floor1">
<area shape="rect" name="Seat1" title="Seat1" coords="535,311,133,555" href="#" target="" />
<area shape="rect" name="Seat2" title="Seat2" coords="121,211,11,555" href="#" target="" />
</map>
#map {
position:relative
}
#map_title {
position:absolute;
border:3px solid red;
text-align:center;
display:none;
}
#map_title span {
position: relative;
top: 45%;
transform: translateY(-45%);
}
$(function () {
// show title on mosue enter
$('area').mouseenter(function () {
// takes the coordinates
var title = $(this).attr('title');
var coor = $(this).attr('coords');
var coorA = coor.split(',');
var left = coorA[0];
var top = coorA[1];
var right = coorA[2];
var bottom = coorA[3];
// in order to properly calculate the height and width
// left position must be less than the right
if (left > right) {
var tmp = right;
right = left;
left = tmp;
}
// The same applies to top and bottom
if (top > bottom) {
var tmp = top;
top = bottom;
bottom = tmp;
}
// has an error / bug when the mouse moves upward seat2 map will not hide
// this works
top--;
// calculate the width and height of the rectangle
var width = right - left;
var height = bottom - top;
// sets the position, the sizes and text for title
// show the title
var $map_title = $('#map_title');
$map_title.find('span').text(title);
$map_title.css({
top: top + 'px',
left: left + 'px',
width: width,
height: height
}).show();
})
// hide title on mouse leave
$('#map_title').mouseleave(function () {
$(this).hide();
})
})
JQ:
<div id="map">
<img src="http://placehold.it/600" width="600" height="600" alt="Floor1" usemap="#Floor1">
<div id="map_title"><span></span>
</div>
</div>
<map id="Floor1" name="Floor1">
<area shape="rect" name="Seat1" title="Seat1" coords="535,311,133,555" href="#" target="" />
<area shape="rect" name="Seat2" title="Seat2" coords="121,211,11,555" href="#" target="" />
</map>
#map {
position:relative
}
#map_title {
position:absolute;
border:3px solid red;
text-align:center;
display:none;
}
#map_title span {
position: relative;
top: 45%;
transform: translateY(-45%);
}
$(function () {
// show title on mosue enter
$('area').mouseenter(function () {
// takes the coordinates
var title = $(this).attr('title');
var coor = $(this).attr('coords');
var coorA = coor.split(',');
var left = coorA[0];
var top = coorA[1];
var right = coorA[2];
var bottom = coorA[3];
// in order to properly calculate the height and width
// left position must be less than the right
if (left > right) {
var tmp = right;
right = left;
left = tmp;
}
// The same applies to top and bottom
if (top > bottom) {
var tmp = top;
top = bottom;
bottom = tmp;
}
// has an error / bug when the mouse moves upward seat2 map will not hide
// this works
top--;
// calculate the width and height of the rectangle
var width = right - left;
var height = bottom - top;
// sets the position, the sizes and text for title
// show the title
var $map_title = $('#map_title');
$map_title.find('span').text(title);
$map_title.css({
top: top + 'px',
left: left + 'px',
width: width,
height: height
}).show();
})
// hide title on mouse leave
$('#map_title').mouseleave(function () {
$(this).hide();
})
})
我更愿意使用JS/JQ来实现这一点,因为将显示的文本是从csv文件中提取的,该文件由我的javascript代码处理。例如,如果地图区域名为A,它将显示A1,如果它名为B,那么它将显示A3,等等。@Johnti然后只允许您的脚本在p
元素上设置.innerHTML
参数(或jQuery中的.html()
函数)。@WoodrowBarlow抱歉,您能为我澄清一下吗?我对JS/JQ不是很了解,所以我不能100%确定:(