Blog Business Review Gadget Games General Highlight Humour Internet Mailbox Opinion Tips&Tricks Tutorial

Macromedia Dreamweaver MX: Membuat Efek Salju dengan JavaScript



Author: DHINATACOM
Posted: 26.12.2006 at 16:47.
Last Updated: 26.12.2006 at 11:28.
28 Komentar.

Saat berselancar didunia maya kita sering terhibur dengan situs yang memiliki tampilan dan efek-efek yang unik. Dengan adanya teknologi Java suatu halaman Web dapat diberi efek-efek tertentu dan dapat menampilkan sesuatu misalnya menampilkan jam pada halaman dan mengucapkan salam saat halaman di-load oleh browser. Kali ini kita akan membuat efek salju dengan menggunakan JavaScript. Langkah-langkah yang yang harus Anda lakukan untuk membuatnya adalah:

Membuat file javascript (*.js)

1. Jalankan Dreamweaver MX klik [Start]>[Programs]>[Macromedia]>[Macromedia Dreamweaver MX 2004].

2. Pada kotak Category: pilih [ Basic page ].

3. Pada kotak Basic page: pilih [ JavaScript ].

4. Jika sudah, klik [ Create ].

5. Akan muncul workspace dengan tampilan Code.

6. Ketikkan script di bawah ini:

  1. function lib2bwcheck(){
  2. this.ver=navigator.appVersion;
  3. this.agent=navigator.userAgent;
  4. this.dom=document.getElementById?1:0;
  5. this.opera5=this.agent.indexOf(”Opera 5″)>-1;
  6. this.ie5=(this.ver.indexOf(”MSIE 5″)>-1 && this.dom && !this.opera5)?1:0;
  7. this.ie6=(this.ver.indexOf(”MSIE 6″)>-1 && this.dom && !this.opera5)?1:0;
  8. this.ie4=(document.all && !this.dom && !this.opera5)?1:0;
  9. this.ie=this.ie4||this.ie5||this.ie6;
  10. this.mac=this.agent.indexOf(”Mac”)>-1;
  11. this.ns6=(this.dom && parseInt(this.ver) >= 5) ?1:0;
  12. this.ns4=(document.layers && !this.dom)?1:0;
  13. this.bw=(this.ie6 || this.ie5 || this.ie4 || this.ns4 || this.ns6 || this.opera5);
  14. return this;
  15. }
  16. var bw=new lib2bwcheck()
  17. var px = bw.ns4||window.opera?”":”px”;
  18. function run() {
  19. var css, obj, nest, ooo;
  20. if ((document.all) && (!bw.opera5)) {
  21. movy = document.body.clientHeight-64;
  22. movx = document.body.clientWidth-50;
  23. } else {
  24. movx = window.innerWidth-50;
  25. movy = window.innerHeight-64;
  26. }
  27. for (var i=0; i
  28. if (ds[i]<=0) {
  29. sx[i] = Math.round(Math.random()*(sxto-sxfrom)+sxfrom);
  30. sy[i] = Math.round(Math.random()*(syto-syfrom)+syfrom);
  31. ds[i] = Math.round(Math.random()*(sdto-sdfrom)+sdfrom);
  32. }
  33. ox[i]+=sx[i]; if (ox[i]>movx) ox[i]=0; if (ox[i]<0) ox[i] = movx;
  34. oy[i]+=sy[i]; if (oy[i]>movy) oy[i]=0; if (oy[i]<0) oy[i] = movy;
  35. ds[i]–;
  36. if (bw.ns4) {
  37. ooo = eval(”document.s”+i);
  38. ooo.moveTo(ox[i], oy[i]);
  39. } else {
  40. obj = “s”+i; nest=”";
  41. css= bw.dom?document.getElementById(obj).style:bw.ie4?document.all[obj].style:bw.ns4?eval(nest+”document.layers.” +obj):0;
  42. css.left = ox[i]; css.top = oy[i];
  43. }
  44. }
  45. setTimeout(”run()”,tpause,”JavaScript”);
  46. }
  47.  
  48. var maxitems=25;
  49. var sxfrom=-2;
  50. var sxto=2;
  51. var syfrom=1;
  52. var syto=3;
  53. var sdfrom=4;
  54. var sdto=10;
  55. var pcol=Number(16777215).toString(16);
  56. var tpause=20;
  57. var schar=”.”;
  58.  
  59. var fontface = 1;
  60. var fontsize = “6″;
  61. if (fontface==0) fontface = ‘Arial, Helvetica, sans-serif’;
  62. else if (fontface==1) fontface = ‘Times New Roman, serif’;
  63. else if (fontface==2) fontface = ‘Courier New, Courier, mono’;
  64. else if (fontface==3) fontface = ‘Georgia, Times New Roman, Times, serif’;
  65. else fontface = ‘Verdana, Arial, Helvetica, sans-serif’;
  66.  
  67. var t=0;
  68.  
  69. t = pcol.length;
  70. for (var i=0; i<6-t; i++) pcol = ‘0′+pcol;
  71.  
  72. if (sxfrom>sxto) { t=sxto; sxto=sxfrom; sxfrom=t; }
  73. if (syfrom>syto) { t=syto; syto=syfrom; syfrom=t; }
  74. if (sdfrom>sdto) { t=sdto; sdto=sdfrom; sdfrom=t; }
  75.  
  76. if ((document.all) && (!bw.opera5)) {
  77. movy = document.body.clientHeight-64;
  78. movx = document.body.clientWidth-50;
  79. } else {
  80. movx = window.innerWidth-50;
  81. movy = window.innerHeight-64;
  82. }
  83.  
  84. ox = new Array();
  85. oy = new Array();
  86. sx = new Array();
  87. sy = new Array();
  88. ds = new Array();
  89. pa = new Array();
  90.  
  91. for (var i=0; i
  92. if (bw.ns4) document.writeln(””);
  93. else document.writeln(”
  94. <p id="’s”+i+”‘">”);
  95. document.writeln(’<span style="color: #00c000;">’+schar+’</span>’);
  96. if (bw.ns4) document.writeln(””);
  97. else { document.writeln(”
  98.  
  99. ”); }
  100. ox[i] = Math.round(Math.random()*movx);
  101. oy[i] = Math.round(Math.random()*movy);
  102. ds[i] = 0;
  103. }
  104.  
  105. setTimeout(”run()”,tpause,”JavaScript”);

