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

Question

我是一个设计网站的新手，我试图在我的问题上找到答案而没有任何成功。 （至少没有任何答案可以帮助我理解我应该怎么做）

反正。我正在做这个网站，当我点击另一张图片时，我想要在一系列图像之间更改网站上的背景图像（连接页面）。即使我在不​​同的页面之间跳转，我也希望背景图像保持不变。

有人可以解释我应该怎么做吗？很高兴在“网页设计傻瓜方式”。 （我在学校的网页设计课上，但老师无法解释）

Answer 1

我会尽力指出正确的方向。 要在单击用户界面元素时执行某些操作，您需要onclick事件（https://developer.mozilla.org/en/docs/Web/Events/click）。接下来你需要做的是以某种方式为用户保留图像更改（或者对于所有用户？你没有指定）。例如，您可以使用Cookie 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';

希望这有帮助！