Javascript dapatkan img src saat diklik

Question

Kami menampilkan metode terbaik untuk JavaScript mengubah acara onclick gambar dengan contoh. Selain itu, diberikan cara lain untuk mengimplementasikan 'ubah gambar pada klik tombol javascript'

Table of Contents Show

JavaScript Ubah Gambar pada Acara klik
Ganti Gambar pada Tombol Klik JavaScript
Cara Mengubah Gambar pada Klik Mouse di JavaScript
JavaScript Ubah Banyak Gambar saat diklik
Bagaimana cara menampilkan gambar dalam JavaScript onclick?
Bagaimana cara mendapatkan gambar src di JavaScript?
Bisakah tag IMG memiliki onclick?
Bagaimana cara mengubah src gambar di klik menggunakan JavaScript?

Juga, Kita dapat melakukan perubahan gambar pada acara mouse hover dan klik mouse di bagian bawah. Setelah itu, tampilkan contoh change multiple image onclick

Daftar isi

JavaScript Ubah Gambar pada Acara klik

<!DOCTYPE html>
<html>
<head>
	<title>javascript change image onclick event
</title>
<style type="text/css">
	h2 {
    text-align: center;
    font-size: 30px;
	}
	img#getImage {
    width: 300px;
    height: auto;  
    border: 4px solid #a1a1a1;  
	}
	div {
    text-align: center;
	}
</style>
</head>
<body>
	<div>
		<h2>Change image onClick event here...</h2>
		<img src="imageName1.jpg" id="getImage">
    	
    </div>
    <div>
    	<input type="button" onclick="imagefun()" value="Change Image">
    </div>
    <script>
        function imagefun() {
            var Image_Id = document.getElementById('getImage');
            if (Image_Id.src.match("imageName1.jpg")) {
                Image_Id.src = "imageName2.jpg";
            }
            else {
                Image_Id.src = "imageName1.jpg";
            }
        }        
    </script>

</body>
</html>

Di sini, seluruh kode ubah gambar dengan acara onclick. Jadi, saya memberi tahu Anda tentang kode ini

Pertama, kami membuat struktur kode Html dan juga, membuat tag gambar dan tombol di bagian body

Di bawah, Anda dapat melihat tombol dan kode gambar ini. Setelah itu, saya harus menambahkan jalur sumber gambar dan memasukkan id untuk mendapatkan kode sumber

Jadi, nama Id adalah getImage dan nama sumber gambar imageName1

Setelah itu, tambahkan skrip pada kode di bawah ini dan terapkan fungsi. Sekarang, tambahkan fungsi di tag tombol yang bernama imagefun dengan event onclick()

Sekarang, tentang fungsi mendapatkan gambar src dengan id menggunakan dokumen JavaScript. getElementById()

Jadi, tambahkan kondisi if untuk acara ubah gambar onclick. Ada yang menentukan dua kode sumber gambar dan ubah dengan acara onclick

Di sini, menunjukkan bagian dari alat untuk mengubah banyak gambar. Pertama, kode gambar dan tombol input yang terlihat di bagian bawah

<div>
		<h2>Change image onClick event here...</h2>
		<img src="imageName1.jpg" id="getImage">
    	
    </div>
    <div>
    	<input type="button" onclick="imagefun()" value="Change Image">
    </div>

_

Di bawah, Ini adalah kode Html yang kami tambahkan di bagian tubuh seperti yang Anda lihat

Kedua, Menampilkan kode JavaScript setelah kode Html. Anda dapat melihat contoh di atas

<script>
        function imagefun() {
            var Image_Id = document.getElementById('getImage');
            if (Image_Id.src.match("imageName1.jpg")) {
                Image_Id.src = "imageName2.jpg";
            }
            else {
                Image_Id.src = "imageName1.jpg";
            }
        }        
    </script>

Selain itu, kami membuat beberapa penerapan untuk struktur desain agar menampilkan gambar dan tombol dengan lebih baik di ujung depan. Jadi, Ini adalah stylesheet dalam kode di bawah ini

<style type="text/css">
	h2 {
    text-align: center;
    font-size: 30px;
	}
	img#getImage {
    width: 300px;
    height: auto;  
    border: 4px solid #a1a1a1;  
	}
	div {
    text-align: center;
	}
</style>

Di sini, ini adalah beberapa metode untuk mendapatkan elemen menggunakan JavaScript

JavaScript Dapatkan Elemen Terakhir dari Array
Cara Melewati Parameter dalam Fungsi JavaScript Dari Html
Validasi Email dalam JavaScript. Contoh Bentuk Sederhana

Ganti Gambar pada Tombol Klik JavaScript

Demikian pula, Anda dapat menggunakan untuk mengubah gambar pada klik tombol menggunakan javascript. oleh karena itu, kami telah memberikan contoh di area di bawah ini

