Pada artikel kali ini, saya akan mencoba menjelaskan bagaimana teknik
membuat script mengubah ukuran image dengan DOM di Javascript. Hal ini
pernah saya jadikan tugas bagi mahasiswa saya yang mengambil matakuliah
pemrograman web. Tapi sudah lama kok 
OK… Karena menggunakan Javascript, sehingga dalam hal ini prosesnya
tidak perlu melalui request ke server namun hanya terjadi dalam client
saja. Oleh karena itu proses resizing image ini dapat dilakukan dengan
cepat.
Hmm… adapun skenario mengubah ukuran imagenya sebagai berikut. Dalam
halaman web muncul sebuah image, kemudian terdapat 3 buah tombol atau
button. Tombol pertama (+) digunakan untuk memperbesar ukuran image
menjadi 2 kali sebelumnya. Tombol kedua (-) untuk memperkecil ukuran
image 1/2 kali sebelumnya, dan tombol ketiga (=) untuk mereset ukuran
image menjadi ukuran aslinya.
Berikut ini screen shot tampilan halaman web nya:
Tampilan di atas adalah tampilan image mula-mula (ukuran asli).
Selanjutnya apabila tombol (+) diklik maka akan muncul image dengan
besar 2 kali sebelumnya (lihat gambar di bawah).
Sedangkan apabila tombol (-) diklik maka image akan berukuran 1/2 kali sebelumnya.
Perlu diketahui bahwa, image yang yang tampil tersebut berasal dari
sebuah file image yang sama. Perubahannya hanya pada size nya saja.
OK.. bagaimana teknik pembuatannya?
Pertama kita siapkan halaman webnya yang di dalamnya terdapat image dan 3 buah buttonnya.
01.<html>02.<head>03.<title>Ubah Size Imagetitle>04.head>05.<body>06.<div align="center">07.<h1>Sampel Script Mengubah Size Gambarh1>08.<h2>Logo UNSh2>09.<input type="button" value="-" />10.<input type="button" value="=" />11.<input type="button" value="+" /><br /><br />12.<img id="gambar" src="uns.gif" />13.div>14.body>15.html>
Selanjutnya, untuk proses pengubahan atau perhitungan ukuran image
kita harus mendapatkan ukuran asli (width dan height) dari image
terlebih dahulu. Untuk mendapatkan ukuran panjang (width) image, kita
gunakan perintah DOM di Javascript
1.document.getElementByID("gambar").width;
dan lebar atau tinggi imagenya kita gunakan perintah
1.document.getElementByID("gambar").height;
Kedua perintah tersebut kita jalankan begitu halaman web diload oleh browser (diberikan pada event onload)
01.<html>
02.<head>
03.<title>Ubah Size Imagetitle>
04. 05.<script type="text/javascript">06. 07.var panjang;08.var lebar;09. 10.function bacaUkuran()11.{12.panjang = document.getElementById("gambar").width;13.lebar = document.getElementById("gambar").height;14.}15. 16.script>17.head>18.<body onload="bacaUkuran()">19.<div align="center">20.<h1>Sampel Script Mengubah Size Gambarh1>21.<h2>Logo UNSh2>22.<input type="button" value="-" />23.<input type="button" value="=" />24.<input type="button" value="+" /><br /><br />25.<img id="gambar" src="uns.gif" />26.div>27.body>28.html>
Perhatikan Javascript di atas, bahwa variabel panjang dan lebar
sengaja dibuat sebagai variabel global karena nantinya akan digunakan
dalam proses perhitungan untuk setiap proses (perbesar ukuran dan
perkecil ukuran). Apabila kedua variabel tersebut dibuat lokal dalam
function bacaUkuran() maka nilai-nilainya hanya bisa dikenal dalam function tersebut saja. Sehingga deklarasi variabel panjang dan lebar tidak seperti berikut ini :
1.function bacaUkuran()
2.{
3.var panjang;
4.var lebar;
5.panjang = document.getElementById("gambar").width;
6.lebar = document.getElementById("gambar").height;
7.}
Selanjutnya kita akan membuat script untuk memperbesar ukuran
terlebih dahulu. Bagaimana idenya? Misalkan mula-mula panjang imagenya
adalah x. Setelah diperbesar 2 kali maka panjang imagenya adalah 2x.
Bila diperbesar lagi maka panjang imagenya menjadi 4x, dst. Secara umum
panjang image setelah diperbesar n kali adalah 2nx. Bila n =
0, maka akan diperoleh panjang image mula-mula. Hal yang sama juga
berlaku untuk lebar imagenya. Nah… ide ini bisa kita terapkan dalam
bentuk script.
01.<html>
02.<head>
03.<title>Ubah Size Imagetitle>
04. 05.<script type="text/javascript">06. 07.var panjang;08.var lebar;09.var n = 0;10. 11.function bacaUkuran()12.{13.panjang = document.getElementById("gambar").width;14.lebar = document.getElementById("gambar").height;15.}16. 17.function tambahSize()18.{19.n++;20.document.getElementById("gambar").width = Math.pow(2, n) * panjang;21.document.getElementById("gambar").height = Math.pow(2, n) * lebar;22.}23. 24.script>25.head>26.<body onload="bacaUkuran()">27.<div align="center">28.<h1>Sampel Script Mengubah Size Gambarh1>29.<h2>Logo UNSh2>30.<input type="button" value="-" />31.<input type="button" value="=" />32.<input type="button" value="+" onclick="tambahSize()" /><br /><br />33.<img id="gambar" src="uns.gif" />34.div>35.body>36.html>
Keterangan:
Perintah Math.pow(2, n) digunakan untuk menghitung 2n pada Javascript.
Perintah document.getElementById("gambar").width = Math.pow(2, n) * panjang; digunakan untuk mengubah panjang image yang tampil dalam browser menjadi 2n * panjang aslinya.
Sedangkan untuk memperkecil ukuran image, kita cukup melakukan decrement pada variabel n nya saja (n--). Misal mula-mula panjang image adalah x (20x) pixel, lalu diperbesar menjadi 2x (20+1x = 21x), lalu diperbesar lagi menjadi 4x (21+1x = 22x). Selanjutnya diperkecil, maka panjangnya menjadi kembali ke 2x (22-1x = 21x). Bila diperkecil lagi menjadi x (21-1x = 20x), dan bila diperkecil lagi menjadi 1/2 x (20 – 1x = 2-1x) dst.
Dengan ide di atas maka Javascript untuk memperkecil ukuran adalah:
01.<html>
02.<head>
03.<title>Ubah Size Imagetitle>
04. 05.<script type="text/javascript">06. 07.var panjang;08.var lebar;09.var n = 0;10. 11.function bacaUkuran()12.{13.panjang = document.getElementById("gambar").width;14.lebar = document.getElementById("gambar").height;15.}16. 17.function tambahSize()18.{19.n++;20.document.getElementById("gambar").width = Math.pow(2, n) * panjang;21.document.getElementById("gambar").height = Math.pow(2, n) * lebar;22.}23. 24.function kurangiSize()25.{26.n--;27.document.getElementById("gambar").width = Math.pow(2, n) * panjang;28.document.getElementById("gambar").height = Math.pow(2, n) * lebar;29.}30. 31.script>32.head>33.<body onload="bacaUkuran()">34.<div align="center">35.<h1>Sampel Script Mengubah Size Gambarh1>36.<h2>Logo UNSh2>37.<input type="button" value="-" onclick="kurangiSize()" />38.<input type="button" value="=" />39.<input type="button" value="+" onclick="tambahSize()" /><br /><br />40.<img id="gambar" src="uns.gif" />41.div>42.body>43.html>
Yang terakhir, untuk tombol ketiga (=) dimana bila tombol ini ukuran
image akan direset menjadi ukuran aslinya. Idenya adalah dengan memberi
nilai n = 0, untuk mendapatkan panjang dan lebar image aslinya. Bila
nilai n = 0, dan panjang image aslinya x, maka 20x = x (sama seperti ukuran aslinya). Demikian pula untuk lebarnya.
01.<html>
02.<head>
03.<title>Ubah Size Imagetitle>
04. 05.<script type="text/javascript">06. 07.var panjang;08.var lebar;09.var n = 0;10. 11.function bacaUkuran()12.{13.panjang = document.getElementById("gambar").width;14.lebar = document.getElementById("gambar").height;15.}16. 17.function tambahSize()18.{19.n++;20.document.getElementById("gambar").width = Math.pow(2, n) * panjang;21.document.getElementById("gambar").height = Math.pow(2, n) * lebar;22.}23. 24.function kurangiSize()25.{26.n--;27.document.getElementById("gambar").width = Math.pow(2, n) * panjang;28.document.getElementById("gambar").height = Math.pow(2, n) * lebar;29.}30. 31.function resetSize()32.{33.n = 0;34.document.getElementById("gambar").width = Math.pow(2, n) * panjang;35.document.getElementById("gambar").height = Math.pow(2, n) * lebar;36.}37. 38.script>39.head>40.<body onload="bacaUkuran()">41.<div align="center">42.<h1>Sampel Script Mengubah Size Gambarh1>43.<h2>Logo UNSh2>44.<input type="button" value="-" onclick="kurangiSize()" />45.<input type="button" value="=" onclick="resetSize()" />46.<input type="button" value="+" onclick="tambahSize()" /><br /><br />47.<img id="gambar" src="uns.gif" />48.div>49.body>50.html>
Asyik dan mudah bukan membuatnya? Nah… silakan Anda berkreasi sendiri
menggunakan image yang lain. Atau mungkin… Anda kembangkan ke font
size. Bagaimana bila font nya yang diubah-ubah ukurannya seperti halnya
image di atas.
EmoticonEmoticon