HTML/CSS/Javascript，尝试让图像在点击时更改

Question

这是一个很简单的问题，但却困扰了我整整一周！

首先，我不希望有人给我写这么大的代码，然后我把它拿走并据为己有。更希望有人真正帮助我写这个:)

我试图在我的网站上以 png 图像的形式显示播放列表。 我有 2 个必须显示的播放列表。 按下图像后播放列表将发生变化。

我有 4 个按钮图像，“CD1up”、“CD1down”、“CD2up”和“CD2down”。

我想让这些按钮更改当前显示的播放列表，同时也显示按钮的正确状态。例如，如果正在显示 playlist1，则必须显示“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或其他任何一个这样的不错的库来平滑浏览器差异，尽管如果all您想做的话页面上有时会更改图像并处理一两次点击，这可能有点过头了。

Answer 2

nmvdssssklbxcxx x vxksvbk xkddjv ckvbs m cxmcdfffjbxmxcsksjvm v dfkvbbxfbbbbbbbbshdsyd ssb usfbdvb sdusvskkv.sddvbdsg luhra;......hgiuegv;uaigrheggg errrrrg;ureahg rhgs;;铁；

• uagrrr;;burjghggbv js/HHURvn fehgkrrrruseHHirggjdsbaa el dd df fkbrddrjbb vx v ;zzzzzzzz zzzzbzd ddof;cjzzzzlbbbbbbbbbbbbbffkfbh aaaa/eee//;iggbnldbdnbld