`I have a photo with several people on a website (made with php) and would like to obtain the following: when the cursor is moved over the face of a person, the name of the person is displayed at the bottom of the photo. After a lot of search, I found some code on another website that was close to what I wanted and after I changed a few things I got it to do (mostly) what I want but I really do not understand much of it and I am convinced there must be a simpler way to do it. The code is copied below.
<style>
.imageMapContainer{
position: relative;
}
.imageMapZone{
position: absolute;
}
.namezone{
Font-size: 1.4em;
min-height: 1.6em;
}</style>
<script>
var co=
co+='<div class="imageMapContainer">';
co+='<img width="700" src ="/img/equipe.jpg"/></div>';
co+= '<div class="namezone"></div>';
data = {
Clara: {
left: 284,
top: 38,
width: 121,
height: 191
},
Sylvie: {
left: 412,
top: 9,
width: 121,
height: 191
},
Steeve: {
left: 498,
top: 79,
width: 208,
height: 191
},
Jacques: {
left: 56,
top: 179,
width: 157,
height: 191
},
Julie: {
left: 213,
top: 178,
width: 106,
height: 178
},
Amélie: {
left: 300,
top: 319,
width: 139,
height: 211
},
Robert: {
left: 456,
top: 282,
width: 182,
height: 229
}
};
let names = Object.keys(data);
names.forEach((n) => {
let zone = $("<div>");
zone
.addClass("imageMapZone")
.css(data[n])
.hover(
function () {
$(".namezone").text(n);
},
function () {
$(".namezone").text("");
}
);
$(".imageMapContainer").append(zone);
});
</script>
why does this code not work`
2
Answers
It’s hard to say definitively without knowing exactly what errors you’re getting. However, if you posted the code exactly as it’s written, here’s what stands out:
var co=coequal?var co = "";Chraibi Mariam: {"Chraibi Mariam": {Without any JavaScript
An image map is an html element that allows you to divide an image into multiple areas. Areas can be rectangles, circles, or complex polygon shapes. Each area has its own hover and touch events and may also be used as a link to another page.
Creating area coordinates manually is a cumbersome task and prone to mistakes. Fortunately, there are many free online tools that allow you to upload an image and create coordinates. For example, imagemap.org and image-map.net.
This example uses an image with multiple people and each person has been mapped to an area. We can then add some css to make each person’s name appear when the mouse hovers over their face. The key parts are adding the pseudo-element :before and then setting the text to display using
content: attr(title)Comment
Image maps should be used sparingly as they are time consuming to maintain. For example, a new image and map would need to be created each time there is a staff change.
Snippet
Open the snippet to view the complete code. The snippet places the text at the top so that it is visible without scrolling. However, the position can be set anywhere within the image by adjusting the css.