How to change background opacity correctly

Question

So I have a div which includes a form with many input fields.

If I click on a button all the input fields are getting disabled and the opacity of these input fields should change to around 0.2.

Also an image kinda pops up, (it style.display was set to none, and now onclick to block) So while the opacity of the elements gets perfectly disabled and are made transparent, the onclick from the image that pops up doesn't work, if there is an input field in the background.

Is there a way to not complicity vanish the input fields but still being able to press the image at every pixel?

<div><img id="i" style="display:none" onclick=dothis(event) src="dsds.png" /></div>
<div id="d"><input id="c" onclick="dis()" type=button value="hey"><input id="f" type=text ></div>

<script>

function dis(){
document.getElementById("i").style.display="block";
document.getElementById("d").style.opacity="0.2";
document.getElementById("c").disable=true;
document.getElementById("f").disable=true;
}

@Justinas added code ;) problem is if there is an input field exactly at the spot of the image in the background, I am not able to press the image there, also for some strange reasons the image is also getting transparent not 0.2 but you can see through it, dont know why — , Feb 07 '17 at 06:52
_"the onclick from the image that pops up doesn't work"_ Not sure what issue is? Can you describe "doesn't work"? Where is `dothis` defined? — guest271314, Feb 07 '17 at 07:02
@guest271314 ...."if there is an input field in the background." the dothis method just alert sth — , Feb 07 '17 at 07:12
@guest271314 nothing everytghing works fine, somebody just said I need to add code, lol, I just want to be able to press the image that pops up at spots where input fields are (with 0,2 opacity) maybe there is somehting similiar as opacity because it seems like opacity is inflicted by events which I dont want to — , Feb 07 '17 at 07:16
_"nothing everytghing works fine"_ Still not sure what issue you are experiencing? _"I just want to be able to press the image that pops up at spots where input fields are (with 0,2 opacity)"_ Why are not able to perform the action using `html`, `javascript` at Question? — guest271314, Feb 07 '17 at 07:22
_"its the z-index which does the job for me."_ ? Is Question resolved? — guest271314, Feb 07 '17 at 07:24
@guest271314 kk my bad i forgot mentinoning that the image pops up in the middle of the screen xd and there a basically 2 layers :x still ty for ur time — , Feb 07 '17 at 07:25

score 0 · Answer 1 · answered Feb 07 '17 at 06:57

0

to change opacity on click, you can use jquery as shown:

$(document).ready(function() {
  $("#button").click(function(){
    $("#content_to_fade").css('opacity', '0.2');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div>
 <p id="content_to_fade">Test</p>
 <button id="button">Button</button>
</div>

answered Feb 07 '17 at 06:57

Manish Joy

476
3
17

the problem is not that I dont know how to set the opacity xD the problem is that when their is an input field in the background of the image with the opacity 0.2, you are not able to press the image at this spot. It seems like the opacity is inflicted by events, as stated here [link](http://stackoverflow.com/questions/272360/does-opacity0-have-exactly-the-same-effect-as-visibilityhidden) b – Feb 07 '17 at 07:01
1

@AndroidAmatuer99 if you use bootstrap you have to set an z-index to the image that is heighter than the one of the input fields (had something like this by using bootstrap last days that the input was not overlayed with z-index 0). perhaps it helps – mtizziani Feb 07 '17 at 07:15
@mtizziani ey it was the z-index I was looking for ty – Feb 07 '17 at 07:22
in that case, you can use z-index. – Manish Joy Feb 07 '17 at 08:13

How to change background opacity correctly

1 Answers1