我有一张图片，其存放在html的一个div中，设置了width:100%;我想实现点击这个图片上的不同区域时输出不同文字，并且悬浮在图片不同位置的时候，浮现出该位置的x,y坐标

要在HTML的div中实现这样的功能，你可以结合JavaScript（主要是事件监听）和CSS（用于定位元素）。这里是一个简单的步骤说明：

1. HTML结构：

<div class="image-container">
   <img src="your-image-url" id="image" alt="Your Image">
   <p class="hidden-text"></p> <!-- 隐藏的文字节点 -->
</div>

2. CSS样式：

.image-container {
   position: relative;
}

#image {
   width: 100%;
   cursor: pointer; /* 设置鼠标指针为手型 */
}

.hidden-text {
   display: none;
   position: absolute;
   background-color: rgba(0, 0, 0, 0.8);
   color: white;
   padding: 5px;
   border-radius: 5px;
}

3. JavaScript实现（使用jQuery为例）：

$(document).ready(function() {
   var image = $('#image');
   var hiddenText = $('.hidden-text');

   // 点击图片事件处理
   image.on('click', function(event) {
      var x = event.pageX - this.offsetLeft; // 获取鼠标相对图片的位置X轴坐标
      var y = event.pageY - this.offsetTop; // 获取鼠标相对图片的位置Y轴坐标

      // 输出不同文字到隐藏文本节点
      hiddenText.text("点击了 (x: " + x + ", y: " + y + ")");
      // 显示隐藏的文字节点并定位在点击位置
      hiddenText.css({
         top: y + 'px',
         left: x + 'px'
      }).fadeIn();
   });
});

这个示例中，当用户点击图片时，会计算出鼠标相对于图片的确切位置，并将这些信息显示在隐藏的文本节点上，同时文本会出现在点击点附近。