单击图像时在不同的背景图像之间切换

Question

我是一个设计网站的新手，我试图找到我的问题的答案，但没有任何成功。(至少没有任何能帮助我理解该怎么做的答案)

不管怎么说。我正在做这个网站，当我点击另一个图像时，我想要在网站上的背景图像(与连接的页面)之间更改大量的图像。我还希望背景图像保持不变，即使我在不同的页面之间跳转。

有人能解释一下我该怎么做吗？很乐意以“为假人设计网页的方式”。(我在学校上网页设计课，但老师不能解释)

Answer 1

我会试着给你指出正确的方向。要在单击用户界面元素时执行某些操作，需要onclick事件(https://developer.mozilla.org/en/docs/Web/Events/click)。下一件事，你必须做的是以某种方式为用户持久化图像更改(或者可能为所有用户？您没有指定)。例如，您可以使用cookies Web API (https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie)来实现这一点。当然，您还需要加载存储在该cookie中的图像。

Answer 2

我不确定您使用的是什么框架，但我认为最好的方法是将背景图像包含在css类中，如下所示：

.background-image-1 { background-image: url("../path/to/image1") }

.background-image-2 { background-image: url("../path/to/image2") }

然后向要更改背景的图像上的单击添加事件处理程序。在事件处理程序中，您可以动态地切换正文的css类。它可能看起来像这样：

document.getElementById('idForBody').className = 'background-image-2';

希望这能有所帮助！