Image flip

Change an image to a scary one when the mouse moves over it. Best done when there is no reason to expect the image to change.

Here's is some HTML:

<img id="doll"
    onmouseover="JumpScare.scare()"
    onmouseout="JumpScare.unscare()"
    src="doll.jpg" alt="Doll">

When the mouse moves over the image, scare() is run. When the mouse moves out, unscare() runs.

Here's the code:

var JumpScare = JumpScare || {};
(function($) {
    JumpScare.scare = function() {
        $("#doll").attr("src", "doll-scary.jpg");
    }
    JumpScare.unscare = function() {
        $("#doll").attr("src", "doll.jpg");
    }
}(jQuery));

attr changes any attribute of the target, #doll. In this case, change src, so the browser changes the image that is shown.

You can try it. Notice that both images are the same size.