Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / html

Mengatur Daftar Gambar HTML Menggunakan listStyleImage Style DOM

Dipublikasikan Oleh: elfanmauludi 5 komentar
Properti listStyleImage Style DOM pada HTML digunakan untuk mengatur atau mengembalikan image sebagai icon list-item.

Sebelum memahami lebih dalam materi tentang Mengatur Daftar Gambar HTML Menggunakan listStyleImage Style DOM, terlebih dahulu pelajari materi tentang: Mengatur Daftar HTML Menggunakan listStyle DOM, Mengatur Panjang Jarak HTML Menggunakan lineHeight Style DOM, dan Mengatur Spasi Kertas HTML Menggunakan letterSpacing Style DOM.

Sintak:
  • Digunakan untuk mengembalikan nilai properti listStyleImage: object.style.listStyleImage
  • Digunakan untuk mengatur nilai properti listStyleImage: object.style.listStyleImage = "none|url|initial|inherit"

Properti Values:
  • none: Digunakan untuk tidak mengembalikan nilai gambar apapun atau tidak menampilkan nilai gambar apapun pada browser.
  • url: Digunakan untuk menentukan path dari suatu gambar.
  • initial: Digunakan untuk mengatur nilai properti ke nilai default-nya.
  • inherit: Digunakan untuk menerima nilai turunan properti dari elemen parent.

Return Values: Berfungsi untuk mengembalikan sebuah string, yang merepresentasikan lokasi path dari gambar.

Contoh: Penggunaan properti none.

<!DOCTYPE html>

<html>

 

<head>

<title>

Properti Style listStyleImage 

DOM pada HTML

</title>

</head>

 

<body>

 

<h1>

<center>

Bons 

<button 

onclick="image()">

Press

</button>

</center>

</h1>

 

<h4>

Klik tombol 'Press' untuk 

memperlihatkan properti 

ListStyleImage.

</h4>

 

<ul id="nnn1">

<li>M</li>

<li>A</li>

<li>K</li>

<li>A</li>

<li>N</li>

</ul>

 

<script>

function image() 

{

// Pengaturan list style 

// menjadi "none".

document.getElementById(

"nnn1").style.listStyleImage =

"none";

}

</script>

 

</body>

 

</html>

Output:

Bons

Klik tombol 'Press' untuk memperlihatkan properti ListStyleImage.

  • M
  • A
  • K
  • A
  • N


Contoh: Penggunaan properti url.

<!DOCTYPE html>

<html>

 

<head>

<title>

Properti Style listStyleImage 

DOM pada HTML

</title>

</head>

 

<body>

 

<h1>

<center>

Bons 

<button 

onclick="image()">

Press

</button>

</center>

</h1>

 

<h4>

Klik tombol 'Press' untuk 

memperlihatkan properti 

ListStyleImage.

</h4>

 

<ul id="kkk2">

<li>M</li>

<li>A</li>

<li>K</li>

<li>A</li>

<li>N</li>

</ul>

 

<script>

function image() 

{

// Pengaturan list style image 

// menggunakan URL.

document.getElementById(

"kkk2").style.listStyleImage =

"url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyizkhCmvzS6vbSN5BKe5vmhs_cFakFxB8u_E3U3_OXNRz-QJy4CemqcTyPrvzfOofiws4FHtSerLDrlYP6ygRUH4rpC3dtrozkB9Dz-_5cQIuYGT3KaiF4YRD8zcz2u92zmlOZRMfNlVBTylRfL-TMTFlvrd5wCxJvm3FXsIulLr40WStkBfdMO3d/s800/blogmapel.webp')";

}

</script>

 

</body>

 

</html>

Output:

Bons

Klik tombol 'Press' untuk memperlihatkan properti ListStyleImage.

  • M
  • A
  • K
  • A
  • N


Contoh: Penggunaan properti initial.

<!DOCTYPE html>

<html>

 

<head>

<title>

Properti Style listStyleImage 

DOM pada HTML

</title>

</head>

 

<body>

 

<h1>

<center>

Bons 

<button 

onclick="image()">

Press

</button>

</center>

</h1>

 

<h4>

Klik tombol 'Press' untuk 

memperlihatkan properti 

ListStyleImage.

</h4>

 

<ul id="qqq3">

<li>M</li>

<li>A</li>

<li>K</li>

<li>A</li>

<li>N</li>

</ul>

 

<script>

function image() 

{

// Pengaturan list style 

// initial.

document.getElementById(

"qqq3").style.listStyleImage =

"initial";

}

</script>

 

</body>

 

</html>

Output:

Bons

Klik tombol 'Press' untuk memperlihatkan properti ListStyleImage.

  • M
  • A
  • K
  • A
  • N


Contoh: Penggunaan properti inherit.

<!DOCTYPE html>

<html>

 

<head>

<title>

Properti Style listStyleImage 

DOM pada HTML

</title>

</head>

 

<body>

 

<h1>

<center>

Bons 

<button 

onclick="image()">

Press

</button>

</center>

</h1>

 

<h4>

