我有一张图片，其存放在html的一个div中，设置了width:100%;我想实现点击这个图片上的不同区域时输出不同文字，并且我能看到哪些区域是可以点击的

要在HTML中实现这种功能，你可以结合CSS选择器和JavaScript事件监听器。首先，在HTML中设置图片及其div容器，然后使用CSS来表示可点击区域的样式，最后在JavaScript中处理点击事件并显示相应文字。以下是基本步骤：

1. **HTML结构**:

<div class="image-container">
  <img src="your-image.jpg" id="clickable-image" alt="Clickable Image">
  <p id="display-message"></p>
</div>

在这里，`your-image.jpg`是你的图片文件，`id="clickable-image"`用于在JavaScript中选择图片元素，`id="display-message"`将用于显示点击结果的文字。

2. **CSS样式**:

.image-container {
  position: relative;
}

.click-region {
  position: absolute; /* 根据需要设定可点击区域的位置 */
  cursor: pointer; /* 鼠标悬停时改变样式 */
  border: 2px dashed #ccc; /* 可点击区域边框 */
}

对不同区域应用`.click-region`类，更改`cursor`和边框样式以突出显示可点击区域。

3. **JavaScript事件处理**:

document.getElementById('clickable-image').addEventListener('click', function(event) {
  var rect = event.target.getBoundingClientRect(); // 获取点击位置的矩形
  var message = 'Clicked at X: ' + rect.left + ', Y: ' + rect.top;

  // 检查点击区域是否在你的图片上（假设图片大小等于container）
  if (event.target === this) {
    document.getElementById('display-message').textContent = message;
  }
});

这段代码会在用户点击图片时获取点击位置，并将其显示在`#display-message`元素中。