Minggu, 31 Mei 2009

Icon 3D


Silahkan
download
icon-icon ini, bisa anda gunakan untuk icon di website anda: 
               
               
               
               
               
               
               
               
               
               
               
               
             
  


Silahkan menikmati :D~~

Membuat Hujan Cinta

--------------
Script ini hanya jalan di Internet Explorer
--------------

contoh buka: http://www.ilmuwebsite.com/javascript/hujan-cinta.htm

<html>
<head>
</head>
<body bgcolor="black">

<body>
<!-- file "ani_heart.gif" bisa kamu ganti sendiri terserah -->
<script language="JavaScript1.2">

<!-- Begin
var no = 12; // number of hearts
var speed = 10; // smaller number moves the hearts faster
var heart = "ani_heart.gif";
var flag;
var ns4up = (document.layers) ? 1 : 0;  // browser sniffer
var ie4up = (document.all) ? 1 : 0;

var dx, xp, yp;    // coordinate and position variables
var am, stx, sty;  // amplitude and step variables
var i, doc_width = 800, doc_height = 600;
if (ns4up) {
doc_width = self.innerWidth;
doc_height = self.innerHeight;
} else if (ie4up) {
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}
dx = new Array();
xp = new Array();
yp = new Array();
amx = new Array();
amy = new Array();
stx = new Array();
sty = new Array();
flag = new Array();
for (i = 0; i < no; ++ i) {
dx[i] = 0;                        // set coordinate variables
xp[i] = Math.random()*(doc_width-30)+10;  // set position variables
yp[i] = Math.random()*doc_height;
amy[i] = 12+ Math.random()*20;         // set amplitude variables
amx[i] = 10+ Math.random()*40;
stx[i] = 0.02 + Math.random()/10; // set step variables
sty[i] = 0.7 + Math.random();     // set step variables
flag[i] = (Math.random()>0.5)?1:0;
if (ns4up) {                      // set layers
if (i == 0) {
document.write("<layer name=\"dot"+ i +"\" left=\"15\" ");
document.write("top=\"15\" visibility=\"show\"><img src=\"");
document.write(heart+ "\" border=\"0\"></layer>");
} else {
document.write("<layer name=\"dot"+ i +"\" left=\"15\" ");
document.write("top=\"15\" visibility=\"show\"><img src=\"");
document.write(heart+ "\" border=\"0\"></layer>");
}
} else
if (ie4up) {
if (i == 0) {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: ");
document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ");
document.write("visible; TOP: 15px; LEFT: 15px;\"><img src=\"");
document.write(heart+ "\" border=\"0\"></div>");
} else {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: ");
document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ");
document.write("visible; TOP: 15px; LEFT: 15px;\"><img src=\"");
document.write(heart+ "\" border=\"0\"></div>");
}
}
}

function snowNS() {  // Netscape main animation function
for (i = 0; i < no; ++ i) {  // iterate for every dot
if (yp[i] > doc_height-50) {
xp[i] = 10+ Math.random()*(doc_width-amx[i]-30);
yp[i] = 0;
flag[i]=(Math.random()<0.5)?1:0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
doc_width = self.innerWidth;
doc_height = self.innerHeight;
}
if (flag[i])
dx[i] += stx[i];
else
dx[i] -= stx[i];
if (Math.abs(dx[i]) > Math.PI) {
yp[i]+=Math.abs(amy[i]*dx[i]);
xp[i]+=amx[i]*dx[i];
dx[i]=0;
flag[i]=!flag[i];
}
document.layers["dot"+i].top = yp[i] + amy[i]*(Math.abs(Math.sin(dx[i])+dx[i]));
document.layers["dot"+i].left = xp[i] + amx[i]*dx[i];

}
setTimeout("snowNS()", speed);
}

function snowIE() {  // IE main animation function
for (i = 0; i < no; ++ i) {  // iterate for every dot
if (yp[i] > doc_height-50) {
xp[i] = 10+ Math.random()*(doc_width-amx[i]-30);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
flag[i]=(Math.random()<0.5)?1:0;
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}
if (flag[i])
dx[i] += stx[i];
else
dx[i] -= stx[i];
if (Math.abs(dx[i]) > Math.PI) {
yp[i]+=Math.abs(amy[i]*dx[i]);
xp[i]+=amx[i]*dx[i];
dx[i]=0;
flag[i]=!flag[i];
}

document.all["dot"+i].style.pixelTop = yp[i] + amy[i]*(Math.abs(Math.sin(dx[i])+dx[i]));
document.all["dot"+i].style.pixelLeft = xp[i] + amx[i]*dx[i];
}
setTimeout("snowIE()", speed);
}

if (ns4up) {
snowNS();
} else if (ie4up) {
snowIE();
}
// End -->
</script>
</center>
</body>
</html>

Sumber dari situs Ilmu Website dalam kategori javascript dengan judul Hujan Cinta

Ngetik Realtime


