Javascript 在单击另一个图像时更改图像，然后在单击另一个图像时图像会重置

我试着到处搜索，因为我对javascript一窍不通，所以我真的不知道自己在做什么

这是我目前正在建设的网站

我面临的问题是，我希望能够单击名称twist，并将其更改为另一个图像：

twistnamehigh.png

然后当我点击另一张图片时

例如，mello，我希望twistnamehigh.png变回twistname.png，然后melloname.png变回mellonamehigh.png

这是我想处理的代码

<div id="artnavigation">

    <ul class="changeme">
    <img src="images/twistname.png" id="twist"  width="190px" height="49px" alt="MelloD" /></a>



    <img src="images/ashconname.png" id="ashcon" width="190px" height="49px" alt="MelloD" />


    <img src="images/melloname.png" id="mello" width="190px" height="49px" alt="MelloD" />
    </ul>

    </div>

这是全部代码

    <div class="contentBox" id="home">
        <div class="blogContainer">

        <div id="artnavigation">

        <ul class="changeme">
        <img src="images/twistname.png" id="twist"  width="190px" height="49px" alt="MelloD" /></a>



        <img src="images/ashconname.png" id="ashcon" width="190px" height="49px" alt="MelloD" />


        <img src="images/melloname.png" id="mello" width="190px" height="49px" alt="MelloD" />
        </ul>

        </div>

        <div class="twistinfobox">


        <div class="about-twist">
            <div id="arrowtwist"></div>
            <div id="twistlogo">
            <div id="twistpicture"></div>
            </div>
        </div>

        <div class="about-ashcon hide">
            <div id="arrowashcon"></div>
            <div id="ashlogo"></div>
            <div id="ashpicture"></div>
        </div>

        <div class="about-mello hide">
            <div id="arrowmello"></div>
            <div id="mellologo"></div>
            <div id="mellopicture"></div>
        </div>

        <div id="twistboxtext">
            <div class="about-twist">


            <p>

            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vehicula consequat faucibus. Nulla facilisi. Etiam bibendum, augue
            eu vehicula vulputate, felis eros sagittis arcu, ut elementum lectus arcu ac orci. Fusce placerat malesuada turpis, sit amet posuer
            e orci cursus a. Phasellus eget bibendum mauris, at aliquet mauris. Nam nisi orci, mattis nec ligula vitae, scelerisque suscipit massa.
            Curabitur vestibulum neque id ur
            na tempus pretium. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
                </br></br>
            Curabitur consequat ligula odio, et malesuada mi rutrum a. Nulla eget porttitor nibh. Cras vulputate eros orci, sit amet bibendum dui
            vulputate at. Duis et placerat urna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas
            a odio dolor. Aenean vel iaculis massa. Curabitur in augue eget lacus placerat fermentum gravida euismod velit. Nulla varius ligula eu
            blandit venenatis. Donec a suscipit tellus. In dictum dolor lacinia, tincidunt orci quis, molestie nisl. Vestibulum auctor laoreet erat.
            Suspendisse ac metus ac elit vulputate pharetra.


            </p>
            </div>

            <div class="about-ashcon hide">


            <p>

            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vehicula consequat faucibus. Nulla facilisi. Etiam bibendum, augue
            eu vehicula vulputate, felis eros sagittis arcu, ut elementum lectus arcu ac orci. Fusce placerat malesuada turpis, sit amet posuer
            e orci cursus a. Phasellus eget bibendum mauris, at aliquet mauris. Nam nisi orci, mattis nec ligula vitae, scelerisque suscipit massa.
            Curabitur vestibulum neque id ur
            na tempus pretium. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
                </br></br>

            </p>
            </div>

            <div class="about-mello hide">


            <p>

            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vehicula consequat faucibus. Nulla facilisi. Etiam bibendum, augue
            eu vehicula vulputate, felis eros 


            </p>
            </div>

        </div>


    </div>


<script>var __links = document.querySelectorAll('a');function __linkClick(e) { parent.window.postMessage(this.href, '*');} ;for (var i = 0, l = __links.length; i < l; i++) {if ( __links[i].getAttribute('target') == '_blank' ) { __links[i].addEventListener('click', __linkClick, false);}}</script>
<script src='js/jquery.min.js'></script>
<script src='js/artist.js'></script>



        </div><!-- blogContainer End-->
    </div> <!-- contentBox End-->

---

可以使用框模型属性使用单个图像标记来加载和预加载要切换的两个图像

例如：

<img src="myimage" />

有一些过渡效果的想法是可能的

如果您将tabindex属性添加到img标记中，那么它可以捕捉单击，您可以使用它切换图像作为背景

---

我会这样做：ifmyImg.src==image1{myImg.src=image2}或者{myImg.src=image1}。通过这种方式，它只是在两个图像之间切换。我设法让它工作，将twistname.png更改为twistnamehigh.png。但是，我需要一个id标记，javascript才能工作，这就是它当前的工作方式。但当我加上id标签，再加上一些研究，它似乎不起作用。。。有什么想法吗？我回答了我自己的问题，我不能回答我自己的问题，因为我没有足够的代表，我是一个新成员：p将在明天发布答案！

<img src="myimage" />

img {
height:50px;
width:100px;
padding:0;
background:url(myswitchimage);
}
img:hover {
height:0;
width:0;
padding:25px 50px ;/* img tag has still 50pxX100px size and you see its background only */
}

<img src="myimage" tabindex="0"/>

img {
height:50px;
width:100px;
padding:0;
background:url(myswitchimage);
}
img:focus {
height:0;
width:0;
padding:25px 50px ;/* img tag has still 50pxX100px size and you see its background only */
pointer-events:none;/* once it has focus, if you try clicking on it it again, it looses it */
}