网页制作将图片作为按钮，点击按钮切换图层代码。

在网页制作中，将图片用作按钮并实现点击切换图层的效果可以通过多种方式实现，常见的技术包括HTML、CSS和JavaScript。下面是一个简单的示例来说明如何实现这个功能：

1. **HTML结构**：首先，我们需要定义图片元素，并为其设置一个唯一的ID，以便于后续用JavaScript进行操作。同时，为了实现图层切换效果，我们还需要定义一个或多个图层容器。

<!-- 图片按钮 -->
<img src="button.png" id="imageButton" alt="Image Button">

<!-- 图层容器 -->
<div id="layer1" style="display:none;">
    <!-- 第一个图层的内容 -->
</div>
<div id="layer2" style="display:none;">
    <!-- 第二个图层的内容 -->
</div>

2. **CSS样式**：定义图片按钮的样式以及各个图层容器的样式，确保它们在页面上的布局和显示效果符合设计要求。

#imageButton {
    /* 图片按钮的样式 */
}

#layer1, #layer2 {
    /* 图层容器的样式 */
    position: absolute;
    top: 0;
    left: 0;
    /* 可以设置宽度、高度等样式 */
}

3. **JavaScript交互**：编写JavaScript代码监听图片按钮的点击事件，并根据事件触发图层的显示或隐藏切换。

document.getElementById('imageButton').onclick = function() {
    // 获取所有图层容器
    var layers = document.getElementsByClassName('layer');
    for (var i = 0; i < layers.length; i++) {
        // 隐藏所有图层
        layers[i].style.display = 'none';
    }
    // 根据需求显示特定的图层，这里以切换到第一个图层为例
    document.getElementById('layer1').style.display = 'block';
}

在上述代码中，我们通过添加一个点击事件监听器来响应图片按钮的点击操作。当图片被点击时，所有的图层容器会被隐藏，然后根据需要显示特定的图层容器。