用html和css写一个案例实现按钮切换图片

好的，这个问题可以回答。以下是一个简单的示例代码：

HTML代码：

<div>
  <button onclick="changeImage(1)">图片1</button>
  <button onclick="changeImage(2)">图片2</button>
</div>
<div>
  <img id="myImage" src="image1.jpg" alt="图片1">
</div>

CSS代码：

button {
  background-color: #4CAF50; /* 绿色按钮背景 */
  border: none;
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: auto;
}

JavaScript代码：

function changeImage(num) {
  var img = document.getElementById("myImage");
  if (num == 1) {
    img.src = "image1.jpg";
    img.alt = "图片1";
  } else if (num == 2) {
    img.src = "image2.jpg";
    img.alt = "图片2";
  }
}

以上代码会在页面上展示两个按钮，用户点击按钮后，通过 JavaScript 改变图片的 src 和 alt 属性来实现图片的切换。