Scriptnya seperti ni:
<html>
<head>
<title>mengubah ukuran gambar menggunakan javascript</title>
<script type="text/javascript">
var panjang;
var lebar;
var x = 0;
function bacaUkuran()
{
panjang = document.getElementById("gambar").width;
lebar = document.getElementById("gambar").height;
}
function tambahSize()
{
x++;
document.getElementById("gambar").width = Math.pow(2, x) * panjang;
document.getElementById("gambar").height = Math.pow(2, x) * lebar;
}
function kurangiSize()
{
x--;
document.getElementById("gambar").width = Math.pow(2, x) * panjang;
document.getElementById("gambar").height = Math.pow(2, x) * lebar;
}
function resetSize()
{
x = 0;
document.getElementById("gambar").width = Math.pow(2, x) * panjang;
document.getElementById("gambar").height = Math.pow(2, x) * lebar;
}
</script>
</head>
<body onload="bacaUkuran()">
<div align="center">
<h1>contoh mengubah ukuran gambar dengan javascript</h1>
<input type="button" value="perkecil" onclick="kurangiSize()" />
<input type="button" value="ukuran semula" onclick="resetSize()" />
<input type="button" value="perbesar" onclick="tambahSize()" />
<br/><br/>
<img id="gambar" src="Sunset.jpg"/>
</div>
</body>
</html>
Keterangan dari javascript di atas adalah :
var panjang;
var lebar;
var x = 0;
function bacaUkuran()
{
panjang = document.getElementById("gambar").width;
lebar = document.getElementById("gambar").height;
}
Buat 3 button/tombol, yang masing-masing namanya perbesar, perkecil dan ukuran semula. Tombol “perbesar” di gunakan untuk memperbesar ukuran gambar 2 kali dari ukuran gambar seblumnya. Tombol “perkecil” di gunakan untuk untuk memperkecil ½ kali dari ukuran gambar sebelumnya. Dan tombol “ ukuran semulah digunakan untuk mengubah gambar ke ukuran aslinya.
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.
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.
Perintah Math.pow(2, x) digunakan untuk menghitung 2x pada Javascript.
Perintah document.getElementById("gambar").width = Math.pow(2, x) * panjang; digunakan untuk mengubah panjang image yang tampil dalam browser menjadi 2x * panjang aslinya.
Sedangkan untuk memperkecil ukuran image, kita cukup melakukan decrement pada variabel x nya saja (x--). 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.
Yang terakhir, untuk tombol ketiga (=) dimana bila tombol ini ukuran image akan direset menjadi ukuran aslinya. Idenya adalah dengan memberi nilai x = 0, untuk mendapatkan panjang dan lebar image aslinya. Bila nilai x = 0, dan panjang image aslinya x, maka 20x = x (sama seperti ukuran aslinya), demikian pula untuk lebarnya
[download script]
