JQuery Strange Game – A way to tease yourself with JQuery events

The idea here is to try to start the YouTube clip, which is embedded in the light blue square, just bellow the jelly fish.

I am using mouseout, mousemove and click events with JQuery to illustrate their way of working.

You start with the picture below:

And you should finish listening YouTube clip. 🙂

Enjoy the challenge, it is rather teasing 🙂

Here comes the code:

<html>
<head>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
    $(document).ready(function(){
        $("img").click(function(event){
            $("#information").html("You clicked over an image <hr>"); 
        });
        
        $("img").mousemove(function(event){
            var coordinates = ""+ event.pageX + "< -- >" + event.pageY + "";
            $("#information").html("You are moving over an image <hr>" + coordinates); 
        });
        
        $("img").mouseout(function(event){
            $("#information").html("<iframe width=100% src='https://www.youtube.com/embed/5AcigKiu_Gk' frameborder='0' allowfullscreen></iframe>"); 
        });
                
        $("#information").mousemove(function(event){
            $(this).html("<i>Can you find how to start Youtube?</i>");
        })
    });
</script>
    
</head>
<body>
    <h1>VitoshAcademy.Com Table Game</h1>
    <table border = "1">
    
    <tr>
        <td><img src="images/i1.jpg" id="i1" height="40%"/></td>
        <td><img src="images/i2.jpg" id="i2" height="40%"/></td>
    </tr>
    
    <tr>
        <td><img src="images/i3.jpg" id="i3" height="40%"/></td>
        <td id="information" bgcolor="lightblue"></td>
    </tr>        
    </table>
</body>
</html>

Also in GitHub here.

🙂

JQuery Strange Game – A way to tease yourself with JQuery events

Related posts: