Show text on top of image

梦想与她 提交于 2019-12-25 04:12:14

问题


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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!