Klik tombol 'Press' untuk 

memperlihatkan properti 

ListStyleImage.

</h4>

 

<ul id="jjj4">

<li>M</li>

<li>A</li>

<li>K</li>

<li>A</li>

<li>N</li>

</ul>

 

<script>

function image() 

{

// Pengaturan list style 

// inherit.

document.getElementById(

"jjj4").style.listStyleImage =

"inherit";

}

</script>

 

</body>

 

</html>

Output:

Bons

Klik tombol 'Press' untuk memperlihatkan properti ListStyleImage.

  • M
  • A
  • K
  • A
  • N


Mengatur daftar gambar pada elemen HTML adalah salah satu cara untuk memperkaya tampilan sebuah halaman web, terutama saat daftar tersebut berisi gambar-gambar sebagai penanda atau ikon untuk poin-poin tertentu. Salah satu cara untuk melakukannya adalah dengan menggunakan properti pengaturan gambar daftar yang terdapat pada gaya dokumen objek model HTML. Pengaturan ini memungkinkan gambar digunakan sebagai tanda atau ikon untuk elemen daftar, menggantikan tanda default seperti titik atau angka. Dalam pengaturannya, gambar ini menjadi elemen visual yang lebih menarik dan bisa disesuaikan dengan desain keseluruhan halaman.

Pengaturan ini diakses melalui gaya dokumen objek model dengan menggunakan properti yang disebut dengan "listStyleImage". Properti ini memungkinkan penggunaan gambar sebagai tanda pada elemen daftar, yang sebelumnya hanya menggunakan simbol sederhana. Gambar yang digunakan bisa diambil dari berbagai sumber, seperti gambar yang ada dalam folder lokal, atau gambar dari lokasi daring.

Penggunaan gambar sebagai tanda pada elemen daftar memberikan fleksibilitas lebih dalam desain. Sebuah halaman web yang berisi daftar elemen, misalnya daftar menu, poin-poin penting, atau langkah-langkah instruksi, bisa menjadi lebih menarik dengan tambahan gambar. Gambar dapat disesuaikan untuk mencocokkan tema atau konteks halaman tersebut, menciptakan pengalaman visual yang lebih menyatu dengan konten lainnya.

Gambar yang dipilih untuk digunakan dalam elemen daftar harus memiliki kualitas yang sesuai dengan tampilan keseluruhan halaman. Gambar yang terlalu besar atau tidak seimbang bisa membuat tampilan menjadi tidak rapi atau bahkan merusak keselarasan desain halaman. Oleh karena itu, penting untuk memastikan bahwa gambar yang digunakan memiliki ukuran yang tepat dan tidak mengganggu struktur elemen lainnya.

Pengaturan gambar dalam daftar ini juga memberikan kebebasan untuk memilih gambar yang sesuai dengan tujuan komunikasi. Misalnya, dalam sebuah artikel yang berisi langkah-langkah instruksi, gambar bisa digunakan untuk mengg

daftar juga memiliki manfaat dalam meningkatkan keterbacaan dan estetika halaman web. Ketika daftar panjang atau kompleks diterjemahkan ke dalam format yang lebih visual, elemen-elemen tersebut menjadi lebih mudah dipahami. Pembaca atau pengguna akan lebih tertarik untuk melihat daftar jika ada elemen visual yang menggugah perhatian. Oleh karena itu, penambahan gambar pada daftar tidak hanya memperindah tampilan, tetapi juga meningkatkan daya tarik dan efektivitas komunikasi konten yang disampaikan.

Pada beberapa kasus, penggunaan gambar sebagai tanda dalam daftar memungkinkan pengembang untuk menciptakan nuansa tertentu sesuai dengan gaya yang ingin diterapkan pada halaman web. Misalnya, untuk halaman yang berkaitan dengan produk makanan, gambar-gambar yang mewakili kategori makanan dapat digunakan, memberikan nuansa yang sesuai dengan konten yang dipresentasikan. Begitu juga pada halaman-halaman web yang bertemakan alam atau perjalanan, gambar alam bisa digunakan untuk membuat daftar lebih hidup dan relevan.

Selain itu, penggunaan gambar pada daftar juga memperkaya interaksi pengguna dengan elemen-elemen di halaman. Pengguna mungkin lebih tertarik untuk berinteraksi dengan daftar yang didominasi oleh gambar-gambar yang menarik, dibandingkan dengan daftar yang hanya terdiri dari teks dan simbol sederhana. Elemen visual memiliki daya tarik yang lebih besar dalam memandu pengguna untuk lebih fokus pada konten yang dihadirkan.

Namun, ada beberapa aspek yang perlu diperhatikan ketika menggunakan gambar untuk daftar. Salah satunya adalah masalah pemuatan halaman. Penggunaan gambar besar yang tidak dioptimalkan dapat memperlambat waktu muat halaman, yang berdampak buruk pada pengalaman pengguna. Oleh karena itu, penting untuk menggunakan gambar yang telah dioptimalkan, sehingga tidak mengorbankan waktu muat halaman, meskipun gambar tersebut memperkaya tampilan visual.

