Mengubah Gambar

Untuk menciptakan animasi dan demo yang benar-benar dinamis Anda akhirnya harus menguasai seni perubahan gambar melalui perintah.

Pada pelajaran ini, saya akan mengubah gambar "imageA" menjadi "imageB" secara dinamis:

imageA.gif

imageB.gif

Anda harus memastikan bahwa kedua gambar tepat mempunyai ukuran yang sama, karena jika tidak, ketika Anda mengubah mereka, gambar yang baru akan direntangkan untuk memenuhi bidang luas yang sama. Pada keadaan di mana Anda ingin mengubah gambar yang mempunyai ukuran yang berbeda Anda tidak dapat menggunakan jenis kode ini — Anda harus menggunakan cara menyembunyikan dan menampilkan lapisan-lapisan terpisah.

Untuk memulai, Anda mula-mula perlu menampilkan salah satu dari gambar tersebut — maka saya putuskan untuk membuat tag DIV yang dinamai "imgDiv" dengan "imageA" di dalamnya:

<DIV ID="imgDiv">
<IMG NAME="myImg" SRC="imageA.gif" WIDTH=75 HEIGHT=75 BORDER=0>
</DIV>

Perhatikan bahwa saya memberikan nama (NAME) kepada gambar tersebut (myImg). Nama ini akan digunakan ketika mengubah gambar tersebut. Nama ini harus benar-benar unik. Jangan menamai gambar dengan nama yang sama dengan DIV yang melingkupinya karena akibatnya cara ini tidak akan bekerja. Biasanya apa yang saya lakukan adalah menambahkan akhiran "Img" kepada nama gambar seperti saya tambahkan akhiran "Div" pada ID suatu lapisan sehingga tidak ada konflik penamaan yang terjadi.

Memuat Gambar di Awal

Sebelum Anda dapat mengubah gambar, Anda harus memuat gambar tersebut sebelumnya ke cache browser Anda. Berikut ini diperlihatkan kode dasar untuk melakukan hal ini:

imagename = new Image();
imagename.src = "imagefilename.gif";

Apa yang dilakukan di sini adalah menciptakan objek gambar (Image). Sebenarnya tidak ada yang istimewa, hanya saja kita sekarang mempunyai objek yang dapat digunakan untuk mengakses gambar ini kapan saja. Kapan pun kita perlu menukar gambar, gambar langsung tersedia — Anda tidak perlu menunggu gambar didownload karena sudah masuk di cache. Karena kita akan membutuhkan baik imageA maupun imageB di cache saya perlu membuat kode untuk memuat keduanya:

imageA = new Image();
imageA.src = "imageA.gif";
imageB = new Image();
imageB.src = "imageB.gif";

Fungsi preload()

Semakin banyak gambar yang akan dimuat di awal, semakin Anda tidak suka menulis kedua baris tadi berulang-ulang. Maka daripada menulis dua baris, marilah kita potong menjadi satu menggunakan fungsi generik preload() berikut:

function preload(imgObj,imgSrc) {
	if (document.images) {
		eval(imgObj+' = new Image()')
		eval(imgObj+'.src = "'+imgSrc+'"')
	}
}

di mana:

Contoh:

preload('imageA','imageA.gif')
preload('imageB','imageB.gif')

Paling baik Anda melakukan pemuatan awal ketika halaman sedang dimuat daripada menunggu setelah seluruh halaman dimuat, maka saya sarankan fungsi preload() selalu dipanggil langsung setelah didefinisikan.

Mengubah Gambar

Setelah gambar-gambar dimuat Anda dapat mengakses dan mengubah gambar apa pun yang ada di halaman. Menugbah gambar yang ada di dalam lapisan bekerja sedikit berbeda antara Netscape dan IE maka pertama-tama akan saya perlihatkan kode eksplisit untuk mengubah pada masing-masing, lalu akan saya tunjukkan fungsi generik yang dapat Anda gunakan dalam keadaan apa pun.

Jika gambar tidak dalam lapisan, cara umum untuk mengubah gambar adalah seperti ini:

document.images["namaGambar"].src = objekGambar.src

Di mana namaGambar adalah nama yang Anda pasang di tag IMG, dan objekGambar adalah nama objek yang dimuat di awal.

Maka dalam kasus saya ini saya gunakan:

document.images["myImg"].src = imageB.src

Tetapi ingat, ini jika gambar tidak berada dalam lapisan. Begitu ada dalam lapisan caranya berubah.

Pada Netscape, Anda harus menyebutkan tag DIV apa yang menjadi tempat gambar tersebut. Dalam kasus saya gambarnya dalam lapisan imgDiv maka Anda harus menambahkan document.imgDiv.document di depan kodenya:

if (ns4) document.imgDiv.document.images["myImg"].src = imageB.src

Tambahan "document" di antara DIV dan gambar diperlukan karena Netscape memperlakukan DIV sebagai dokumen yang benar-benar terpisah.

Tetapi pada Internet Explorer Anda tidak perlu melakukannya. Anda cukup mengaksesnya seperti jika gambarnya tidak berada dalam lapisan sama sekali:

if (ie4) document.images["myImg"].src = imageB.src

