Baik pertama tama yang kita lakukan adalah mengiapkan photonya dulu, kalo saya ambil dari url saja biar cepet . Baik jika sudah kita buat dulu htmlnya .

<div class=”pembungkus”>
<img src=”https://3.bp.blogspot.com/-H33vnmkZ4N4/WIdD-Cb_F8I/AAAAAAAAAUs/yRAVl5mO95sWy4GviNfZ4NTMgnPWTYSBwCPcB/s1600/js1_0.png”
id=”gambar” />
<div class=”posisi pembungkus2″>
<p onclick=”perbesar();”>+</p>
<p onclick=”perkecil();”>-</p>
<p onclick=”awal();”>awal</p>
</div>
<div class=”posisi pembungkus3″>
<p>Logo Javascript</p>
</div>
</div>

Baik tampilan awalnya sangat sederhana sekalikan, agar lebih menarik kita tambah saja css .

<style>
.pembungkus{
position: relative;
width: 200px;
height: 200px;
}
.pembungkus img{
width: 100%;
height: 100%;
transition: width 1s,height 1s;
}
.posisi{
position: absolute;
color: #000;
font-size: 20px;
background-color: rgba(232, 178, 32, 0.5);
display: none;
}
.pembungkus2{
top: 0;
width: 50px;
height: 150px;
text-align: center;
}

.pembungkus3{
position: absolute;
top: 100%;
left: 0;
width: 204px;
height: 50px;

      text-align: center;
}
.pembungkus:hover .posisi{
display: block;
cursor: pointer;
}
</style>

Stylenya hanya mengatur posisi saja dan menambahkan background. Saya tidak akan membahas tentang css kali ini karena css udah di bahas oleh saya di artikel kategori css .Sekarang kita membuat javascriptnya

<script language=”javascript”>
<!–
var ukuran = 100;
function ukuranGambar(ukuran){
var gammbar = document.getElementById(‘gambar’);
gammbar.style.width = ukuran+”%”;
gammbar.style.height = ukuran+”%”;
}
function perbesar(){
ukuran = ukuran + 20;
if(ukuran>=200){
ukuran=200;
}
ukuranGambar(ukuran);
}
function perkecil() {
ukuran = ukuran – 20;
if(ukuran<=100){
ukuran=100;
}
ukuranGambar(ukuran);
}
function awal() {
ukuranGambar(100);
}
//>
</script>

Baca juga fungsi pada javascript

Dan membuat memanipulasi gambarpun selesai . Baik saya akan jelaskan algoritmanya . Misal user mengklik +, maka akan melakukan fungsi perbesar yang melalukan penjumlahan ukuran

ukuran = ukuran + 20;

if(ukuran<=100){
ukuran=100;
}

Setelah itu akan melakukan fungsi ukurangGambar dan mengoper varible ukuranya  ukuranGambar(ukuran); . Setelah itu kita simpan id gambar kedalam variable .

var gammbar = document.getElementById(‘gambar’);

Jadi untuk mendapatkan id kita metulis document.getElementById(‘NamaIdNya’) . Setelah itu maka akan ada perubahan ukuran gambar di sesuaikan dengan variable ukurannya

gammbar.style.width = ukuran+”%”;
gammbar.style.height = ukuran+”%”;

Jadi untuk mengset ukuran, kita dengan gammbar.style.width . Bisa juga gammbar.style.color=red atau apalah yang ada di css .
Itu di cara memanipulasi gambar dengan javascript, semoga bermanfaat dan sampai jumpa

---

Untuk mempercepat pemahaman ini, daftar segera kursus komputer di Edusoft Center. Ada puluhan paket kursus dengan trainer yg handal dan berpengalaman.

Info selengkapnya bisa hubungi

Office : 0271 745 2187
No Simpati : 082 22922 2121 (WA )

atau

Bisa Langsung Registrasi Online lewat Formulir Online:
www.edusoftcenter.com

---