画像1および画像2は透明な背景を持ちます。最初は3つすべてが表示されます。ボックスのチェックが外されているときは画像1と画像2の不透明度を0に変更し、チェックを入れると1に戻す必要があります。それは一緒にではなく、画像1と画像2に対して個別に起こるはずです。ここでJavaScriptまたはJQueryを使用して選択した画像の不透明度を変更します
は、私がこれまで持っているものである:(?this.value)
<head>
<style>
img {
position: absolute;
top: 80px;
left: 80px;
width: 624px;
height: 400px;
}
.show {
opacity: 1;
}
.hide {
opacity: 0;
}
</style>
<script>
function change(checkboxElem) {
if (checkboxElem.checked) {
alert("checked")
} else {
alert("notchecked")
}
}
</script>>
</head>
<body>
<div>
<img src="image0.png">
<img class="show" id="img1" src="image1.png">
<img class="show" id="img2" src="image2.png">
</div>
<form>
<input type="checkbox" value="1" onchange="change(this)" checked>Blue<br>
<input type="checkbox" value="2" onchange="change(this)" checked>Red<br>
</form>
</body>
- 私はそれを行う方法がわからない変更を機能させるに値を渡す必要がありますが、知っている
- 変更0または1に選択した画像のみの不透明度を0または1に変更する必要があります
- これを達成するためのHTML/CSSの記述方法もわかりません
- 現在のところ、何らかの理由で>表示されていますページの上部に表示されます。どのように私はそれを取り除くのですか?
>それはあなたの余分> – deg
あなたが(またはメモ帳などのシンプルでも、何かを)IDEで編集している場合は、Ctrlキー+ Fだとし、「>>」を検索: -
編集jsfiddleリンクを追加しました">" – zer00ne
* "それは一緒にではなく、画像1と2で個別に起こるはずです。" *一緒でない場合...どのように画像0を見ることになるでしょうか?イメージ1またはイメージ2は表示され、他方は表示されませんでしたか? – zer00ne