Itulah yang Anda butuhkan. Yang perlu Anda lakukan sekarang adalah memasukkan kode tadi ke dalam fungsi terpisah dan memanggil fungsi tersebut ketika Anda ingin mengubahnya:

function changeToA() {
	if (ns4) document.imgDiv.document.images["myImg"].src = imageA.src
	if (ie4) document.images["myImg"].src = imageA.src
}

function changeToB() {
	if (ns4) document.imgDiv.document.images["myImg"].src = imageB.src
	if (ie4) document.images["myImg"].src = imageB.src
}

Lihatlah images1.html untuk contoh singkat penggunaan kedua fungsi ini.

Fungsi changeImage()

Fungsi changeImage() menghapuskan kebutuhan untuk mempunyai fungsi terpisah setiap kali Anda akan mengubah gambar. Anda cukup mengirimkan nama lapisan tempat gambar, nama gambar, dan nama objek gambar — berturut-turut layer, imgName dan imgObj:

function changeImage(layer,imgName,imgObj) {
	if (document.layers && layer!=null) eval('document.'+layer+'.document.images["'+imgName+'"].src = '+imgObj+'.src');
	else document.images[imgName].src = eval(imgObj+".src");
}

Pada situasi saya, dapat saya gantikan fungsi changeToA() hanya dengan:

changeImage('imgDiv','myImg','imageA')

Demikian pula dengan imageB:

changeImage('imgDiv','myImg','imageB')

Lihatlah images2.html untuk contoh pemakaian fungsi changeImage().

Catatan:

Fungsi changeImage() dapat pula digunakan pada lapisan bersarang. Untuk argumen layer dapat Anda masukkan lapisanInduk.document.lapisanAnak atau sejenisnya sebagaimana objek Dynamic Layer menangani lapisan terpisah.

Anda dapat menggunakan fungsi ini untuk gambar-gambar yang bahkan tidak berada dalam lapisan. Cukup lewatkan null untuk argumen layer:

changeImage(null,'myImg','imageB')

Juga, fungsi changeImage() kompatibel mundur. Jika Anda mempunyai halaman dengan lapisan dan melihatnya dengan Netscape 3, fungsi ini masih akan bekerja sebagaimana mestinya. Anda dapat mencobanya dengan melihat contoh-contoh ini dengan browser tersebut. Tidak ada browser lainnya yang mampu mengubah gambar, maka jika Anda ingin membuat pemeriksaan kesalahan untuk kemampuan pengubahan gambar Anda dapat menggunakan modifikasi fungsi changeImage() ini:

function changeImage(layer,imgName,imgObj) {
	if (document.images) {
		if (document.layers && layer!=null) eval('document.'+layer+'.document.images["'+imgName+'"].src = '+imgObj+'.src')
		else document.images[imgName].src = eval(imgObj+".src")
	}
}

Baik fungsi changeImage() dan preload() merupakan bagian dari DynAPI dan ada dalam file images.js:

Kode Sumber

Download: images.js
Baca Kode Sumber: images.js

Mouse Lewat di Atas Sesuatu

Saya pikir topik mouse lewat (rollover) sudah seperti dipukul mati sehingga saya tidak membahasnya sebelumnya. Tetapi setelah banyak orang yang menanyakannya kepada saya dengan cepat akan saya perlihatkan bagaimana untuk melakukannya dengan fungsi changeImage() saya.

Ide di belakang mouse lewat sungguh sederhana. Ketika Anda menempatkan mouse di atas suatu gambar, gambar tersebut akan berubah menjadi gambar lain, dan ketika Anda memindahkan mouse keluar dari gambar tersebut, gambar yang lama akan kembali. Untuk mencapai hal ini Anda perlu mengapit tag IMG dengan sebuah anchor atau hyperlink dan memanggil fungsi changeImage() menggunakan event onMouseOver dan onMouseOut. Event-event ini harus dipanggil dari hyperlink karena pada Netscape tag IMG tidak mempunyai event-event tersebut secara bawaan.

Meskipun demikian ingatlah, Anda perlu mengarahkan anchor ke sesuatu sebelum dapat menggunakannya. Paling sering mouse lewat digunakan di toolbar sehingga tinggal Anda tempelkan alamat halaman yang Anda inginkan dituju. Tetapi pada keadaan di mana Anda menginginkan hyperlink yang tidak menuju ke mana-mana, tinggal Anda pasang javascript:void(null) pada HREF. Ini merupakan perintah yang sama sekali tidak melakukan apa pun. Hyperlink tersebut masih ada — hanya saja melakukan perintah JavaScript yang tidak melakukan apa-apa.

<DIV ID="imgDiv">
<A HREF="javascript:void(null)"
onMouseOver="changeImage('imgDiv','myImg','imageB')"
onMouseOut="changeImage('imgDiv','myImg','imageA')">
<IMG NAME="myImg" SRC="imageA.gif" WIDTH=75 HEIGHT=75 BORDER=0></A>
</DIV>

Lihatlah images3.html untuk efek mouse lewat.

Halaman Muka Pelajaran Berikutnya: Memotong Lapisan
hak cipta 1998 Dan Steinman
Diterjemahkan oleh Mark P. Eliasaputra