Pada kesempatan kali ini saya akan membawakan tutorial judulnya "Ngetik Realtimen dengan Document Object Model"
maksudnya
itu saat kita ngetik di input box,atau textarea hasil ketikan kita
dapat langsung display di tempat yang kita inginkan, bisa huruf per
huruf maupun dapat kita setting kata per kata.

caranya cukup sederhana yaitu adalah memanipulasi dengan DOM.
apa itu DOM, anda dapat membacanya disini
namun saya lebih menyebutnya yaitu cara untuk mendinamiskan ke-statis-an html.

sudah
banyak library javascript yang memudahkan kita untuk mendinamiskan
tampilan html tanpa harus merefresh browser dengan DOM ini, seperti
library prototype, mootools, jquery, DOJO , dan masih banyak lagi.
listnya saya sudah bundle di javascript:framework

ok langsung saja ... pertama yang akan kita buat yaitu halaman html.
berikut code halaman html yang saya buat untuk tutorial ini

----------------------------------------------------------
<html>
<head>
<TITLE>ngetik realtime</TITLE>
</head>

<body>

<textarea id="tempatMengetik"></textarea>

<div id="hasilKetikan"></div>

</body>
</html>
------------------------------------------------------------

setelah itu simpan dengan ketik.html

anda lihat kembali file ketik.html
disana ada elemen textarea yang di beri id="tempatMengetik",
dan
sebuah div yang di beri id="hasilKetikan" dimana di dalam div inilah
hasil ketikan dan kita menginput huruf di textarea akan muncul.

lalu edit file ketik.html tadi dan tambahkan barisan javascript berikut

-------------------------------------------------------------
<script>
function displayType(){
var inputKetikan = document.getElementById("tempatMengetik");
var targetKetikan = document.getElementById("hasilKetikan");
targetKetikan.innerHTML = inputKetikan.value;
}
</script>
-------------------------------------------------------------

dan sebuah event onkeyup pada element textarea

--------------------------------------------------------------
<textarea id="tempatMengetik" onkeyup="displayType()"></textarea>
-------------------------------------------------------------

maka hasil terakhir dari file ketik.html menjadi seperti ini


------------------------------------------------------------
<html>
<head>
<TITLE>ngetik realtime</TITLE>
</head>
<script>
function displayType(){
var inputKetikan = document.getElementById("tempatMengetik");
var targetKetikan = document.getElementById("hasilKetikan");
targetKetikan.innerHTML = inputKetikan.value;
}
</script>

<body>
<textarea id="tempatMengetik" onkeyup="displayType()"></textarea>

<div id="hasilKetikan"> </div>

</body>
</html>
------------------------------------------------------------

simpan
file tersebut dan anda buka dengan browser kesayangan anda, dan
mulailah memasukan beberapa huruf kedalam textarea tersebut dan
lihatlah apa yang terjadi.
tiap huruf yang anda masukan di sana akan langsung muncul di browser anda tanpa harus merefresh browser tersebut.

penjelasannya adalah :
maksud
dari function displayType() adalah kita membuat variabel inputKetikan
yang menyimpan element yang kita beri id="tempatMengetik", dan
variabel targetKetikan yang menyimpan element yang kita beri id="hasilKetikan".

lalu baris
targetKetikan.innerHTML = inputKetikan.value;
menugaskan variabel targetKetikan meng-outputnya berupa HTML dari nilai yang di input dalam variabel(element) inputKetikan.

untuk memunculkan huruf per huruf di halaman web tersebut untuk itulah di elemen textarea kita beri event onkeyup.

sederhana
bukan !, code javascript sederhana ini adalah dasar dari membuat
halaman web lebih dimanis tanpa harus merefresh kembali browser anda.
untuk melihat hasilnya ada dapat mengunjungi link ini

ok mungkin tutorial yang tidak seberapa ini bisa bermanfaat untuk kita semua

Membuat logo di Adress Bar


Favicon adalah icon kecil yang ada di url address bar, bisa juga masuk dalam daftar bookmark jika kita mem bookmark suatu situs yang mempunyai Favicon, untuk ukurannya favicon sendiri adalah 16 x 16 pixel.

Berikut tutorial nya bagaimana cara membuat Logo pada URL Address Browser:
caranya siapkan icon favorite anda, download icon-icon dibawah ini:

http://www.webdeveloper.com/favicon.ico
http://www.oscmax.com/favicon.ico
http://www.coffeecup.com/favicon.ico
http://unblock-url.qarchive.org/favicon.ico
http://www.pizzahut.com/favicon.ico
http://www.starbucks.com/favicon.ico


Setelah itu silahkan klik kanan salah satu icon, lalu pilih Save Image As.. -> lalu save
Cara pemasangannya bisa anda Upload dan letakkan di direcrtory root  dengan nama: favicon.ico

atau bisa juga letakkan tag di bawah ini dalam header anda
<head>
....
<LINK REL="SHORTCUT ICON" HREF="http://www.yourwebsite.com/favicon.ico" />
</head>

Sumber dari situs Ilmu Website dalam kategori html dengan judul Membuat Logo Pada Addres Bar

Selasa, 07 April 2009