Javascript untuk Memperbesar dan Memperkecil Gambar

Ini adalah tugas kuliah “Web Programming” saya dulu, dan baru saya share setelah lulus kuliah. Hahaha gapapa deh, dulu gak ada koneksi internet sih, awkawk…

Tugas : Membuat program web sederhana sekali yang dapat Zoom In dan Zoom Out Gambar.

Screenshotnya seperti ini,

Perbesar dan Perkecil Gambar

Perbesar dan Perkecil Gambar

Sourcecodenya ini nih,

<html>
<head>
<title>Change Size</title>
</head>

<body bgcolor="white">
<script language="JavaScript" type="text/javascript">
document.bgColor = "FFFFEE";
function changeSizeBig()
{
document.getElementById("aneh").height+=20;
document.getElementById("aneh").width+=20;
}
function changeSizeSmall()
{
document.getElementById("aneh").height-=20;
document.getElementById("aneh").width-=20;
}
function changeSizeNormal()
{
document.getElementById("aneh").height="180";
document.getElementById("aneh").width="200";
}
</script>

<h1>Mengubah Ukuran Gambar</h1>
<p>Ini adalah script untuk mengubah ukuran gambar.</p>
Pilihan :
<ul>
<li> Zoom In untuk memperkecil gambar </li>
<li> Zoom Out untuk memperbesar gambar </li>
<li> Normal Size untuk mengembalikan ukuran gambar semula </li>
</ul>
<img id="aneh" src="Serem.jpg" width="200" height="180" />
<br/><br/>
<input type="button" onclick="changeSizeSmall()" value="Zoom In">
<input type="button" onclick="changeSizeNormal()" value="Normal Size">
<input type="button" onclick="changeSizeBig()" value="Zoom Out">
</body>

</html>

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: