问题
Currently I've an image mapped out like this
<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>
And along with this a Jquery plugin called Image Mapster that allows me to hover over the area and display a tooltip.
What I want to do now is to be able to add an extra image onto this site, but instead of me having to hover over the map area in order to see the information, it'll just display the information inside of the image map without me hovering over the area at all. I would do this in Photoshop but for the image, the information inside the tooltip can change dynamically which is why I can't.
https://i.imgur.com/wAjNn0d.png
Thanks for all your help!
回答1:
If I understand your question correctly, you should be able to do this with just css and html.
html:
<div class="container">
<p class="example">Example</p>
<img src="test">
</div>
css:
.container{
position: relative;
}
.example{
position:absolute;
top: 45%;
}
回答2:
http://jsfiddle.net/2v5Lpxwh/2/
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>
CSS:
#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%);
}
JQ:
$(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();
})
})
来源:https://stackoverflow.com/questions/27451159/show-text-on-top-of-image