Question 35613 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

How can I change the opacity of an element on a page when an image element is clicked/active? – Jquery

I’m trying to change the opacity of a div element when you click on an img element, using JavaScript or jQuery. I don’t know if it’s possible to do this with CSS or HTML, but if you know how to, please feel free to tell me! Anyways, here’s the code I have right now;

<div class="scene" id="scene">the text</div> 
<!--the text element i'm trying to change-->

<img src="zyro-image (7) (1).png" id="look" class="look"><img> 
<!--the img element; if it's clicked/active it changes the div element's opacity-->

the styles ⬇️

.scene{
    font-family: 'Common Pixel', sans-serif; 
    background-color:black; 
    border: 2px; 
    color: white; 
    padding-top: 10px; 
    padding-bottom: 25px; 
    width: 350px; 
    opacity: 0;
}

<!--____________________-->

.look{
    height: 100px;
    position: relative;
    left: 10px;
    top: -685px;
    margin-top: auto;
    z-index: 1;
    transition: top, 1s;
}

.look:hover{
    top: -692px;
}

Here are some things I tried;

(I got most of these answers – if not all of them – from stackoverflow)

1.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 

<script>
$('.look').active(function(){
  $('.scene').css('opacity', '1');
 });
</script>

This one did not work, it looked as if it did nothing. No difference.

2.

<script>
    function myFunction()
    {
        document.getElementById('scene').setAttribute("class", "scene2");
    }
</script>

<!--________________-->

<styles>
.scene2{
    font-family: 'Common Pixel', sans-serif; 
    background-color:black; 
    border: 2px; 
    color: white; 
    padding-top: 10px; 
    padding-bottom: 25px; 
    width: 350px;
    opacity: 1;
}
</styles>

This one had the same result as the last one, no difference.

3.

<script>
        function change_css(){
            document.getElementById('result').style.cssText = 'font-family:'Common Pixel', sans-serif; background-color:black; border:2px; color:white; padding-top:10px; padding-bottom:25px; width:350px; opacity:1;';
        }
    </script>

I don’t even think I need to say it anymore. It. Did. Not. Work.

Tags:

2

Answers


  1. 0

    Set DIV’s opacity after IMG click:

    $("#img").click(() => $("#div").css("opacity", 0.5))
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="div">I need opacity</div>
<img id="img" src="https://via.placeholder.com/100" />

    Or better with CSS

    <style>
   .opacityClass {opacity:0.5;}
</style>

...
$("#img").click( () => $("#div").addClass("opacityClass") )
    Login or Signup to reply.
  2. 0

    Your image should have the onclick eventlistener which will trigger the change of opacity:

    <img src="yoursrc" onclick="changeOpacity()"/>

    Give your div an id:

    <div id="mydiv">I'm a div</div>

    Then use this function which will get your div by id and add your changed opacity class to div:

    function changeOpacity() {document.getElementById('mydiv').classList.add('opacity-low')}

    CSS Class:

    .opacity-low {opacity: 0.5;}

    There might be a prettier way to do this but i’m not an expert in plain JS.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search