<div>
		<h2>Change image onClick event here...</h2>
		<img src="imageName1.jpg" id="getImage">
    	
    </div>
    <div>
    	<button onclick="imagefun()">Image Change</button>
    </div>

_

Jadi, Anda hanya dapat mengubah satu baris dari kode Html. Demikian juga, ganti tag masukan ke tombol ini adalah baris kode utama

Setelah itu, semua kode sama seperti diatas kita definisikan kode scriptnya. Anda dapat menambahkan tag skrip dengan fungsi

Ganti Gambar pada klik CSS

Demikian pula, Anda dapat menggunakan CSS dalam kode Html kami. Saya sudah mendefinisikan style dengan event onclick(). Juga, ubah ukuran gambar dan desain tombol

Selain itu, menunjukkan perataan Anda dapat menyalin kode ini yang kami berikan di atas area

Karenanya, Anda dapat menambahkan desain CSS lain yang Anda inginkan di halaman Anda. Ada banyak komponen untuk menghubungkan gaya CSS Anda

Cara Mengubah Gambar pada Klik Mouse di JavaScript

<!DOCTYPE html>
<html>
<head>
	<title>javascript change image onclick event
</title>
<style type="text/css">
	h2 {
    text-align: center;
    font-size: 30px;
	}
	img#getImage {
    width: 300px;
    height: auto;  
    border: 4px solid #a1a1a1;  
	}
	div {
    text-align: center;
	}
</style>
</head>
<body>
	<div>
		<h2>Change image onClick event here...</h2>
		<img src="imageName1.jpg" onmouseover="imagefun()" id="getImage">
    	
    </div>
    <script>
        function imagefun() {
            var Image_Id = document.getElementById('getImage');
            if (Image_Id.src.match("imageName1.jpg")) {
                Image_Id.src = "imageName2.jpg";
            }
            else {
                Image_Id.src = "imageName1.jpg";
            }
        }        
    </script>

</body>
</html>

Di sini, kami menambahkan acara mouse hover. Ketika Anda mengklik dan ingin mengubah gambar menjadi gambar melalui mouse

Kemudian, secara otomatis mengubah gambar pada acara klik mouse. Jadi, Anda dapat menggunakan kode ini

jika tidak, tambahkan hanya baris ini, dan hapus masukan lama dan kode tombol dari editor Anda

<img src="imageName1.jpg" onmouseover="imagefun()" id="getImage">

_

JavaScript Ubah Banyak Gambar saat diklik

Karenanya, kami menerapkan dua gambar untuk diubah. Oleh karena itu, ini berarti Anda dapat menambahkan lebih banyak gambar untuk mengubah beberapa gambar acara onclick

Sekarang, berikan contoh untuk mengubah banyak gambar menggunakan acara klik, periksa kode di bawah ini

function imagefun() {
            var Image_Id = document.getElementById('getImage');
            if (Image_Id.src.match("imageName1.jpg")) {
                Image_Id.src = "imageName2.jpg";
                Image_Id.src = "imageName3.jpg";
            }
            else {
                Image_Id.src = "imageName1.jpg";
            }
        }

Sebagai contoh, kami menambahkan sumber gambar lain dengan kode skrip. Setelah itu, tampilkan banyak gambar dari kode-kode ini. Anda dapat menambahkan lebih banyak gambar seperti yang Anda inginkan di halaman Anda

Kesimpulan

Terakhir, Anda melihat banyak metode untuk acara JavaScript mengubah gambar onclick. Juga, jika Anda memiliki pertanyaan lain, Anda dapat bertanya kepada kami. Inilah poin utama untuk mengubah gambar dengan acara onclick menggunakan JavaScript

Bagaimana cara menampilkan gambar dalam JavaScript onclick?

Create element in the HTML code. Add style to element and set display properties to none. Create a JavaScript “show()” function that can access the image and change the display property to block. Add button in HTML code which calls “show()” function when user clicks on it.

Bagaimana cara mendapatkan gambar src di JavaScript?

Kode JavaScript untuk mendapatkan nilai atribut src tag img HTML . var img_src = document. getElementById("my-img"). src; . log(img_src);

Bisakah tag IMG memiliki onclick?

Atribut onclick dapat dimasukkan ke dalam img, a, input, button, div, span, pre, dan tag HTML lainnya yang digunakan untuk memublikasikan konten . Ini contoh lainnya. Div yang dibatasi memiliki atribut onclick untuk meluncurkan kotak peringatan ketika di mana saja di dalam div diklik.

Bagaimana cara mengubah src gambar di klik menggunakan JavaScript?

Jika kita ingin mengubah gambar dalam JavaScript, kita dapat mengikuti pendekatan ini. Pada cuplikan kode di atas, getElementById menemukan gambar dengan id “myImage” dan mengubah gambar dengan setiap klik pada tombol "Ubah" . Dalam gambar kode

kode javascript