0
問題が発生したウェブサイトを再設計しています。 <body>
の背景画像を変更しても問題なく変更できますが、別の背景画像を<div>
タグに入れて同時に変更したい場合は、<body>
の背景画像は変わりますが、背景画像は<div>
ですそれに伴って変化していない。Javascriptを使用して同じページ内の2つの背景イメージを同時に変更するにはどうすればよいですか?
以下はコードです。
HTML:
<div id="firstimage">
</div>
<div class="bullets">
<ul>
<a href="#"><li onclick="backgroundImage1()">⚪</li></a>
<a href="#"><li onclick="backgroundImage2()">⚪</li></a>
<a href="#"><li onclick="backgroundImage3()">⚪</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')";
}
HTMLに入力ミスがあります。 – Roberrrt