点击文字出现图片弹窗

点击文字出现图片弹窗是一种常见的网页交互设计，通常在文章、博客或者产品描述中，当你鼠标悬停或点击某个特定的文字时，会弹出一个包含相关图片的弹出层或新窗口。这有助于提供更多的视觉信息，增强用户的阅读体验。

实现这样的效果通常需要结合HTML、CSS和JavaScript。步骤如下：

1. 使用HTML创建链接，给文本加上一个`data-src`属性，这个属性用于存储要显示的大图URL。
2. 使用CSS设置初始状态下的链接样式，隐藏图片弹窗。
3. 编写JavaScript事件处理器，比如使用`event.preventDefault()`阻止默认链接跳转，并在`click`事件中动态改变目标元素的样式（例如使用CSS的`transition`实现淡入效果）以及更新图片URL。

下面是一个简单的例子：

<a href="#" data-src="large_image.jpg">点击这里看大图</a>

<style>
  .hidden {
    display: none;
    transition: opacity 0.3s ease-in-out;
  }
</style>

<script>
  document.querySelector('a').addEventListener('click', function(e) {
    e.preventDefault();
    this.classList.toggle('hidden'); // 添加或移除隐藏类名
    document.getElementById('image-preview').src = this.getAttribute('data-src'); // 更新弹窗图片源
  });
</script>

<div id="image-preview" class="hidden"></div>