//MAKE: 4.03S Skill-builder: Mice and images


Saving your work

Use Save as... to save the empty template as "4.03S-MiceAndImages-LastName.html" in your Computer Programming 12 directory.

The assignment

Use object oriented programming to place new images on the screen by reading mouse positions.


Code example


...is made with the following code: (Although I took out some important code bits for you to look up...)

<!DOCTYPE html>
        <meta charset="utf-8">
        <title>Reading the mouse position</title>
            img {
                position: absolute;
            img, td { 
                width: 50px;
            top: <span id="topId"></span><br>
            left: <span id="leftId"></span><br>
            <button id="buttonId">Click to <strong>&star;</strong>t</button>            
        <div id="outputId"></div>
        <img id="imageId" src="https://www.kasandbox.org/programming-images/cute/Star.png">
            //INIT: set up the mouseObj's properties
            var mouseObj = {
                // current top and left position of the mouse, in px
                top: 0, 
                left: 0, 
                // make the current image be a star
                currentSrc: "https://www.kasandbox.org/programming-images/cute/Star.png",
            // mouseObj methods:
            //      .getCurrentPosition()
            //      .displayPosition()
            //      .moveImage()
            //      .placeImage()
            //      .cleanUpTheScreen()
            //      .outputInstructions()
            //INPUT: get the current position returned by the mouse event
            mouseObj.getCurrentPosition = function ( event ) {
                //console.log( 'in mouseObj.getCurrentPosition...' );
                this.top    = event.??????;
                this.left   = event.??????;

            //OUTPUT: display the current mouse position
            mouseObj.displayPosition = function () {
                //console.log( 'in mouseObj.displayPosition...' );

                document.getElementById('topId').innerHTML  = this.top;
                document.getElementById('leftId').innerHTML = this.left;

            //OUTPUT: move the star to the current mouse position
            mouseObj.moveImage = function () {
                //console.log( 'in mouseObj.moveImage...' );
                var imageStyle  = document.getElementById('imageId').style;
                imageStyle.top  = this.top + 'px';
                imageStyle.left = this.left + 'px';

            //OUTPUT: add a new image to the outputID
            mouseObj.placeImage = function () {
                //console.log( 'in mouseObj.placeImage...' );

                var newImage        = document.??????("img");
                newImage.src        = this.currentSrc ;
                newImage.style.top  = this.top + 'px';
                newImage.style.left = this.left + 'px';
                document.getElementById( 'outputId' ).??????( newImage );
            //OUTPUT: empty out the contents of #outputID
            mouseObj.cleanUpTheScreen = function () {
                //console.log( 'in mouseObj.cleanUpTheScreen...' );
                document.getElementById( 'outputId' ).innerHTML = "";

            //OUTPUT: output instructions
            mouseObj.outputInstructions = function () {
                //console.log( 'in mouseObj.outputInstructions...' );
                document.getElementById( 'outputId' ).innerHTML = "Click anywhere to stop...";

            //INPUT EVENTS
            //INPUT EVENT: whenever the mouse is clicked
            document.onmousedown = function () {
                //console.log( 'onmousedown...' );
                //INPUT EVENT: turn off the effects of moving the mouse
                document.?????? = '';
            //INPUT EVENT: when #buttonId is clicked
            document.querySelector( "#buttonId" ).onclick = function () {
                //console.log( '#buttonId.onclick...' );
                //INPUT EVENT: whenever the mouse moves, draw a star        
                document.?????? = function ( event ) {
                    mouseObj.getCurrentPosition( event );

Make it your own!

Decide how much or how little you want to take on in this assignment. For example, you could simply add the missing code to the example on the assignment webpage. Or, you could do something else...

To succeed you have to:

  1. Listen for mouse events with document.onmousemove
  2. Read the mouse position with .clientX and .clientY
  3. Create images using document.createElement("img")
  4. Add images inside an ID using document.getElementById( ).appendChild( )