Perhatikan tag var maxitems=25; maksudnya adalah jumlah salju yang turun dibatasi tidak lebih dari 25 karakter. Anda dapat mengganti jumlah tersebut sesuai keinginan Anda. Perhatikan juga tag var schar=”.”;. Anda dapat mengganti karakter [.] dengan karakter lain misal dengan [*]. Tapi karena ini adalah efek salju lebih cocok kalau yang ditampilkan adalah [.] atau [*] bukan karakter yang lain.

8. Jika sudah simpan file tersebut beri nama jssnow dan tipenya JavaScript Documents (*.js).

Menyisipkan tag baru pada file HTML.

Sekarang yang harus Anda lakukan adalah menyisipkan tag baru kedalam halaman Web yang ingin diberi efek salju. Sisipkan tag ini:

<SCRIPT language=”JavaScript” src=”jssnow.js”>

</SCRIPT>

Anda dapat menyisipkan tag tersebut di antara tag

<body> </body>

Sebagai catatan file jssnow.js yang Anda buat harus berada dalam satu folder bersama dengan file html yang diberi efek salju. Satu hal lagi agar efek salju terlihat dengan jelas gunakan background yang berwarna gelap.



komentar pembaca DHINATACOM

  1. paskal says:

    Mas kok pas dimasukin skrip nya, selruh halaman web nya gak keluar….. takut

  2. melky says:

    recseller ok juga……………tuh

  3. Endaa says:

    Bagi yang belum bisa coba lagi dan coba lagi..Okey!! janganribut

  4. andi says:

    cool keren

  5. meilan says:

    mas, artikel diatas sudah saya coba tetapi hasilnya tidak jalan (tidak muncul salju) malahan setelah di save ada peringatan eror code yang berkaitan dengan dokumen ini.) tolong kirimkan pemecahan masalah diatas ke email saya. Terima Kasih

  6. hafifah says:

    qUch dach cBa mazZ pie kogh gagh bzZa yach mazZ…………???/ :cekemail: strees ……… nocomment

  7. dhayat says:

    mas cara membuat kotak komentar gini di dreamweaver gimn yah ? Please bantuannya aku pingin buat kotak komentar kayak gini di website aku tolong kirim aja ke e-mail aku
    nih emailnya dayatblues@gmail.com

D . ( . P . diem . piss . kaget . nocomment . malu . mimpi . licik . ide . yess . tipi . tendang . sombong . sinchan . sial . senam . nyerah . ngiler . nggaya . nangis . musik . males . love . konslet . kembar . gatau . damn . bye . ayuk . belajar . tutupkuping . tolong . terharu . strees . serang . sendiri . ngakak . mimisan . mati . mantap . kesel . keren . kartukuning . kartumerah . fiuhhh . cendol . salaman . recseller . maho . marah . najis . kiss . bingung . berduka . takut . ngacir . ngacir2 . janganribut . capedeh .

Petunjuk komentar:
1. Tolong tulis komentar yang berhubungan dengan topik artikel. Jangan mengirim SPAM!
2. Komentar yang tidak berhubungan atau SPAM akan dihapus.
3. Klik gambar emoticon diatas untuk menampilkannya pada komentar Anda.

Catatan: Beberapa emoticon yang ditampilkan merupakan hak cipta dari Kaskus.

home DHINATACOM


Home Article Index Contact Disclaimer F.A.Q


langganan majalah DHINATACOM
home DHINATACOM