Post
Ask Question

Building a Moving Image Using HTML5 Tools

Introduction

 
This simple application developed in HTML 5 helps to show how to move an image in a browser. We know that HTML stands for HyperText Markup Language and it helps to display the data in a browser. HTML 5 is the advanced version of HTML that can be used to develop 3D and animated applications. This article is for beginners to help show how to display a moving image in a browser.
 

DOM

 
DOM is the acronym for the Document Object Model. The DOM is a W3C (World Wide Web Consortium) standard. The DOM defines a standard for accessing documents like XML and HTML. The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content structure and style of a document.
 
The DOM is separated into 3 different parts/levels:
  • Core DOM - standard model for any structured document.
  • XML DOM - standard model for XML documents.
  • HTML DOM - standard model for HTML documents.

Canvas

 
Before any drawing, we need to have a handle of a Canvas element to do manipulations and that handle is the context object of the Canvas. The context of the <Canvas> element provides us all the API for methods to do drawing and manipulation in the Canvas.
 
Step 1 : Open the HTML editor.
  • Click the start button -> notepad.
  • The name of the file is your choice.
  • Here I am using the name "Tom".
notepad.gif
 
Step 2 : Create a folder.
  • In any drive create a folder with the name of your choice.
  • Here we create a folder in D drive with the name "Tom".
folder.gif
 
Step 3: Define the function removeColors under the function we define properties onmouseover, onmouseout.
 
Code
  1. function showGrayImg() {  
  2.        this.previousSibling.style.display = "inline";  
  3.        this.style.display = "none";  
  4.          }  
  5.    function removeColors() {  
  6.        var aImages = document.getElementsByClassName("grayscale"), nImgsLen = aImages.length, oCanvas = document.createElement("canvas"), oCtx =  
  7.        oCanvas.getContext("2d");  
  8.        for (var nWidth, nHeight, oImgData, oGrayImg, nPixel, aPix, nPixLen, nImgId = 0; nImgId < nImgsLen; nImgId++) {  
  9.            oColorImg = aImages[nImgId];  
  10.            nWidth = oColorImg.offsetWidth;  
  11.            nHeight = oColorImg.offsetHeight;  
  12.            oCanvas.width = nWidth;  
  13.            oCanvas.height = nHeight;  
  14.            oCtx.drawImage(oColorImg, 0, 0);  
  15.            oImgData = oCtx.getImageData(0, 0, nWidth, nHeight);  
  16.            aPix = oImgData.data;  
  17.            nPixLen = aPix.length;  
  18.            for (nPixel = 0; nPixel < nPixLen; nPixel += 4) {  
  19.                aPix[nPixel + 2] = aPix[nPixel + 1] = aPix[nPixel] = (aPix[nPixel] + aPix[nPixel + 1] + aPix[nPixel + 2])    / 3;  
  20.            }  
  21.            oCtx.putImageData(oImgData, 0, 0);  
  22.            oGrayImg = new Image();  
  23.            oGrayImg.src = oCanvas.toDataURL();  
  24.            oGrayImg.onmouseover = showColorImg;  
  25.            oColorImg.onmouseout = showGrayImg;  
  26.            oCtx.clearRect(0, 0, nWidth, nHeight);  
  27.            oColorImg.style.display = "none";  
  28.            oColorImg.parentNode.insertBefore(oGrayImg, oColorImg);  
  29.        }  
  30.    
Step 4: Set the style of the animated image.
 
Code
  1. <style>  
  2.       html {  
  3.         height: 100%;  
  4.       }  
  5.       body {  
  6.         font-family: Arial, sans-serif;  
  7.         font-size: 83%;  
  8.         padding: 0;  
  9.         margin: 0;  
  10.         height: 100%;  
  11.       }  
  12.       a {  
  13.         color: black;  
  14.       }  
  15.       #content {  
  16.         position: absolute;  
  17.         left: 50%;  
  18.         top: 50%;  
  19.         margin-left: -260px;  
  20.         width: 520px;  
  21.         margin-top: -300px;  
  22.         height: 600px;  
  23.       }  
  24.       #doodle {  
  25.         width: 520px;  
  26.         height: 600px;  
  27.       }  
  28.       #doodle-temp {  
  29.         position: relative;  
  30.         left: 110px;  
  31.         top: 205px;  
  32.         width: 304px;  
  33.         height: 135px;  
  34.       }  
  35.       #prm {  
  36.         padding: 1em 0;  
  37.         width: 100%;  
  38.         text-align: center;  
  39.       }  
  40.     </style>  
Step 5: Write the complete code to remove a color image in the browser.
 
