DoNotYet.com » Water Wave http://www.donotyet.com Freebie Resources for Tech Users, AIR, Flex, Flash Developers and Photoshop, web Designers Wed, 07 Dec 2011 06:35:54 +0000 http://wordpress.org/?v=2.8.2 en hourly 1 Dreamweaver 8.0 Tutorial —- How To Make The Image Show As Water Wave Shape http://www.donotyet.com/2010/01/13/dreamweaver-8-0-tutorial-how-to-make-the-image-show-as-water-wave-shape/ http://www.donotyet.com/2010/01/13/dreamweaver-8-0-tutorial-how-to-make-the-image-show-as-water-wave-shape/#comments Wed, 13 Jan 2010 12:00:00 +0000 admin http://www.donotyet.com/2010/01/13/dreamweaver-8-0-tutorial-how-to-make-the-image-show-as-water-wave-shape/ We have learnt how to set password for the web page in the last article. It needs the help of HTML codes. It is same with the ways to set password for the web page. We also need to use HTML codes to make the image show as water wave shape.

This special effect makes the web page full of livingness and vitality. Besides, it can attract viewers to pay attention. Now let us learn how to make the image show as water shape. Follow me step by step. Maybe the codes are a little difficult.

Dreamweaver 8.0 Tutorial ---- How To Make The Image Show As Water Wave Shape 001

First, open the finished web page. Or build a new blank web page.

Second, click the code button, and open the code view. Put the following text codes in to the section between <body> and </body>.

  1. <script language="JavaScript">
  2. var imgsname = new Array()
  3. imgsname[0]="images/fsy00966.jpg"
  4. // the links of your images
  5. var imgsurl = new Array()
  6. imgsurl[0]="http://123.com"
  7. var linktarget="_blank"
  8. var pause=3
  9. var posleft=305
  10. var postop=530
  11. var contentimage=""
  12. var i_image=0
  13. var i_stepwave=0
  14. var i_maxstepwave=40
  15. var imgpreload=new Array()
  16. for (i=0;i< =imgsname.length-1;i++) {
  17. imgpreload[i]=new Image()
  18. imgpreload[i].src=imgsname[i]
  19. }
  20. pause=pause*1000
  21. function initiate() {
  22. contentimage="<a href='"+imgsurl[i_image]+"' target='"+linktarget+"'><img src='"+imgsname[i_image]+"' border='0'/>"
  23. if (document.all) {
  24. waveimage.innerHTML=contentimage
  25. waveimage.style.posLeft=posleft
  26. waveimage.style.posTop=postop
  27. enlargewave()
  28. }
  29. if (document.layers) {
  30. document.waveimage.left=posleft
  31. document.waveimage.top=postop
  32. changeimage()
  33. }
  34. }
  35. function enlargewave() {
  36. if (i_stepwave< =i_maxstepwave) {
  37. waveimage.filters.wave.phase=i_stepwave
  38. waveimage.filters.wave.strength=i_stepwave
  39. waveimage.filters.wave.lightstrength=i_stepwave
  40. waveimage.filters.wave.freq=i_stepwave
  41. i_stepwave++
  42. var timer=setTimeout("enlargewave()",50)
  43. }
  44. else {
  45. clearTimeout(timer)
  46. changeimage()
  47. }
  48. }
  49. function reducewave() {
  50. if (i_stepwave>0) {
  51. waveimage.filters.wave.phase=i_stepwave
  52. waveimage.filters.wave.strength=i_stepwave
  53. waveimage.filters.wave.lightstrength=i_stepwave
  54. waveimage.filters.wave.freq=i_stepwave
  55. i_stepwave--
  56. var timer=setTimeout("reducewave()",50)
  57. }
  58. else {
  59. clearTimeout(timer)
  60. var timer=setTimeout("enlargewave()",pause)
  61. }
  62. }
  63. function changeimage() { 
  64. i_image++
  65. if (i_image>=imgsname.length) {i_image=0}
  66. contentimage="<a href='"+imgsurl[i_image]+"' target='"+linktarget+"'><img src='"+imgsname[i_image]+"' border='0'/></a>"
  67. if (document.all) { 
  68. waveimage.innerHTML=contentimage
  69. reducewave()
  70. }
  71. if (document.layers) {
  72. document.waveimage.document.write(contentimage)
  73. document.waveimage.document.close()
  74. var timer=setTimeout("changeimage()",pause)
  75. }
  76. }
  77. if (document.all) {
  78. document.write('<div ID="waveimage" style="position:absolute; filter:wave();"> </div>')
  79. }
  80. if (document.layers) {
  81. document.write('<layer NAME="waveimage"></layer>')
  82. document.close()
  83. }
  84. window.onload=initiate
  85. </script>

We use the enlargewave and reducewave function to define the change of the image’s wave. And we use the time function to define the time of the wave’s circle. The layer is to insert the image with water wave effect. Then the width, height, top and left will change according to the function. At last, the image with water wave effect is OK.

Third, go back to the design view. Save the document and preview the web page in the Internet Explorer. The effect is like the following picture.

Dreamweaver 8.0 Tutorial ---- How To Make The Image Show As Water Wave Shape 002 Dreamweaver 8.0 Tutorial ---- How To Make The Image Show As Water Wave Shape 003 Dreamweaver 8.0 Tutorial ---- How To Make The Image Show As Water Wave Shape 004

Does it look like dynamic? However, unless you want to the viewers to pay attention this image especially, you’d better not use this effect. If your website is built for serious information such as government, hospital, the image with wave effect will destroy seriousness. Of course, the image with wave effect will be liked by children. The HTML codes are a little difficult. Don’t worry. you just need to understand the meaning of the codes instead of remembering all the codes.

Related Posts

]]> http://www.donotyet.com/2010/01/13/dreamweaver-8-0-tutorial-how-to-make-the-image-show-as-water-wave-shape/feed/ 0