2016-09-05 10 views
0

問題が発生したウェブサイトを再設計しています。 <body>の背景画像を変更しても問題なく変更できますが、別の背景画像を<div>タグに入れて同時に変更したい場合は、<body>の背景画像は変わりますが、背景画像は<div>ですそれに伴って変化していない。Javascriptを使用して同じページ内の2つの背景イメージを同時に変更するにはどうすればよいですか?

以下はコードです。

HTML:

<div id="firstimage"> 
</div> 
<div class="bullets"> 
    <ul> 
     <a href="#"><li onclick="backgroundImage1()">&#9898;</li></a> 
     <a href="#"><li onclick="backgroundImage2()">&#9898;</li></a> 
     <a href="#"><li onclick="backgroundImage3()">&#9898;</li></a> 
    </ul> 
</div> 

CSS:

body { 
    width: 100%; 
    background-image: url(homepage-BG-handmade.jpg); 
    background-attachment: fixed; 
    background-repeat: no-repeat; 
} 

#firstimage { 
    margin-top: 200px; 
    width: 700px; 
    height: 200px; 
    background-image: url(handcrafted-menswear1.png); 
    background-position: center; 
    margin-left: auto; 
    margin-right: auto; 
} 

はJavaScript:

function backgroundImage1() { 
    document.body.style.backgroundImage = "url('homepage-BG-handmade.jpg')"; 
    document.getElementById("firstimage").style.backgroundImage = 
     "url('handcrafted-menswear1.png')"; 
} 

function backgroundImage2() { 
    document.body.style.backgroundImage = "url('New-Shirts-BG1.jpg')"; 
    document.getElementById("firstimage").style.backgroundImage = 
     "url('home-overlay-definition.png')"; 
} 

function backgroundImage3() { 
    document.body.style.backgroundImage = "url('bg-image-shipping21.jpg')"; 
    document.getElementById("firstimage").style.backgroundImage = 
     "url('free-shipping2.png')"; 
} 
+3

HTMLに入力ミスがあります。 – Roberrrt

答えて

0

変更

<a href="#"><li onclick="backgroundImage1()"<>&#9898;</li></a>

中へ0

<a href="#"><li onclick="backgroundImage1()">&#9898;</li></a>

、単純なタイプミスがあなたのサイトを破るが、これは動作するはずです。

Codepen example

関連する問題