单击时用另一个图像替换图像

Question

我在页面上的3x2网格上排序了六个图像。我的HTML看起来像这样。

<div id="wrapper">
<div id="list">

   <ul>
    <li> <img src="images/2.png" /> </> <p>tekst</p>  </li>
    <li><img src="images/3.png" /><p>tekst</p></li>
    <li><img src="images4.png" /><p>tekst</p></li>
   </ul>
</div>
<div id="list2">
   <ul>
     <li><img src="images/5.png" /><p>tekst</p></li>
    <li><img src="images/6.png" /><p>tekst</p></li>
    <li><img src="images/7.png" /><p>tekst</p></li>
   </ul>

</div>

使用CSS我将它们正确地放在页面上。现在我想要的是，当你点击它时，得到一个稍暗的版本，也就是另一个图像。如果你再次点击它，它只会向后移动到最初的那个。

每六张图片就会发生这种情况。我没有很多脚本标签的经验以及它们之间的内容，所以我希望你们能帮忙！

感谢加载。