Selain itu, ukuran dan posisi gambar harus disesuaikan dengan baik agar tidak mengganggu tata letak atau keselarasan elemen daftar. Gambar yang terlalu besar dapat menyebabkan daftar terlihat berantakan, sementara gambar yang terlalu kecil bisa hilang begitu saja dalam keseluruhan desain. Pengaturan ukuran dan penataan gambar harus diperhatikan dengan seksama agar gambar dapat berfungsi dengan baik sebagai tanda daftar tanpa mengurangi estetika dan keterbacaan halaman.

Penggunaan gambar sebagai tanda pada daftar juga perlu dipertimbangkan dalam hal keterjangkauan bagi semua pengguna. Pengguna dengan keterbatasan penglihatan mungkin kesulitan untuk memanfaatkan gambar sebagai elemen utama dalam daftar jika tidak didukung dengan deskripsi atau teks alternatif yang memadai. Oleh karena itu, penting untuk menambahkan deskripsi teks alternatif pada gambar, sehingga informasi yang terkandung dalam gambar tetap dapat diakses oleh semua pengguna, terlepas dari keterbatasan yang dimiliki.

Selain itu, pengaturan gaya gambar dalam daftar juga berhubungan erat dengan tema keseluruhan desain halaman web. Penggunaan gambar yang tidak konsisten dengan elemen-elemen lain di halaman dapat menyebabkan ketidaksesuaian yang merusak kesan visual yang ingin disampaikan. Oleh karena itu, penting untuk memastikan bahwa gambar yang digunakan memiliki gaya dan nuansa yang sejalan dengan desain keseluruhan halaman, termasuk warna, tipografi, dan elemen-elemen desain lainnya.

Dalam penerapannya, pengaturan gambar pada daftar bisa menjadi alat yang sangat berguna untuk meningkatkan kualitas tampilan halaman web, tetapi juga membutuhkan pertimbangan yang matang terkait dengan kecepatan akses, ukuran gambar, dan keselarasan dengan desain keseluruhan. Hal ini menjadi sangat penting dalam menciptakan pengalaman pengguna yang optimal, dimana gambar tidak hanya digunakan untuk mempercantik halaman tetapi juga untuk meningkatkan fungsionalitas dan aksesibilitas.

Dengan penggunaan yang tepat, pengaturan gambar dalam daftar dapat meningkatkan daya tarik visual dan memperkaya pengalaman pengguna. Dalam dunia desain web yang semakin menuntut kreativitas, kemampuan untuk mengintegrasikan elemen visual seperti gambar ke dalam daftar akan semakin memperkuat daya saing sebuah halaman web, menciptakan tampilan yang unik, fungsional, dan menyenangkan untuk dijelajahi.

Artikel ini akan dibaca oleh: Ariska Dwi Kusumaningrum, Armalina Safana Jazuliah, Arnita Febriyanti, Arya Dewa Saputra, dan Asri Lita Sari.
Location: Kota Semarang, Jawa Tengah, Indonesia

5 komentar untuk "Mengatur Daftar Gambar HTML Menggunakan listStyleImage Style DOM"

  1. AnonimMinggu, 10 Juli 2022 pukul 23.52.00 WIB

    Jenis browser apa saja yang dapat digunakan oleh para pengembang untuk menggunakan properti listStyleImage DOM pada HTML?

    BalasHapus
    Balasan
    1. AnonimMinggu, 10 Juli 2022 pukul 23.53.00 WIB

      Berikut adalah beberapa daftar jenis browser yang dapat digunakan oleh para pengembang untuk mengatifkan properti listStyleImage DOM pada dokumen HTML:
      1. Google Chrome
      2. Internet Explorer
      3. Firefox
      4. Opera
      5. Safari

      Hapus
  2. AnonimSelasa, 09 Agustus 2022 pukul 23.12.00 WIB

    Apa yang dimaksud dengan properti listStyleImage DOM pada HTML?

    BalasHapus
    Balasan
    1. AnonimSelasa, 09 Agustus 2022 pukul 23.13.00 WIB

      Properti listStyleImage Style DOM pada HTML merupakan properti yang digunakan untuk menggantikan penanda dari list-item dengan gambar.

      Hapus
    2. AnonimSelasa, 09 Agustus 2022 pukul 23.13.00 WIB

      Selalu tentukan properti listStyleType sebagai sebuah tambahan dimana properti listStyleImage dapat digunakan jika gambar yang digunakan untuk ditampilkan karena alasan tertentu menjadi tidak tersedia.

      Hapus

Hubungi admin melalui Wa : +62-896-2414-6106

Respon komentar 7 x 24 jam, mohon bersabar jika komentar tidak langsung dipublikasi atau mendapatkan balasan secara langsung.

Bantu admin meningkatkan kualitas blog dengan melaporkan berbagai permasalahan seperti typo, link bermasalah, dan lain sebagainya melalui kolom komentar.

- Ikatlah Ilmu dengan Memostingkannya -