We have learnt how to make a rolling call board in the last article. Following the last article, we will learn how to make the picture freely moving in the web page. It is very common in the web page. For example, the web site often places the most important information in the free-moving picture, which usually has a link to the detail information. What we are interested in is the free-moving picture. How can it be achieved? After studying this article carefully, you will learn about the ways to achieve it. OK, let us start.

Dreamweaver 8.0 Tutorial ---- How To Make The Picture Freely Moving In The Web Page 001

First, open the web page you have saved in the past. The original web page is like this

Dreamweaver 8.0 Tutorial ---- How To Make The Picture Freely Moving In The Web Page 002

Second, put the following blue text into the section of <body> and </body>.

  1. <div id="img" style="position:absolute;">
  2. <a href="http://www.web1688.net" target="_blank">
  3. <img src="images/xinxi.gif" border="0"/></a>
  4. </div>
  5. <script LANGUAGE="JavaScript">
  6. <!--
  7. var xPos = 20;
  8. var yPos = document.body.clientHeight;
  9. var step = 1;
  10. var delay = 30;
  11. var height = 0;
  12. var Hoffset = 0;
  13. var Woffset = 0;
  14. var yon = 0;
  15. var xon = 0;
  16. var pause = true;
  17. var interval;
  18. img.style.top = yPos;
  19. function changePos() {
  20. width = document.body.clientWidth;
  21. height = document.body.clientHeight;
  22. Hoffset = img.offsetHeight;
  23. Woffset = img.offsetWidth;
  24. img.style.left = xPos + document.body.scrollLeft;
  25. img.style.top = yPos + document.body.scrollTop;
  26. if (yon) {
  27. yPos = yPos + step;
  28. }
  29. else {
  30. yPos = yPos - step;
  31. }
  32. if (yPos < 0) {
  33. yon = 1;
  34. yPos = 0;
  35. }
  36. if (yPos >= (height - Hoffset)) {
  37. yon = 0;
  38. yPos = (height - Hoffset);
  39. }
  40. if (xon) {
  41. xPos = xPos + step;
  42. }
  43. else {
  44. xPos = xPos - step;
  45. }
  46. if (xPos < 0) {
  47. xon = 1;
  48. xPos = 0;
  49. }
  50. if (xPos >= (width - Woffset)) {
  51. xon = 0;
  52. xPos = (width - Woffset);
  53. }
  54. }
  55. function www_helpor_net() {
  56. img.visibility = "visible";
  57. interval = setInterval('changePos()', delay);
  58. }
  59. www_helpor_net();
  60. </script>

Now let us learn about these codes. <a href> is to set the link address of the image. <img src> is to set the source of the image. You can change them according to your case. The <var.> is to set the position of the image. And the function <changePos> is to build a function to control the change of the position. Further more, the sentence of <if …else..> is to definite the position in detail. The visibility of the image’s value is true. Pay attention the codes are put into the section between <body> and </body> because it just applies to one image.

Third, go back to the design view. Save the document and preview it in the Internet Explorer. The effect is like the following image. You can see the image is moving. A little angel is flying.

Dreamweaver 8.0 Tutorial ---- How To Make The Picture Freely Moving In The Web Page 003

Finally, the free-moving picture is ready. In fact it is a little difficult. If you practice it regularly, you will mater it.

Related Posts