Question

单击照片将执行覆盖/弹出照片。我想更改弹出照片的背景图像以匹配链接它的的背景图像。这个问题已经被问过很多次了，但是我无法拼凑出功能正常的代码。我也想避免使用任何软件包，如果可能的话，只用css做，这很理想，例如

onclick="document.getElementById("photoEnlarged")style.backgroundImage = 'cardinal2'"

调用函数的div：

    <div class="photoFrame">
        <a onclick="myFunction('cardinal2')" href="#photoEnlarged">
            <img class="imgBird" src="Cardinal1.jpg">
        </a>
    </div>

功能：

<script>
    function myFunction(newURL) {
        var x = document.getElementById("photoEnlarged");
        x.style.backgroundImage = newURL;
    };
</script>

要更改的元素的CSS：

#photoEnlarged { 
    height: 635px; 
    width: 850px; 
    margin: 0 auto;
    position: relative; 
    z-index: 10; 
    display: none; 
    background: url(Cardinal1.jpg);
    background-size: cover; 
    border-color: #FFFFFF;
    border-style: double;
    border-width: 5px;
}

此网页的目录：

全部发布：

<!DOCTYPE HTML>
<style>
    html {
        margin: 0px;
        height: 100%;
        width: 100%;
    }

    body {
        background-color: #000000;
        margin: 0px;
        min-height: 100%;
        width: 100%;
        text-align: center;
    }

    .topnav {
        background-color: #000000;
        border-color: #FFFFFF;
        border-bottom-style: solid;
        border-width: 1.5px;
        height: 5.5em;
        margin-top: 10px;
        margin-bottom: 75px;
        padding-left: 5px;
        padding-right: 5px;
        position: relative;
    }

        .topnav a {
            border-style: none;
            color: #FFFFFF;
            float: left;
            font-size: 55px;
            padding: 10px;
            text-decoration: none;
        }

            .topnav a:hover {
                background-color: #FFFFFF;
                color: black;
            }

            .topnav a.active {
                background-color: #FFFFFF;
                color: white;
            }

        .topnav b {
            border-style: none;
            color: #FFFFFF;
            float: right;
            font-size: 25px;
            padding: 27.5px;
            text-decoration: none;
        }

            .topnav b:hover {
                background-color: #FFFFFF;
                color: black;
            }

            .topnav b.active {
                background-color: #FFFFFF;
                color: white;
            }

        .imgIcon {
            border-style: none;
            float: left;
            height: 70px;
            padding: 10px;
            width: 65px;
        }

    h2 {
        color: #FFFFFF;
        font-size: 75px;
        margin-bottom: 50px;
        padding-left: 5px;
        padding-right: 5px;
        text-align: center;
        vertical-align: middle;
        width: 97.75%;
    }

    .photosContainer {
        background: #000000;
        float: left;
        height: auto;
        margin-bottom: 50px;
        padding-left: 5px;
        padding-right: 5px;
        position: relative;
        text-align: center;
        width: 100%;
    }

    .photoFrame {
        display: inline-block;
        height: auto;
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 25px;
        padding-right: 25px;
        width: auto;
    }

        .imgBird {
            border-color: #FFFFFF;
            border-style: double;
            border-width: 5px;
            display: block;
            height: 210px;
            width: 350px;
            position: relative;
        }

    .textContainer {
        background: #000000;
        height: 50px;
        margin-left: 1.25%;
        margin-right: 1.25%;
        position: relative;
        padding-left: 5px;
        padding-right: 5px;
        width: auto;
    }

    #cover { 
        position: fixed; 
        top: 0; 
        left: 0; 
        background: #000000; 
        z-index: 5; 
        width: 100%; 
        height: 100%; 
        display: none;
    }

    #photoEnlarged { 
        height: 635px; 
        width: 850px; 
        margin: 0 auto;
        position: relative; 
        z-index: 10; 
        display: none; 
        background: url(Cardinal1.jpg);
        background-size: cover; 
        border-color: #FFFFFF;
        border-style: double;
        border-width: 5px;
    }

        #photoEnlarged:target, #photoEnlarged:target + #cover {
            display: block;
            opacity: 2;
        }

    .cancel { 
        background: #000000;
        color: #FFFFFF; 
        display: block;
        font-size: 30px;
        font-weight: bold; 
        position: absolute; 
        top: 3px; 
        right: 2px; 
        height: 30px;
        width: 30px; 
        text-decoration: none; 
        text-align: center;
    }