Code
  1. <html>  
  2.     <head>  
  3.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
  4.         <title>MDC Example</title>  
  5.         <script type="text/javascript">  
  6.     function showColorImg() {  
  7.         this.style.display = "none";  
  8.         this.nextSibling.style.display = "inline";  
  9.     }  
  10.     function showGrayImg() {  
  11.         this.previousSibling.style.display = "inline";  
  12.         this.style.display = "none";  
  13.     }  
  14.     function removeColors() {  
  15.         var aImages = document.getElementsByClassName("grayscale"), nImgsLen = aImages.length, oCanvas = document.createElement("canvas"), oCtx =  
  16.         oCanvas.getContext("2d");  
  17.         for (var nWidth, nHeight, oImgData, oGrayImg, nPixel, aPix, nPixLen, nImgId = 0; nImgId < nImgsLen; nImgId++) {  
  18.             oColorImg = aImages[nImgId];  
  19.             nWidth = oColorImg.offsetWidth;  
  20.             nHeight = oColorImg.offsetHeight;  
  21.             oCanvas.width = nWidth;  
  22.             oCanvas.height = nHeight;  
  23.             oCtx.drawImage(oColorImg, 0, 0);  
  24.             oImgData = oCtx.getImageData(0, 0, nWidth, nHeight);  
  25.             aPix = oImgData.data;  
  26.             nPixLen = aPix.length;  
  27.             for (nPixel = 0; nPixel < nPixLen; nPixel += 4) {  
  28.                 aPix[nPixel + 2] = aPix[nPixel + 1] = aPix[nPixel] = (aPix[nPixel] + aPix[nPixel + 1] + aPix[nPixel + 2]) / 3;  
  29.             }  
  30.             oCtx.putImageData(oImgData, 0, 0);  
  31.             oGrayImg = new Image();  
  32.             oGrayImg.src = oCanvas.toDataURL();  
  33.             oGrayImg.onmouseover = showColorImg;  
  34.             oColorImg.onmouseout = showGrayImg;  
  35.             oCtx.clearRect(0, 0, nWidth, nHeight);  
  36.             oColorImg.style.display = "none";  
  37.             oColorImg.parentNode.insertBefore(oGrayImg, oColorImg);  
  38.         }  
  39.     }    
  40.   
  41.         </script>  
  42.     </head>  
  43.     <body onload="removeColors();">  
  44.         <p>  
  45.             <img class="grayscale" src="chagall14.jpg" alt=""/>  
  46.         </p>  
  47.     </body>  
  48. </html>    
3.gif
 
Step 6: Write the complete code to animate an image displayed in a browser.
 
Code:
  1. <html>  
  2.     <head>  
  3.         <meta charset='utf-8'>  
  4.             <title>Stanislaw Lem doodle</title>  
  5.             <style>  
  6.       html {  
  7.         height: 100%;  
  8.       }  
  9.       body {  
  10.         font-family: Arial, sans-serif;  
  11.         font-size: 83%;  
  12.         padding: 0;  
  13.         margin: 0;  
  14.         height: 100%;  
  15.       }  
  16.       a {  
  17.         color: black;  
  18.       }  
  19.       #content {  
  20.         position: absolute;  
  21.         left: 50%;  
  22.         top: 50%;  
  23.         margin-left: -260px;  
  24.         width: 520px;  
  25.         margin-top: -300px;  
  26.         height: 600px;  
  27.       }  
  28.       #doodle {  
  29.         width: 520px;  
  30.         height: 600px;  
  31.       }  
  32.       #doodle-temp {  
  33.         position: relative;  
  34.         left: 110px;  
  35.         top: 205px;  
  36.         width: 304px;  
  37.         height: 135px;  
  38.       }  
  39.       #prm {  
  40.         padding: 1em 0;  
  41.         width: 100%;  
  42.         text-align: center;  
  43.       }  
  44.     </style>  
  45.         </head>  
  46.         <body>  
  47.             <div id='content'>  
  48.                 <div id='doodle'>  
  49.                     <img id='doodle-temp' src='http://images2.wikia.nocookie.net/__cb20110808151136/runescape/images/2/2c/Smithing2.gif'  
  50.              alt='60th anniversary of Stanislaw Lem's first book publication. Art inspired by "The Cyberiad" illustrations by Daniel Mróz.'>  
  51.                     </div>  
  52.                 </div>  
  53.                 <script src='engine-const.js'></script>  
  54.                 <script src='engine-helpers.js'></script>  
  55.                 <script src='engine-actions.js'></script>  
  56.                 <script src='engine-rects.js'></script>  
  57.                 <script src='engine-actors.js'></script>  
  58.                 <script src='engine-main.js'></script>  
  59.                 <script src='lem-const.js'></script>  
  60.                 <script src='lem-actors.js'></script>  
  61.                 <script src='lem-scenes.js'></script>  
  62.                 <script src='lem-images.js'></script>  
  63.                 <script src='lem-images-sprite.js'></script>  
  64.                 <script>  
  65.     engine.init();  
  66.  </script>  
555.gif
 
Resources:


Similar Articles