我需要在图像映射选定区域上添加文本,

I have created the image mapping code through https://www.image-map.net/. But i want to show the seat number as a text on the selected coorrdinate, so that user can understand and click on the given coordinates. Hope i am able to clear the question. Please provide the solution, Thanks in advance.

Here is the url

 <img src="https://www.roomsketcher.com/wp-content/uploads/2017/11/RoomSketcher-Office-Floor-Plan-with-Garden-3D-PID3861359.jpg" usemap="#image-map">    
<map name="image-map">
    <area target="_self" alt="seat 1" title="seat 1" href="" coords="49,52,10" shape="circle">
    <area target="_self" alt="seat 2" title="seat 2" href="" coords="95,52,9" shape="circle">
    <area target="_self" alt="seat 3" title="seat 3" href="" coords="69,90,12" shape="circle">
    <area target="_self" alt="seat 4" title="seat 4" href="" coords="161,52,10" shape="circle">
    <area target="_self" alt="seat 5" title="seat 5" href="" coords="203,51,9" shape="circle">
    <area target="_self" alt="seat 6" title="seat 6" href="" coords="179,78,13" shape="circle">
    <area target="_self" alt="seat 7" title="seat 7" href="" coords="251,35,13" shape="circle">
    <area target="_self" alt="seat 8" title="seat 8" href="" coords="301,70,9" shape="circle">
    <area target="_self" alt="seat 9" title="seat 9" href="" coords="282,93,10" shape="circle">
    </map>



.seat1 {
            position: relative;
        }

        .seat1:before {
            position: absolute;
            content: 'seat 1';
            background: red;
            color: #fff;
            width: 45px;
            padding: 2px 5px;
            font-size: 12px;
        }

        img {
            position: relative;
            filter: grayscale(100%);
        }
评论