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 gambar posisi yang disediakan hanya beberapa gambar dulu yaaa, Nanti dimana ketika klik tombol maka posisi gambar menukar posisinya, baiklah supaya tidak penasaran lagi ikuti langkah-langkah berikut ini
Langkah pertama siapkan struktur HTML-nya terlebih dahulu berisi gambar serta tombol yang akan dipakai
1
2
3
4
5
6
7
8
9
10
sebelas
12
13
14
limabelas
16
17
18
19
Tukar Image dengan Javascript
Langkah selanjutnya siapkan file CSS-nya seperti dibawah ini
1
2
3
4
5
6
7
8
9
10
sebelas
12
13
14
limabelas
16
17
18
. kotak{
lebar. 800px;
margin. otomatis;
perataan teks. pusat;
}
masukan[type=button]
{
lebar. 76%;
padding. 10 piksel;
ukuran font. 15 piksel;
font-weight. 800;
warna. #fff;
latar belakang. tomat;
perbatasan. 0;
transformasi teks. huruf besar;
}
Langkah selanjutnya ketikan script untuk Javascript berikutnya
1
2
3
4
5
6
7
8
9
10
sebelas
fungsi tukar(){
var pict1ID = dokumen.getElementById('pict1');
pict2ID = dokumen. getElementById('pict2');
pict1SRC = pict1ID. src;
pict2SRC = pict2ID. src;
pict1ID. src = pict2SRC;
pict2ID. src = pict1SRC;
}
untuk javascript diatas saya membuat beberapa variable untuk dipakai berhubungan dengan ID serta SRC digunakan
Tampilan udang 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