Memotong artinya menentukan bagian mana dari lapisan yang akan tampak. Anda perlu memahami perbedaan antara nilai potong, dan lebar dan tinggi yang tidak sama. Lebar dan tinggi sebenarnya hanya memberi tahu browser bagaimana membungkus elemen-elemen HTML di dalamnya. Sementara pemotongan membuat suatu jendela yang melaluinya lapisan dapat dilihat tak berpengaruh pada properti lainnya dari lapisan lokasi kiri (left) atau atas (top), lebar (width), tinggi (height), ketampakan (visibility), dsb.
Daerah pemotongan didefinisikan sebagai suatu persegipanjang dengan menentukan nilai potong bagi keempat sisi (atas, kanan, bawah, kiri). Bagi tiap-tiap sisi dapat Anda potong sebagian dari ruang pandang, atau dapat Anda tambahkan ruang pandang ekstra. Semua nilai potong relatif pada lapisan yang bersangkutan nilai-nilainya diambil dari lokasi atas-kiri dari lapisan.
Sintaksis CSS untuk pemotongan adalah:
clip:rect(atas,kanan,bawah,kiri)
Di mana nilai atas, kanan, bawah. dan kiri dalam satuan piksel. Dan jangan lupakan urutan penulisannya akan sangat membingungkan jika Anda memasangnya terbalik-balik.
Berikut ini sebuah tag DIV menggunakan pemotongan untuk menentukan bidang tampak:
<DIV ID="blockDiv" STYLE="position:absolute; left:50; top:80; width:100; height:50; clip:rect(-10,110,60,-10); background-color:#FF0000; layer-background-color:#FF0000;"> </DIV>
Pada kasus ini dibuatlah tambahan bingkai 10 piksel di sekeliling tepi lapisan karena nilai potong atas -10 dan kiri -10. Nilai potong kanan 110 yang berarti 10 piksel lebih besar daripada lebar, dan bawah 60 yang juga 10 piksel lebih besar daripada tinggi.
Saya tambahkan beberapa properti CSS di sana juga. Properti background-color (untuk ie4) dan layer-background-color (untuk Netscape) digunakan untuk hanya mewarnai seluruh lapisan dengan warna apa yang Anda inginkan. Ini memungkinkan kita melihat lapisan kita sebagai suatu bujursangkar dan membantu memvisualisasikan apa yang terjadi ketika kita potong. Biasanya Anda tidak perlu menentukan tinggi lapisan, tetapi jika Anda melakukan pemotongan Anda harus memasangnya karena jika tidak IE tidak akan mewarnai ruang tambahan di bawah elemen terakhir dari layar.
Anda dapat pula memberikan gambar latar belakang bagi lapisan Anda. CSS untuk IE adalah background-image:URL(namafile.gif) dan untuk Netscape layer-background-image:URL(namafile.gif). Tetapi agar Netscape dapat menampilkannya dengan semestinya Anda harus menambahkan satu properti CSS lagi yaitu repeat:no. Inilah CSS penuh bagi lapisan dengan gambar latar belakang:
<DIV ID="blockDiv" STYLE="position:absolute; left:50; top:80; width:100; height:50; clip:rect(-10,110,60,-10); background-image:URL(namafile.gif); layer-background-image:URL(namafile.gif); repeat:no;}
Setelah Anda memotong lapisan Anda dapat mendapatkan atau mengubah nilai-nilai potongnya menggunakan JavaScript seperti juga lokasinya.
Pemotongan pada Netscape:
Pada Netscape, Anda dapat memperoleh atau mengubah nilai-nilai potong satu per satu:
document.divName.clip.top document.divName.clip.right document.divName.clip.bottom document.divName.clip.left
Untuk menampilkan window pop-up berisi nilai potong atas dapat Anda tuliskan:
alert(document.divName.clip.top)
Lalu untuk mengubah nilai potong atas menjadi 50 piksel dapat Anda tuliskan:
document.divName.clip.top = 50
Pemotongan pada Internet Explorer:
Pada IE Anda harus mengambil semua nilai potong bersamaan. Contohnya untuk menampilkan nilai-nilai potong:
alert(divName.style.clip)
Hasilnya adalah sebuah string yang mewakili nilai-nilai potong seperti yang didefinisikan. Inilah contoh yang akan ditampilkan:
"rect(0px 50px 100px 0px)"
Ketika Anda ingin mengubah nilai potong Anda tidak dapat hanya memotong salah satu sisi seperti yang Anda lakukan pada Netscape Anda harus mengatur semua nilai potong pada saat yang sama:
divName.style.clip = "rect(0px 100px 50px 0px)"
Ini mengakibatkan pemotongan di IE4 sedikit janggal. Saya telah membuat suatu fungsi generik yang dapat Anda gunakan untuk memeriksa nilai potong bagi kedua browser:
Fungsi clipValues() dapat digunakan untuk memperoleh nilai potong bagi setiap sisi lapisan.
function clipValues(obj,which) { if (ns4) { if (which=="t") return obj.clip.top if (which=="r") return obj.clip.right if (which=="b") return obj.clip.bottom if (which=="l") return obj.clip.left } else if (ie4) { var clipv = obj.clip.split("rect(")[1].split(")")[0].split("px") if (which=="t") return Number(clipv[0]) if (which=="r") return Number(clipv[1]) if (which=="b") return Number(clipv[2]) if (which=="l") return Number(clipv[3]) } }
Yang Anda lakukan adalah memberi tahu fungsi tersebut lapisan apa (yang didefinisikan sebagai variabel penunjuk) dan sisi mana yang Ingin Anda ketahui nilai potongnya. Contohnya, setelah kita mendefinisikan variabel lapisan "blockDiv", kita tampilkan nilai potong atas dengan menuliskan:
alert(clipValues(block,"t"))
Sisi yang ingin Anda periksa hanya perlu berupa huruf-huruf berikut dalam tanda petik "t" untuk atas, "r" untuk kanan, "b" untuk bawah, "l" untuk kiri.
Klik di sini untuk melihat contohnya.
Untuk mengubah nilai-nilai potong telah saya tulis dua fungsi generik yang dapat digunakan dengan sangat mudah.
Fungsi clipTo():
clipTo() memungkinkan Anda memotong ulang lapisan dengan nilai-nilai tertentu.
function clipTo(obj,t,r,b,l) { if (ns4) { obj.clip.top = t obj.clip.right = r obj.clip.bottom = b obj.clip.left = l } else if (ie4) obj.clip = "rect("+t+"px "+r+"px "+b+"px "+l+"px)" }
Untuk menggunakannya Anda harus memberi tahu fungsi tersebut lapisan/objek apa yang digunakan, dan nilai potong untuk tiap-tiap sisi berturut-turut atas, kanan, bawah, dan kiri.
clipTo(block,0,100,100,0)
Fungsi clipBy():
clipBy() memungkinkan Anda menggeser nilai potong dengan jumlah piksel yang diberikan fungsi ini akan menambahkan atau mengurangi nilai potong sesaat untuk masing-masing sisi:
function clipBy(obj,t,r,b,l) { if (ns4) { obj.clip.top = clipValues(obj,'t') + t obj.clip.right = clipValues(obj,'r') + r obj.clip.bottom = clipValues(obj,'b') + b obj.clip.left = clipValues(obj,'l') + l } else if (ie4) obj.clip = "rect("+(this.clipValues(obj,'t')+t)+"px "+(this.clipValues(obj,'r')+r)+"px "+Number(this.clipValues(obj,'b')+b)+"px "+Number(this.clipValues(obj,'l')+l)+"px)" }
Seperti halnya fungsi clipTo() Anda cukup menentukan berapa banyak pemotongan sisi yang Anda inginkan:
clipBy(block,0,10,5,0)
Ini akan menambah 10 piksel ke kanan dan 5 piksel ke bawah.
Klik di sini untuk melihat contoh penggunaan clipTo() dan clipBy()
Netscape mungkin lebih baik untuk melihat contoh tadi karena cara penanganan warna latar belakangnya warna lapisannya akan ditampilkan tak peduli di mana telah dipotong. Tetapi pada IE ketika Anda memotong di luar batas lapisan (menambah bingkai tambahan) Anda tidak dapat melihat tepi lapisan.
Dengan memasang perintah clipBy() dalam fungsi perulangan dapat Anda buat semua efek penyapuan yang saya yakin pernah Anda lihat. Saya akan memberi tahu Anda sekarang bahwa mungkin termudah jika Anda membuat fungsi wipe() Anda sendiri. Mungkin saja kita buat fungsi generik tetapi saya masukkan ke objek Dynamic Layer sebagai metode tambah-pasang (baca pelajaran Metode Wipe untuk informasi lebih lanjut). Tetapi kenyataannya mungkin lebih mudah dan lebih sedikit kode jika Anda membuat fungsi singkat Anda sendiri. Anda melakukannya dengan cara yang sama dengan membuat peluncuran. Buatlah fungsi perulangan yang memotong ulang lapisan:
function wipe1() { clipBy(block,0,5,0,0) setTimeout("wipe1()",30) }
Tetapi kita perlu mempunyai cara untuk menghentikan penyapuan sehingga cukup kita periksa apakah sisi telah mencapai nilai yang diinginkan:
function wipe1() { if (clipValues(block,'r')<200) { clipBy(block,0,5,0,0) setTimeout("wipe1()",30) } }
Klik di sini untuk melihat contoh penyapuan.
Halaman Muka | Pelajaran Berikutnya: Lapisan Bersarang |