Mengubah Ukuran Gambar

Membuat website semakin dengan fitur yang menarik adalah idaman dari sebuah pemilik website tersebut. Kemudahan dalam dunia programming terutama JavaScript sungguh sangat menakjubkan untuk menambah fitur-fitur yang kita inginkan. Kali ini akan dibahas bagaimana java script bisa mengubah ukuran gambar sesuai yang ingin dilihat.

<script type="text/javascript">

var panjang;
var lebar;
var n = 0;

function ukuranGambar()
{
    panjang = document.getElementById("gambar").width;
    lebar = document.getElementById("gambar").height;
}

function tambahUkuran()
{
    n++;
    document.getElementById("gambar").width = Math.pow(2, n) * panjang;
    document.getElementById("gambar").height = Math.pow(2, n) * lebar;
}

function kurangUkuran()
{
    n--;
    document.getElementById("gambar").width = Math.pow(2, n) * panjang;
    document.getElementById("gambar").height = Math.pow(2, n) * lebar;
}

function asliUkuran()
{
    n = 0;
    document.getElementById("gambar").width = Math.pow(2, n) * panjang;
    document.getElementById("gambar").height = Math.pow(2, n) * lebar;
}

</script>

Script diatas adalah bagaimana pemanggilan variabel yang ditangkap oleh JavaScript. Letakkan script diatas sebelum </head>.
Untuk memanggilnya cukup dengan :

<body onload="ukuranGambar()">
<div align="center">
    <h2>Proweb Indonesia</h2>
    <input type="button" value="-" onclick="kurangUkuran()" />
    <input type="button" value="=" onclick="asliUkuran()" />
    <input type="button" value="+" onclick="tambahUkuran()" /><br /><br />
    <img id="gambar" src="/Logo-Proweb.jpg" />
</div>
</body>

Contoh bisa lihat di : Mengubah Ukuran Gambar

Kunjungi www.prowebpro.com untuk menambah wawasan anda.