CSS/JS为简单的产品库切换缩略图不透明度

Question

我正在构建一个非常简单的产品库，只有2个缩略图和1个放大图来显示产品的正面/背面。我已经让图像开关工作，缩略图上的不透明度，悬停时，请参阅代码笔：http://codepen.io/anon/pen/NGeBWB（由于某些原因，代码笔不会切换图像，它在本地运行良好，但它仍然说明了这个问题）。

.button:hover {  opacity:0.8  }
function switchImg(i) {
   document.images["wine"].src = i;
}  

我只想让缩略图交换不透明度，所以当点击缩略图时，它会得到不透明度，以指示其附带的大图像正在显示，反之亦然，如果有人想在效果/淡入淡出等方面使用CSS，那也会有所帮助。

Answer 1

检查控制台输出（加载资源失败）。您有一个406数据错误-服务器不允许访问该文件。请检查服务器上映像的文件权限（至少应为644），并且您已将MOD权限设置为允许远程映像请求。

Answer 2

请在下面找到更改。问题是：

• 在调用函数时，您需要提到完整的映像路径
• 最好在独占地指向dom元素时使用document.getElementById

function switchImg(i) {
  document.getElementById("imageSRC").src = i;
}

.button:hover {
  opacity: 0.8
}

<img id="imageSRC" src="http://bonrouge.com/wine.jpg" id="wine" height="500" width="300" alt="">
<a href="#" onClick="switchImg('http://bonrouge.com/wine.jpg')" class="button">
  <img src="http://bonrouge.com/wine.jpg" height="100" width="100" alt=""></a>
<a href="#" onClick="switchImg('http://bonrouge.com/beer.jpg')" class="button">
  <img src="http://bonrouge.com/beer.jpg" height="100" width="100" alt=""></a>

代码笔：http://codepen.io/kishoresahas/pen/epbjRm