`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 >';
           co ='<img  width="700" src ="/img/equipe.jpg"/></div>';
           co = '<div ></div>';
data = {
  Chraibi Mariam: {
   left:324px,
    top: 595px,
    width:702px,
    height:526px
  },
  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`

CodePudding user response：

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=
  • This line is invalid. What does co equal?
  • Maybe initialize it to an empty string: var co = "";
• Chraibi Mariam: {
  • This line is invalid. Object property names cannot have spaces without enclosing them in quotes.
  • Use this instead: "Chraibi Mariam": {

CodePudding user response：

Without any JavaScript

An

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)

area:hover:before {
  content: attr(title);
  position: absolute;
  top: 75%;
  left: 0;
  width: 100%;
  display: block;
  text-align: center;
  font-size: 2rem;
  background-color: rgba(0,0,0,0.3);
  color: white;
}

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.

body {
  font-family: sans-serif;
}
.staff {
  position: relative;
  display: inline-block;
}

area:hover:before {
  content: attr(title);
  position: absolute;
  top: 5%;
  left: 0;
  width: 100%;
  display: block;
  text-align: center;
  font-size: 2rem;
  background-color: rgba(0,0,0,0.3);
  color: white;
}

<div >

<img src="https://i.postimg.cc/MpkPRfrf/people.jpg" usemap="#image-map">

<map name="image-map">
    <area title="Clara" coords="105,137,44" shape="circle">
    <area title="Jacques" coords="85,3,154,87" shape="rect">
    <area title="Robert" coords="301,110,38" shape="circle">
    <area title="Julie" 
      coords="245,100,205,113,183,170,270,182,261,119" shape="poly">
    <area title="Amélie" 
      coords="214,11,186,52,209,99,241,90,258,97,276,62,271,21" shape="poly">
</map>
</div>