javascript - 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 , Closure , 或 any of several others ，虽然如果您希望在页面上全部有时更改图像并处理一两次点击，那可能有点矫枉过正。