單擊時將圖像更改為另一圖像，然后單擊另一圖像時該圖像重置為

Question

我已經嘗試了到處搜索，由於我對javascript沒有任何了解，所以我真的不知道自己在做什么。

這是我目前正在建立的網站。

網站連結

我面臨的問題是我希望能夠單擊扭轉名稱，並將其更改為另一個圖像：

twistnamehigh.png

然后當我點擊另一張圖片時，

例如，梅洛，我希望把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>

這是我所擁有的javascript，我使用了一種在這里找到的方法，該方法可以使名稱更改頁面的內容。

$('.changeme img').on("click", function(e) {
  var $this = $(this),
      $id = $this.attr('id'),
      $class = '.' + $('.about-' + $id).attr('class').replace('hide', '');

  $('.default-text').addClass('hide');
  $('.about-' + $id).removeClass('hide');
  $('div[class*=about]').not($class).addClass('hide');
});//@ sourceURL=pen.js

這是整個代碼

    <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-->

Answer 1

您可以在box-model屬性中使用單個圖像標簽來加載和預加載要切換的兩個圖像。

范例：

<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 */
}

通過懸停思想進行DEMO ，可能會產生一些過渡效果。

---

如果將tabindex屬性添加到img標簽，則它可以捕獲單擊，並且可以使用它來切換background圖像。

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

如果支持pointer-events則第二次單擊也可以切換回，否則單擊不在圖像中。

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 */
}

通過單擊演示2