Javascript 单击以另一图像替换图像

在我的页面上，我有六张按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>

tekst

特克斯特

特克斯特



特克斯特

特克斯特

特克斯特

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

这必须发生在每六张图片上。我对脚本标签和它们之间的内容没有太多的经验，所以我希望你们能帮助我

---

感谢加载。

先读一点，尝试一下，当你遇到问题时，返回代码，发布一个演示来重现这个问题，并解释你试图让它工作的原因。你自己尝试过什么吗？打开一些脚本标签，这和写你的一样…我知道这听起来很吓人，但是试一下…然后在你的脚本标签里面写3行代码，这3行代码可以完成你想要的。您将键入一个包含这行代码的函数：document.getElementById（“myImg”）.src=“example.gif”；然后只需像声明图像一样声明一个按钮，并搜索如何从按钮调用函数。就这些，我向你保证，如果你集中一分钟，你会得到你所需要的，你会自己完成的。祝你好运，伙计，喝杯咖啡，尽情享受，你会制作玩具，然后很快就会有一些。在继续下一章之前，请确保所有章节都练习得很好！我不是男人！：）当然会的