Pada kesempatan kali ini saya akan membahas tutorial tentang cara membuat swap image dengan Javascript. Dalam pembahasan artikel ini saya akan membuat swap atau menukar posisi image yang disediakan hanya beberapa gambar dulu yaaa, Nanti dimana ketika klik tombol maka posisi gambar bertukar posisinya, baiklah supaya tidak penasaran lagi ikuti langkah-langkah berikut ini :
Langkah pertama siapkan struktur HTML-nya dahulu berisi gambar serta tombol yang akan dipakai :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Swap Image dengan Javascript</title> </head> <body> <div class="box"> <img src="pict1.jpg" id="pict1"> <img src="pict2.jpg" id="pict2"> <form action="" method=""> <input type="button" value="Tukar Posisi" onclick="swap();"> </form> </div> </body> </html> |
Langkah selanjutnya siapkan file CSS-nya seperti dibawah ini :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<style> .box{ width: 800px; margin: auto; text-align: center; } input[type=button] { width: 76%; padding:10px; font-size: 15px; font-weight: 800; color: #fff; background: tomato; border: 0; text-transform: uppercase; } </style> |
Langkah selanjutnya ketikan script untuk Javascript berikutnya:
|
1 2 3 4 5 6 7 8 9 10 11 |
<script> function swap(){ var pict1ID = document.getElementById('pict1'); pict2ID = document.getElementById('pict2'); pict1SRC = pict1ID.src; pict2SRC = pict2ID.src; pict1ID.src = pict2SRC; pict2ID.src = pict1SRC; } </script> |
untuk javascript diatas saya membuat beberapa variable untuk dipakai berhubungan dengan ID serta SRC digunakan.
Tampilan gambar Sebelum Tombol di klik
Tampilan gambar Sesudah Tombol di klik
Baiklah saya cukupkan pembahasan artikel ini tentang cara membuat swap image dengan javascript. semoga bermanfaat dan selamat mencoba.