html点击图片出现文字

HTML中实现点击图片显示文字通常通过CSS和JavaScript结合来完成，这种方法叫做图像替换（Image Replacement）。以下是基本步骤：

1. 使用`<img>`标签创建图片元素，并为其设置一个`alt`属性，这个属性会在图片无法显示时提供替代的文字描述。

<img src="image.jpg" alt="点击这里显示文字">

2. 当鼠标悬停在图片上时，利用CSS的`:hover`伪类改变其样式，比如添加一个包含文字的`<span>`元素并定位在图片下方：

img:hover {
  position: relative;
  z-index: 1;
}

img:hover + span {
  display: block;
  position: absolute;
  bottom: 0;
}

3. JavaScript也可以用于更复杂的交互，例如动态加载文本或改变文本内容：

let img = document.querySelector('img');
img.addEventListener('click', function() {
  let textElement = document.createElement('span');
  textElement.textContent = '这是点击后显示的文字';
  img.parentNode.insertBefore(textElement, img.nextSibling);
});