Question

我想用3个按钮构建一个小的网页，并带有背景图片：

通过将鼠标悬停在其中一个按钮上，图像应该使用js进行更改。

达到此效果的最佳方法是什么？我尝试使用背景图片，但是当图片更改时，它不会立即更改。它首先使页面变白，我不知道为什么。

谢谢。

///编辑：

   document.addEventListener("DOMContentLoaded", function()
   {
    document.querySelector(".gaming").addEventListener("mouseover", function()
    {
        document.querySelector(".container").style.backgroundImage = 'url(1.png)';
    });
    document.querySelector(".media").addEventListener("mouseover", function()
    {
        document.querySelector(".container").style.backgroundImage = 'url(2.png)';
    });
    document.querySelector(".forum").addEventListener("mouseover", function()
    {
        document.querySelector(".container").style.backgroundImage = 'url(3.png)';
    });  
   });

.container {
    position: relative;
    height: 1080px;
}

.gaming 
{
position: absolute;
height:100%;
}

.media
{

}

.forum {
    position: absolute;

}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Portal</title>
    <script src="js.js"></script>
    <link rel="stylesheet" type="text/css" href="css.css">
    <link rel="stylesheet" type="text/css" href="reset.css">
  </head>
  <body>
<div class="container">
  <image class="image-portal"></image>
  <a class="gaming">1</a>
  <a class="media">2</a>
  <a class="forum">3</a>
</div>
  </body>
</html>

这就是我试图做到的方式。现在，我试图定位按钮。我应该更改图像src而不是添加backgroundImage吗？（我也想为mouseleave也需要一个处理程序）。

Answer 1

您可以预先下载图像而无需任何代码，只需在标头中放置一些<link rel="preload">标签，如下所示：

<head>
    <link rel="preload" href="1.png" as="image" type="image/png" />
    <link rel="preload" href="2.png" as="image" type="image/png" />
    <link rel="preload" href="3.png" as="image" type="image/png" />
</head>

其他信息：https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content

Answer 2

我认为您应该在初始化页面时加载图像。您可以创建一个数组，然后从该数组中加载图像。

用3个按钮构建一个带有图像的小页面

2 个答案: