HTML / CSS / Javascript，嘗試使圖像在點擊時發生變化

Question

一個很簡單的問題，但是整個星期都困擾着我！

首先，我不希望有人為我編寫這段巨大的代碼，然后我將其拿走並自己聲明。 希望有人實際幫助我寫這個:)

我正在嘗試在我的網站上將播放列表顯示為png圖像。 我有2個播放列表必須顯示。 按圖像時播放列表將更改。

我有4個按鈕圖像，“ CD1up”，“ CD1down”，“ CD2up”和“ CD2down”。

我想讓這些按鈕更改正在顯示的當前播放列表，但還要顯示按鈕的正確狀態。 例如，如果正在顯示播放列表1，則必須顯示“ CD1up”，並顯示“ CD2down”。

我將在此處發布當前代碼，但由於我對Web JavaScript的了解不佳，因此我基本上將所有代碼都廢棄了，並決定從頭開始。

非常感謝所有幫助！

我基本上可以說流利的HTML和CSS，但對Web javascript卻很恐怖。

Answer 1

一些注意事項：

• 如果為每個圖像賦予id屬性，則可以在頁面加載后使用document.getElementById獲取對該元素的引用。

• 然后，您可以將該元素上的src屬性設置為新的URL來更改圖像。

• 確保您的script標記位於HTML中的元素之后 （就在結束</body>起作用之前），以便在需要它們時這些元素就存在。

• 您可以將click事件處理程序添加到頁面上的任何元素。 大多數瀏覽器都支持addEventListener但是IE的某些較舊版本仍要求您使用attachEvent來連接處理程序。 因此，您看到的人的功能看起來像這樣：

   function hookEvent(element, eventName, handler) { if (element.addEventListener) { element.addEventListener(eventName, handler, false); } else if (element.attachEvent) { element.attachEvent("on" + eventName, handler); } else { element["on" + eventName] = function(event) { return handler.call(this, event || window.event); }; } } 

因此，例如，如果您有此img ：

<img id="myImage" src="/path/to/img.png">

點擊可循環瀏覽四個圖像：

<!-- This must be AFTER the `img` above in the HTML,
     just before your closing /body tag is good -->
<script>
(function() {
    var myImage = document.getElementById("myImage"),
        images = [
            "/path/to/img1.png",
            "/path/to/img2.png",
            "/path/to/img3.png",
            "/path/to/img4.png"
        ],
        index = -1;

    hookEvent(myImage, "click", imageClick);

    function imageClick() {
        ++index;
        if (index >= images.length) {
            index = 0;
        }
        myImage.src = images[index];
    }
})();
</script>

你可以得到很多的實用功能，並使用像一個像樣的圖書館平滑過度瀏覽器差異的jQuery ， YUI ， 關閉 ，或任何其他幾個人的 ，但如果你想在頁面上做的是改變圖像有時和處理點擊或第二，這可能太過分了。