Kami menampilkan metode terbaik untuk JavaScript mengubah acara title gambar dengan contoh. Selain itu, diberikan cara lain untuk mengimplementasikan 'ubah gambar pada klik tombol javascript'
Juga, Kita dapat melakukan perubahan gambar pada acara mouse hover dan klik mouse di bagian bawah. Setelah itu, tampilkan contoh change multiple image title
Daftar isi
JavaScript Ubah Gambar pada Acara klik
<!DOCTYPE html> <html> <head> <title>javascript change image title 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" title="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 title. 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 title()
Sekarang, tentang fungsi mendapatkan gambar src dengan id menggunakan dokumen JavaScript. getElementById()
Jadi, tambahkan kondisi if untuk acara ubah gambar title. Ada yang menentukan dua kode sumber gambar dan ubah dengan acara title
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" title="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
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 title="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 title(). 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 title 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 title
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 title. Juga, jika Anda memiliki pertanyaan lain, Anda dapat bertanya kepada kami. Inilah poin utama untuk mengubah gambar dengan acara title menggunakan JavaScript