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:

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.
notepad.gif
Step 2 : Create a folder.
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. }
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. }
  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: