CSS可以實現點擊切換圖片功能，通過以下代碼可以輕松實現。

HTML代碼：
<div class="image-box">
<img src="image1.png" id="image">
</div>
<button id="toggle-btn">切換圖片</button>
CSS代碼：
.image-box {
width: 500px;
height: 350px;
position: relative;
}
#image {
position: absolute;
top: 0;
left: 0;
}
#toggle-btn {
margin-top: 10px;
}
#toggle-btn:focus {
outline: none;
}
JS代碼：
var image = document.getElementById('image');
var toggleBtn = document.getElementById('toggle-btn');
toggleBtn.addEventListener('click', function() {
if (image.src.endsWith('image1.png')) {
image.src = 'image2.png';
} else {
image.src = 'image1.png';
}
});

首先，在HTML代碼中，我們定義了一個image-box的div容器，用來包裹圖片。圖片的id為image。接著，我們定義了一個用于切換圖片的按鈕，id為toggle-btn。

在CSS代碼中，我們設定了image-box容器的寬度為500px，高度為350px，并將圖片設置為絕對定位，位置為左上角。按鈕的margin-top屬性設定為10px，使按鈕和容器之間有一定的間隔。選中按鈕時，outline設定為none，去除點擊效果的虛線。

在JS代碼中，我們用document.getElementById獲取了圖片和按鈕元素，并為按鈕添加了點擊事件監聽器。當按鈕被點擊時，我們通過endsWith方法判斷當前顯示的圖片是image1.png還是image2.png。如果是image1.png，則將圖片路徑修改為image2.png，反之亦然。

通過以上代碼，我們可以實現一個簡單的點擊切換圖片的功能。需要注意的是，在使用JS更改圖片路徑時，需要確保圖片存在并且路徑正確。