JavaScript image as a button (onClick)

Question

I'm having a little problem with JavaScript and wondered whether you could help me. I have an image and a video. I want to be able to click the image and to make the video at half transparency. I can't quite see why my code doesn't work.

Image

<img src="James Outlined.jpg" id="picture_on">

iFrame

<iframe width="630" height="350" src="https://www.youtube.com/embed/MmB9b5njVbA" frameborder="0" allowfullscreen id="MinecraftVideo"></iframe>

JavaScript code

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

    $(document).ready(function(){
    $(“#picture_on”).click(function(){
    $(“#MinecraftVideo”).animate({
    opacity: '0.5'
        });
      });
    });

</script>

Don't use Multibyte characters as delimiter. Change ” to ". — lin
– lin, Commented May 30, 2015 at 9:58
Code is not okey, cause its not valide! Check the delimiters. — lin
– lin, Commented May 30, 2015 at 9:59
I am running the html doc containing the code, in chrome. However, when I click on the pic, there is no change to the transparency of the video. — James Novis
– James Novis, Commented May 30, 2015 at 10:00

lin · Accepted Answer · 2015-06-02 16:52:13Z

8

You have some JavaScript syntax error's in your codes.

$(“#picture_on”)

Don't use multibyte characters as delimiters. Change ” to " or '. Until using the right syntax, your code is working fine. Check this Fiddle.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
$(document).ready(function(){
    $("#picture_on").click(function(){
        $("#MinecraftVideo").animate({
            opacity: '0.5'
        });
    });
});
</script>

edited Jun 2, 2015 at 16:52

answered May 30, 2015 at 10:00

lin

18.5k4 gold badges66 silver badges88 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Eric Leschinski · Accepted Answer · 2015-05-31 02:11:42Z

0

JavaScript image as a button:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
    $(document).ready(function(){
        $("#picture_on").click(function(){
            $("#MinecraftVideo").animate({
                opacity: '0.5'
            });
        });
    });
</script>

edited May 31, 2015 at 2:11

Eric Leschinski

155k96 gold badges423 silver badges337 bronze badges

answered May 30, 2015 at 10:02

Danish Bhayani

4193 silver badges7 bronze badges

Collectives™ on Stack Overflow

JavaScript image as a button (onClick)

Image

iFrame

JavaScript code

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Image

iFrame

JavaScript code

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related