Menggunakan javascript gambar onclick wajah

1 years ago

Komentar: 0

Dibaca: 96

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

<. DOCTYPE html>

<html lang = "en">

<kepala>

<meta set karakter = "UTF-8">

<judul>Tukar Image dengan Javascript</title>

< / kepala>

<tubuh>

<div kelas = "box">

<img src = "pict1.jpg" id = "pict1">

<img src = "pict2.jpg" id = "pict2">

<bentuk tindakan = "" metode = "">

<masukkan ketik = "button" nilai = "Tukar Posisi" onclick = "tukar();">

< / bentuk>

< / div>

< / tubuh>

< / html>

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

kode javascript