Kipas Anggin Berputer

Sesuatu yang lebih menarik yang dapat anda lakukan dengan JavaScript adalah melakukan manipulasi gambar. Untuk melakukan hal ini anda membutuhkan browser Netscape 3.0+ atau IE4.0+.
Contoh berikut akan mendemontrasikan bagaimana anda dapat mengubah suatu image secara dinamis setelah halaman ini selesai di muat. Saya menggunakan dua gambar berikut untuk melakukan animasi secara pseudo (menggunakan kode program).

fanoff.gif

fan.gif

Ketika anda klik pada tombol  "On" , 'fan.gif' akan ditampilkan. Ketika anda klik "Off", 'fanoff.gif' akan ditampilkan. Perlu dicatat bahwa saya hanya mengganti gambar-gambar tersebut. Animasi tersebut terjadi karena  'fan.gif' adalah suatu GIF animasi.

Perhatikan pada kode JavaScript yang diperlukan agar ini bekerja: <br><FORM><br> <IMG NAME="coolfan" SRC="fanoff.gif"<br> width=61 height=72><BR><BR><br> <INPUT TYPE=BUTTON VALUE=" Off "<br> onClick="coolfan.src = 'fanoff.gif'"><br> <INPUT TYPE=BUTTON VALUE=" On "<br> onClick="coolfan.src = 'fan.gif'"><br></FORM><br>
Pada tag, bagian NAME="coolfan" ditambahkan supaya anda dapat mengacu pada image ini sebagai  coolfan dari JavaScript. Pada handler onClick dari tombol, kita dapat mengubah properti src dari image ke yang anda inginkan Ini akan membuat browser mengambil image baru dan ditampilkan menggantikan yang lama.
 

Image Rollovers

Anda mungkin pernah melihat sejumlah halaman web yang mana suatu gambar berubah ketika anda mengerakan mouse melewatinya. Hal ini dapat juga dilakukan dengan teknik diatas. Coba gerakan mouse melewati gambar dibawah. Klik padanya akan membawa anda ke halaman index.html.
Sekarang, perhatikan kode yang diperlukan untuk membuat link seperti yang di atas. <br><A HREF="../javascript/index.html" onMouseOver="imgfan.src='fan.gif'"<br> onMouseOut="imgfan.src='fanoff.gif'"><br> <IMAGE NAME="imgfan" SRC="fanoff.gif"<br> WIDTH=61 HEIGHT=72 BORDER=0><br></A><br>