Berfungsi untuk Mengubah Latar Belakang Tombol dalam HTML

Jika Anda ingin tombol pada halaman Web Anda menarik perhatian, Anda harus melakukan lebih dari sekadar menambahkannya ke kode HTML Anda menggunakan tag "input". Tombol, secara default, memiliki latar belakang abu-abu dengan teks hitam. Fungsi JavaScript sederhana dapat mengubah latar belakang tombol yang membosankan menjadi warna-warni atau bahkan memperindahnya dengan gambar pilihan Anda.

Membuat Tombol

Tanpa pemformatan CSS, kode yang diperlukan untuk membuat tombol halaman Web dasar muncul sebagai berikut:

Anda memiliki opsi untuk menambahkan referensi kelas CSS yang menetapkan latar belakang tombol menjadi kuning seperti yang ditunjukkan di sini:

Kelas CSS berikut, ditempatkan di bagian gaya dokumen Anda membuat kelas itu:

.styleButton {background-color: Yellow;}

Ubah "Kuning" menjadi warna HTML yang valid untuk mendapatkan tampilan yang Anda inginkan. Anda dapat menambahkan gambar ke latar belakang tombol dengan menggunakan kode CSS berikut:

.styleButton {background-image: url ('myImage.jpg');}

Ganti "myImage.jpg" dengan URL gambar apa pun di Web atau URL gambar di server Web Anda.

Parameter fungsi

Contoh berikut menunjukkan kerangka fungsi yang mengubah latar belakang tombol:

fungsi changeBackground (buttonID, backgroundType, buttonBackground) {if (backgroundType == "image") {// Ubah gambar latar belakang tombol}

lain {// Ubah warna latar belakang tombol}}

Fungsi ini menerima tiga parameter. ButtonID menyimpan ID tombol yang ingin Anda ubah. Variabel backgroundType dapat memiliki nilai "warna" atau "gambar." Parameter terakhir, buttonBackground, menampung warna yang ingin Anda tambahkan ke tombol atau URL gambar. Kode memproses logika yang didefinisikan di blok "jika" pertama jika Anda melewatkan "gambar" sebagai nilai backgroundType. Jika tidak, itu mengeksekusi pernyataan di blok "lain" dan mengubah warna latar belakang tombol.

Logika kode

Kode berikut mencantumkan pernyataan yang diperlukan untuk menambahkan gambar latar belakang ke tombol atau mengubah warna latar belakangnya tergantung pada nilai yang diteruskan dalam parameter backgroundType:

fungsi changeBackground (buttonID, backgroundType, buttonBackground) {if (backgroundType == "image") {// Ubah gambar latar belakang tombol var urlValue = "URL ('" + buttonBackground + "')"; document.getElementById (buttonID) .style.backgroundImage = urlValue; }

else {// Ubah dokumen warna latar belakang tombol.getElementById (buttonID) .style.backgroundColor = buttonBackground; }}

Jika Anda memanggil fungsi dan mengirimkannya backgroundType "gambar, " kode menetapkan atribut backgroundImage tombol ke warna yang dilewatkan dalam variabel buttonBackground. Jika tidak, kode ini menetapkan atribut backgroundColor tombol ke warna yang dilewatkan dalam variabel buttonBackground.

Kiat

Saat menggunakan fungsi untuk menambahkan gambar ke latar belakang, pilih satu yang cukup kecil untuk muat di dalam tombol. HTML tidak mengurangi ukuran gambar agar pas tanpa elemen halaman. Anda juga dapat membuat latar belakang tombol bergerak, berdenyut, atau berpendar dengan menambahkan GIF animasi kecil ke dalamnya. Berhati-hatilah saat menempatkan gambar kompleks pada tombol karena mereka mungkin mempersulit untuk membaca teks tombol jika tombol Anda memiliki teks.