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.
<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%);
}
I would suggest that you store the data of your coordinates and labels in a variable or JSON file and generate <area> and <span> (or a different text element) with JavaScript. This way you have a single set of a data which you can use to render your map and labels.
Consider your HTML to be the following, with an added div for the labels. Your CSS should provide the correct z-index to the elements so that the map is at the the top, the labels one level lower, and the image at the bottom.
<img src="" alt="" usemap="#image-map"/>
<map class="js-seating-map" name="image-map">
<div class="js-seating-labels"></div>
In your variable or JSON you could have a format like the example below. You can make this any way you like, for as long as the structure makes sense and the data can be looped over. (The ellipses (...) are to indicate that there is more data and is only for illustration purposes).
const seats = [
{
coords: [49, 52],
radius: 10,
label: 'Seat 1'
},
{
coords: [95, 52]
radius: 10,
label: 'Seat 2'
},
...
];
Build two functions, one that creates a <area> element and one that creates a <span> that functions as the label. Both should use a single seat as an argument. And a single seat being the coordinates and labels, etc.
const createArea = seat => {
const area = document.createElement('area');
area.shape = 'circle';
area.coords = `${seat.coords.join(', ')}, ${seat.radius}`;
area.title = seat.label;
area.alt = seat.label;
area.target = '_self';
return area;
};
const createLabel = seat => {
const label = document.createElement('span');
label.classList.add('area-label');
label.style.left = `${seat.coords[0]}px`;
label.style.top = `${seat.coords[1]}px`;
label.textContent = seat.label;
return label;
};
Now loop over all the seat data in your variable or JSON and build the elements for each iteration. Append them to the correct container and you'll have build a dynamic structure based solely on the data provided.
const seatingMap = document.querySelector('.js-seating-map');
const seatingLabels = document.querySelector('.js-seating-labels');
for (const seat of seats) {
const area = createArea(seat);
const label = createLabel(seat);
seatingMap.append(area);
seatingLabels.append(label);
}