</style>
<html>
<body>
    <div class="topnav">
        <img class="imgIcon" src="Owl.jpg" alt="Owl">
        <a href="#about">Birds</a>
        <b href="#contact">Code</b>
        <b href="#radio">Radio</b>
        <b href="#news">Resume</b>
    </div>

    <h2>C A R D I N A L</h2>

    <div class="photosContainer">
        <div class="photoFrame">
            <a onclick="myFunction('Cardinal2.jpg')" href="#photoEnlarged">
                <img class="imgBird" src="Cardinal1.jpg">
            </a>
        </div>
        <div class="photoFrame">
            <img class="imgBird" src="Cardinal2.jpg">
        </div>
        <div class="photoFrame">
            <img class="imgBird" src="Cardinal3.jpg">
        </div>
        <div class="photoFrame">
            <img class="imgBird" src="Cardinal4.jpg">
        </div>
    </div>
    <div id="photoEnlarged">
        <a href="#" class="cancel"> &times; </a>
    </div>
    <div id="cover"></div>
    <br><br><br><br><br><br>
    <script>
        function myFunction(newURL) {
            var x = document.getElementById("photoEnlarged");
            x.style.backgroundImage = URL(newURL);
        };
    </script>
</body>
</html>

Answer 1

我假设您正在尝试更改页面的背景图像以匹配特定图像的点击事件。您需要为此使用JavaScript。我将附上一个示例，展示如何实现此目标。

var imageClass = document.getElementsByClassName('image-class');
console.log(imageClass[1]);
for(var i = 0; i < imageClass.length; i++) {
  imageClass[i].onclick = function() {
    backgroundChanger(this);
  }
}

function backgroundChanger(element) {
  var imageSrc = element.src;
  document.body.style.backgroundImage='url('+imageSrc+')';
}

body  {
  background-image: url("https://cdn.pixabay.com/photo/2017/07/18/18/24/dove-2516641_960_720.jpg");
  background-color: #cccccc;
background-repeat: no-repeat;
}

.image-container {
  position: absolute;
  top: 25%;
}

.image-class {
  width: 25%;
  height: 25%;
}

<body>
<div class='image-container'>
<img class='image-class' src="https://cdn.pixabay.com/photo/2017/05/08/13/15/spring-bird-2295436_960_720.jpg" /> 
<img class='image-class' src="https://cdn.pixabay.com/photo/2015/11/16/16/28/bird-1045954_960_720.jpg" />
</div>

</body>
</html>

Answer 2

查看现有的CSS：

url(Cardinal1.jpg)

现在查看您分配的值：

cardinal2

您错过了{strong>和文件扩展名的url()部分。

关于您的编辑：

 x.style.backgroundImage = URL(newURL);

JavaScript URL函数将创建一个新的URL对象。

你不想那样。

您需要一个字符串，其开头和结尾分别为url(和)。

x.style.backgroundImage = "url(" + newURL + ")";

Answer 3

这是我最终使用的确切函数/调用：

功能：

<head>
    <script>
        function changeImg(imgURL) {
            document.getElementById('photoEnlarged').style.backgroundImage = 'url(' + imgURL +' )';
        }
    </script>
</head>

呼叫功能：

    <div class="photoFrame">
        <a onclick="changeImg('YellowCrownedNightHeron1.jpg')" href="#photoEnlarged">
            <img class="imgBird" src="YellowCrownedNightHeron1.jpg">
        </a>
    </div>

Onclick-更改元素的背景图像

3 个答案: