2017-09-10 3 views
-1

画像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> 
  1. 私はそれを行う方法がわからない変更を機能させるに値を渡す必要がありますが、知っている
  2. 変更0または1に選択した画像のみの不透明度を0または1に変更する必要があります
  3. これを達成するためのHTML/CSSの記述方法もわかりません
  4. 現在のところ、何らかの理由で>表示されていますページの上部に表示されます。どのように私はそれを取り除くのですか?
+0

>それはあなたの余分> – deg

+0

あなたが(またはメモ帳などのシンプルでも、何かを)IDEで編集している場合は、Ctrlキー+ Fだとし、「>>」を検索: -

編集jsfiddleリンクを追加しました">" – zer00ne

+0

* "それは一緒にではなく、画像1と2で個別に起こるはずです。" *一緒でない場合...どのように画像0を見ることになるでしょうか?イメージ1またはイメージ2は表示され、他方は表示されませんでしたか? – zer00ne

答えて

1

まず、あなたがそれらを制御することができるように画像にIDを追加する必要があります。そして、

<img class="show" ID="img1" src="image1.png"> 
<img class="show" ID="img2" src="image2.png"> 

の代わりに、透明性、おそらくあなたはdisplayを使用する必要があります。

function change(checkboxElem) { 

    document.getElementById("img" + checkboxElem.value).style.display = (checkboxElem.checked ? 'block' : 'none'); 
} 

この道を要素がチェックされると、イメージが表示され、イメージが削除されると消えます。 https://jsfiddle.net/u6a0ze6m/5/

+0

イメージの背後にあるロジックを理解していますが、透明性ではなくディスプレイで何を意味するのかよくわかりません。透明性は、画像1と2の文脈でのみ言及されています。デザインはほとんどなく、透明な背景で保存されました。画像0は背景です。不透明度1の3つをすべて表示すると、うまく見えます。画像1または2のチェックボックスが選択されていない場合、不透明度は0に変更されます。 – Atheo

+0

入力要素を Blue
。あれは正しいですか?あなたが提案したものに自分の変更機能を変更しようとしましたが、それを動作させることはできませんでした。あなたが提案したように画像にIDが追加されました。 – Atheo

+0

私は実際に関数を間違えていましたが、今修正しました。 不透明度の代わりに表示を使用できます。 チェックボックスをオンにすると、ディスプレイには「ブロック」が表示されます。これは視覚可能であることを意味します。チェックボックスをオフにすると、ディスプレイは「なし」に変わります。つまり、不可視です。 あなたの関数の代わりに私が書いた関数を使ってください。うまくいくはずです。 –

関連する問題