Meredupkan gambar membuatnya lebih sulit dilihat, tetapi itu mungkin hanya efek yang Anda cari. Gambar redup menjadi kurang menonjol di halaman web dan kurang menarik perhatian daripada objek di sekitarnya. Anda mungkin meredupkan gambar pantai yang cerah, misalnya, untuk menarik fokus pengguna ke menu di bawah gambar. Anda tidak perlu membuat banyak gambar untuk menghasilkan efek peredupan ini. Cascading Style Sheets, atau CSS, dapat melakukan trik ini menggunakan beberapa baris kode.
CSS
CSS adalah bahasa yang digunakan desainer situs untuk menentukan tampilan objek di halaman web. Atribut ini, seperti color dan opacity, memiliki nilai seperti yang ditunjukkan pada contoh berikut: .redBorder {border-color: red; border-style: solid;}
Kode ini membuat kelas CSS bernama redBorder. Jika salah satu tag img HTML Anda mereferensikan kelas ini, pengunjung situs akan melihat bingkai merah solid di sekitar gambar saat melihatnya di laman web Anda. Kode HTML yang mereferensikan kelas ini terlihat sebagai berikut dan batas merah dapat dihapus dengan menghapus referensi kelas di tag img ini:.
Opasitas CSS
Dengan mengubah opasitas gambar menggunakan CSS, Anda membuatnya lebih redup. Kode yang ditunjukkan di bawah ini membuat kelas bernama opacity40 yang mendefinisikan nilai opacity 40 persen: .opacity40 {filter: alpha (opacity = 40);
opasitas: 0,4; }
Atribut filter kelas menggunakan skala opasitas antara 0 dan 100, dan atribut opasitasnya memiliki skala opasitas dengan nilai mulai dari 0 hingga 1. Penggunaan kedua atribut memastikan bahwa semua browser dapat mengubah opasitas gambar Anda. Tambahkan referensi kelas ini ke gambar untuk membuatnya redup. Anda juga dapat membuat kelas bernama "opacity100" dan menyetel nilainya sehingga opasitas gambar adalah 100 persen. Kelas itu akan membuat gambar menjadi buram.
Peredupan Secara Terprogram
Halaman web Anda dapat menampilkan gambar redup saat pengguna membuka halaman, atau kode Anda dapat menyebabkan gambar meredup nanti setelah halaman dimuat. Untuk membuat gambar meredup pada awalnya, setel opasitas ke nilai yang lebih rendah, seperti yang dijelaskan sebelumnya. Untuk meredupkan gambar saat aplikasi Anda berjalan, ubah nama kelas yang menentukan opasitas gambar seperti yang ditunjukkan pada contoh di bawah ini: var imageObject = document.getElementById ("image1"); imageObject.className = "opacity40";
Kode ini, muncul di dalam fungsi JavaScript, memperoleh referensi ke gambar dan mengubah nama kelasnya menjadi "opacity40." Pengguna dapat mengklik tombol yang menjalankan fungsi JavaScript, atau kode Anda dapat memanggilnya kapan saja.
Pertimbangan
Fungsi JavaScript Anda membutuhkan nilai id dari gambar yang ingin Anda redupkan jika Anda ingin mengubah opasitasnya secara dinamis. ID gambar dalam contoh yang dijelaskan sebelumnya adalah "gambar1". Jika Anda memiliki beberapa gambar untuk diredupkan, beri mereka nilai id unik dan teruskan ke fungsi yang melakukan perubahan opasitas. Buat kelas CSS sebanyak yang Anda suka yang menentukan tingkat opasitas yang berbeda. Anda kemudian dapat meredupkan gambar ke tingkat apa pun dengan mengubah referensi kelasnya di fungsi JavaScript.