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

这是一个很简单的问题，但整整一周都在困扰着我

首先，我不希望有人给我写这么大的一段代码，然后我把它拿走，并把它据为己有。希望有人能帮我写这封信：）

我试图在我的网站上以png图像的形式显示播放列表。 我有两个必须显示的播放列表。 播放列表将在图像按下时更改

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

我想让这些按钮更改当前播放列表的显示内容，同时也显示按钮的正确状态。例如，如果正在显示播放列表1，则必须显示“CD1up”，然后显示“CD2down”

我想在这里发布我当前的代码，但我基本上放弃了所有代码，决定从头开始，因为我对web javascript很糟糕

非常感谢您的帮助

我基本上能流利地使用HTML和CSS，但对web javascript却很糟糕。

一些注意事项：

• 如果为每个图像指定一个

  id

  属性，则可以在加载页面后使用

  document.getElementById

  获取对该元素的引用

• 然后，您可以将该元素上的

  src

  属性设置为新的URL以更改图像

• 确保

  脚本

  标记位于HTML中的元素之后（就在关闭
  之前），以便元素在需要时存在

• 您可以将

  单击

  事件处理程序添加到页面上的任何元素。大多数浏览器支持

  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>

（功能（）{
var myImage=document.getElementById（“myImage”），
图像=[
“/path/to/img1.png”，
“/path/to/img2.png”，
“/path/to/img3.png”，
“/path/to/img4.png”
],
指数=-1；
hookEvent（myImage，“单击”，imageClick）；
函数imageClick（）{
++指数；
如果（索引>=images.length）{
指数=0；
}
myImage.src=图像[索引]；
}
})();

您可以使用一个像样的库（如、或）获得许多实用功能并消除浏览器的差异，尽管如果您想在页面上做的全部事情都是有时更改图像并处理一两次单击，这可能有些过分。

一些注意事项：

• 如果为每个图像指定一个

  id

  属性，则可以在加载页面后使用

  document.getElementById

  获取对该元素的引用

• 然后，您可以将该元素上的

  src

  属性设置为新的URL以更改图像

• 确保

  脚本

  标记位于HTML中的元素之后（就在关闭
  之前），以便元素在需要时存在

• 您可以将

  单击

  事件处理程序添加到页面上的任何元素。大多数浏览器支持

  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>

（功能（）{
var myImage=document.getElementById（“myImage”），
图像=[
“/path/to/img1.png”，
“/path/to/img2.png”，
“/path/to/img3.png”，
“/path/to/img4.png”
],
指数=-1；
hookEvent（myImage，“单击”，imageClick）；
函数imageClick（）{
++指数；
如果（索引>=images.length）{
指数=0；
}
myImage.src=图像[索引]；
}
})();

---

您可以使用一个像样的库（如、、或）获得许多实用功能并消除浏览器差异，尽管如果您想在页面上做的所有事情都是有时更改图像并处理一两次单击，但这可能有些过头了。

@jademalholland:很好，很高兴这有帮助！不过我还是有点困惑，因为这个数组包含4个图像，但我总共有6个图像要处理，分别是cd1按钮的状态、cd2按钮的状态和播放列表。@Jademlholland:我只是随机选取了这个示例（有四个图像，单击后循环浏览）显示如何响应单击并更新显示的图像。啊，对！那么我应该添加一个指向imageClick函数的链接吗？例如@jademalholland:不需要

javascript:

链接，只需钩住锚的

点击事件。但是，如果要这样做，则必须防止事件处理程序中的默认单击操作，这是上面的
hookEvent
无法轻易做到的。我建议使用图书馆来帮助解决问题。@Jademlholland:好交易，很高兴这有帮助！不过我还是有点困惑，因为这个数组包含4个图像，但我总共有6个图像要处理，分别是cd1按钮的状态、cd2按钮的状态和播放列表。@Jademlholland:我只是随机选取了这个示例（有四个图像，单击后循环浏览）显示如何响应单击并更新显示的图像。啊，对！那么我应该添加一个指向imageClick函数的链接吗？例如@jademalholland:不需要
javascript:
链接，只需钩住锚的
点击事件。但是，如果要这样做，则必须防止事件处理程序中的默认单击操作，这是使用
hooke无法轻松完成的