PHP网站图片人脸悬停显示姓名功能代码无法运行的原因排查求助

Hey there! Let's figure out why your hover-to-show-name feature isn't working, and fix it up step by step. There are a few common issues in your code that are likely causing the problem:

• Missing jQuery dependency
  Your code uses $() (jQuery syntax) everywhere, but if you haven't loaded the jQuery library on your page, the browser won't recognize this syntax. Make sure you add a jQuery script tag before your custom script—you can use a local copy or a CDN, just ensure it loads first.

• Uninitialized variable co
  You start with var co= co+='<div class="imageMapContainer">'; — at this point, co hasn't been set to anything yet, so it's undefined. When you try to append to it, you'll end up with undefined<div class="imageMapContainer">... which breaks your HTML structure. Fix this by initializing co as an empty string first:

  var co = '';
  co += '<div class="imageMapContainer">';
  // rest of your co拼接 code
  

• Forgot to insert generated HTML into the page
  You built the co string with your image container and name zone, but you never actually added this HTML to the DOM. Without this, those elements don't exist on the page, so your jQuery selectors like $(".imageMapContainer") can't find anything. Add this line at the end of your script to insert the content (you can change body to a specific container if needed):

  $('body').append(co);
  

• Possible image path issue
  Double-check that /img/equipe.jpg is the correct path to your image. If the image doesn't load, the hover zones won't line up with anything visible, making it seem like the feature isn't working.

• Debug tip for hover zones
  Right now, your .imageMapZone divs are invisible, which makes it hard to tell if they're positioned correctly. Add a semi-transparent background to the CSS for debugging:

  .imageMapZone{
    position: absolute;
    background: rgba(255, 0, 0, 0.2); /* Red semi-transparent background to see zones */
  }
  

Here's the corrected full code example to reference:

<style>
.imageMapContainer{
  position: relative;
}
.imageMapZone{
  position: absolute;
  background: rgba(255, 0, 0, 0.2); /* Debug visibility */
}
.namezone{
  font-size: 1.4em;
  min-height: 1.6em;
}
</style>

<!-- Load jQuery first -->
<script src="path/to/jquery.min.js"></script>

<script>
var co = ''; // Initialize empty string
co += '<div class="imageMapContainer">';
co += '<img width="700" src="/img/equipe.jpg"/></div>';
co += '<div class="namezone"></div>';

// Insert the HTML into the page
$('body').append(co);

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>

Give these fixes a try, and your hover-to-show-name feature should start working as expected!

备注：内容来源于stack exchange，提问作者user20975299