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

Mengatur Batas Sumber Gambar HTML borderImageSource DOM

Dipublikasikan Oleh: elfanmauludi 5 komentar
Properti borderImageSource Style DOM pada HTML digunakan untuk mengatur atau mengembalikan gambar yang telah digunakan sebelum digunakan kembali, ketimbang mengembalikan nilai style, yang diberikan oleh properti border-style.


Sebelum memahami lebih dalam materi tentang Mengatur Batas Sumber Gambar HTML borderImageSource DOM, terlebih dahulu pelajari materi tentang: Mengatur Irisan Gambar HTML borderImageSlice Style DOM, Mengatur Batas Perulangan Gambar HTML borderImageRepeat DOM, dan Mengatur Batas Gambar HTML Menggunakan borderImageOutset Style DOM.

Sintak:
  • untuk mendapatkan nilai properti borderImageSource: object.style.borderImageSource
  • untuk mengatur properti borderImageSource: object.style.borderImageSource = "none|image|initial|inherit"

Return Values: berfungsi untuk mengembalikan sebuah nilai string yang merepresentasikan properti border-image-source dari suatu elemen.

Property Values:
  • none: merupakan nilai properti default, yang mengatur properti untuk tidak menggunakan image apapun.
  • image: berfungsi untuk mengatur gambar ke path yang telah ditentukan.
  • initial: digunakan untuk mengatur properti ke nilai default-nya.
  • inherit: digunakan untuk menerima nilai turunan properti dari elemen parent.

Contoh:

<!DOCTYPE html>

<html lang="en">

 

<head>

 

<title>

Properti Style 

borderImageSource DOM

</title>

 

<style>

.item 

{

height: 50px;

border: 25px solid transparent;

/* Mengatur border sebelum 

demonstrasi efek dari 'none' 

*/

border-image:

url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQlSiYauLDl9S5f83REfDnSdXru4UHijiKfLmuxx_2vhqkARLlEqT2BM2_NhXy_cYOJkUuY40JJ4bZguAuip2_3fo9oMdjyLiyXRljhdIL8mUZ_cKN3mIQj4h2aCs3GqTc_Xc9UYHjQUej_VNzA8pp_GatXLiFSdPob66D5ndmGVYUPGdVOQ_z9UNE/w320-h320/blogmapel%20(21).jpg');

}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti Style 

borderImageSource DOM

</b>

 

<p>

Klik tombol untuk mengubah 

sumber dari border-image

</p>

 

<div 

class="item">

Blog TIK

</div>

 

<button 

onclick="changeSource()">

Ubah source dari border-image

</button>

 

<script>

function changeSource() 

{

elem = document.querySelector('.item');

// Mengatur source border 

// image ke tipe none

elem.style.borderImageSource = "none";

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Properti Style borderImageSource DOM

Klik tombol untuk mengubah sumber dari border-image

Blog TIK


Contoh:

<!DOCTYPE html>

<html lang="en">

 

<head>

 

<title>

Properti Style 

borderImageSource DOM

</title>

 

<style>

.item 

{

height: 50px;

border: 25px solid transparent;

}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti Style 

borderImageSource DOM

</b>

 

<p>

Klik tombol untuk mengubah 

sumber dari border-image

</p>

 

<div 

class="item">

Blog TIK

</div>

 

<button 

onclick="changeSource()">

Mengubah sumber border-image

</button>

 

<script>

function changeSource() 

{

elem = document.querySelector('.item');

// Pengaturan source border 

// image ke image lainnya

elem.style.borderImageSource =

"url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQlSiYauLDl9S5f83REfDnSdXru4UHijiKfLmuxx_2vhqkARLlEqT2BM2_NhXy_cYOJkUuY40JJ4bZguAuip2_3fo9oMdjyLiyXRljhdIL8mUZ_cKN3mIQj4h2aCs3GqTc_Xc9UYHjQUej_VNzA8pp_GatXLiFSdPob66D5ndmGVYUPGdVOQ_z9UNE/w320-h320/blogmapel%20(21).jpg')";

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Properti Style borderImageSource DOM

Klik tombol untuk mengubah sumber dari border-image

Blog TIK


Contoh:

<!DOCTYPE html>

<html lang="en">

 

<head>

 

<title>

Properti Style 

borderImageSource DOM

</title>

 

<style>

.item 

{

height: 50px;

border: 25px solid transparent;

/* Pengaturan border untuk 

 demonstrasi efek dari

 'initial' */

border-image:

url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQlSiYauLDl9S5f83REfDnSdXru4UHijiKfLmuxx_2vhqkARLlEqT2BM2_NhXy_cYOJkUuY40JJ4bZguAuip2_3fo9oMdjyLiyXRljhdIL8mUZ_cKN3mIQj4h2aCs3GqTc_Xc9UYHjQUej_VNzA8pp_GatXLiFSdPob66D5ndmGVYUPGdVOQ_z9UNE/w320-h320/blogmapel%20(21).jpg');

}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti Style 

borderImageSource DOM

</b>

 

<p>

Klik tombol untuk mengubah 

source dari border-image

</p>

 

<div 

class="item">

Blog TIK

</div>

 

<button 

onclick="changeSource()">

Ubah source dari border-image

</button>

 

<script>

function changeSource() 

{

elem = document.querySelector('.item');

// Pengaturan border image ke 

// initial

elem.style.borderImageSource = "initial";

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Properti Style borderImageSource DOM

Klik tombol untuk mengubah source dari border-image

Blog TIK


Contoh:

<!DOCTYPE html>

<html lang="en">

 

<head>

 

<title>

Properti Style 

borderImageSource DOM

</title>

 

<style>

.item 

{

height: 50px;

border: 25px solid transparent;

}

 

#parent 

{

/* Pengaturan border dari 

domonstrasi parent efek dari 

'inherit' */

border-image:

url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQlSiYauLDl9S5f83REfDnSdXru4UHijiKfLmuxx_2vhqkARLlEqT2BM2_NhXy_cYOJkUuY40JJ4bZguAuip2_3fo9oMdjyLiyXRljhdIL8mUZ_cKN3mIQj4h2aCs3GqTc_Xc9UYHjQUej_VNzA8pp_GatXLiFSdPob66D5ndmGVYUPGdVOQ_z9UNE/w320-h320/blogmapel%20(21).jpg');

}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti Style 

borderImageSource DOM

</b>

 

<p>

Klik tombol untuk mengubah 

source dari border-image

</p>

 

<div 

id="parent">

<div 

class="item">Blog Elfan

</div>

</div>

 

<button 

onclick="changeSource()">

Ubah source dari border-image

</button>

 

<script>

function changeSource() 

{

elem = document.querySelector('.item');

// Pengaturan source border 

// image ke turunan dari 

// parent

elem.style.borderImageSource = "inherit";

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Properti Style borderImageSource DOM

Klik tombol untuk mengubah source dari border-image

Blog Elfan


Mengatur batas sumber gambar dalam dokumen berbasis HTML dapat dilakukan melalui atribut atau metode yang disediakan dalam pengelolaan peramban. Salah satu konsep yang penting dalam hal ini adalah penggunaan atribut untuk menentukan gambar yang akan digunakan sebagai batas pada sebuah elemen. Hal ini memungkinkan tampilan yang lebih menarik dan variatif, terutama ketika diperlukan desain visual yang kaya dan interaktif.

Secara umum, batas gambar digunakan untuk mempercantik tampilan elemen-elemen dalam sebuah halaman. Batas tersebut dapat berupa gambar statis yang berfungsi sebagai pembatas, atau bisa juga berupa gambar yang lebih dinamis mengikuti perubahan ukuran elemen di layar. Proses ini umumnya dimulai dengan menentukan gambar yang akan digunakan sebagai pembatas dan bagaimana gambar tersebut harus ditampilkan pada setiap sisi elemen.

Dalam pengaturan batas gambar, ada beberapa hal yang perlu diperhatikan, salah satunya adalah pemilihan gambar yang tepat. Gambar yang dipilih sebaiknya sesuai dengan desain dan ukuran elemen yang akan diberi batas. Penggunaan gambar yang terlalu besar atau tidak proporsional dapat merusak tampilan keseluruhan halaman. Selain itu, gambar yang dipilih harus cukup fleksibel untuk menyesuaikan diri dengan berbagai ukuran elemen, terutama ketika elemen tersebut berukuran dinamis atau responsif terhadap perubahan ukuran jendela peramban.

Selanjutnya, pengaturan posisi dan pengulangan gambar juga menjadi hal yang penting. Pengaturan posisi gambar memastikan gambar tersebut ditempatkan dengan benar pada setiap sisi elemen, apakah di sisi atas, bawah, kiri, atau kanan. Sementara itu, pengulangan gambar dapat menghemat sumber daya jika gambar yang digunakan berukuran kecil namun harus mengisi batas yang lebih panjang. Dalam hal ini, gambar tersebut dapat diatur untuk diulang secara horizontal atau vertikal, tergantung pada kebutuhan tampilan elemen.

Selain pengaturan posisi dan pengulangan, pengelolaan skala gambar juga menjadi bagian yang tak kalah penting. Gambar yang digunakan sebagai batas sering kali harus disesuaikan skalanya agar tidak tampak terlalu besar atau kecil. Penyesuaian ini memungkinkan gambar tetap proporsional meskipun elemen yang diberikan batas memiliki ukuran yang bervariasi. Proses penyesuaian skala ini harus dilakukan dengan hati-hati, karena gambar yang terlalu diperbesar atau diperkecil dapat kehilangan detail atau menjadi tidak terlihat jelas.

Dalam proses penyesuaian batas gambar, perhatian juga perlu diberikan pada jarak antar gambar dan elemen. Jarak yang terlalu dekat dapat membuat tampilan menjadi sesak, sedangkan jarak yang terlalu jauh dapat membuat batas terlihat terpisah dari elemen utamanya. Oleh karena itu, pengaturan jarak yang tepat sangat diperlukan untuk menjaga estetika tampilan secara keseluruhan.

Ketika berhadapan dengan berbagai ukuran elemen pada halaman yang responsif, batas gambar juga harus mampu beradaptasi dengan baik. Halaman yang responsif berarti elemen-elemen di dalamnya dapat berubah ukuran sesuai dengan lebar dan tinggi jendela peramban. Dalam kondisi ini, gambar batas juga harus dapat beradaptasi, baik melalui penyesuaian skala maupun dengan pengulangan gambar yang lebih efisien. Fleksibilitas ini memungkinkan gambar batas tetap terlihat konsisten meskipun ukuran elemen berubah.

Selain pertimbangan visual, aspek kinerja juga perlu diperhatikan dalam penggunaan batas gambar. Menggunakan gambar yang terlalu besar atau terlalu banyak dapat mempengaruhi kinerja halaman, terutama ketika halaman tersebut diakses melalui perangkat dengan keterbatasan sumber daya. Oleh karena itu, penting untuk memilih gambar yang optimal baik dari segi ukuran file maupun resolusi. Gambar yang optimal akan memberikan keseimbangan antara tampilan visual yang menarik dan kinerja yang cepat.

Dalam pengelolaan batas gambar, terdapat juga berbagai alat bantu yang dapat digunakan untuk memudahkan proses desain dan implementasi. Alat-alat ini membantu dalam memilih, mengatur, dan menguji batas gambar sebelum diterapkan pada halaman sebenarnya. Dengan bantuan alat tersebut, pengembang dapat memastikan bahwa batas gambar yang diterapkan sesuai dengan harapan baik dari sisi tampilan maupun fungsionalitas.

Secara keseluruhan, mengatur batas gambar pada elemen HTML merupakan proses yang melibatkan berbagai aspek mulai dari pemilihan gambar, pengaturan posisi, pengulangan, hingga penyesuaian skala dan jarak. Proses ini tidak hanya berfokus pada tampilan visual, tetapi juga mempertimbangkan kinerja dan efisiensi halaman secara keseluruhan. Dengan perencanaan dan eksekusi yang tepat, batas gambar dapat menjadi elemen yang memperkaya tampilan halaman tanpa mengorbankan kinerja atau fungsionalitas. 

Aspek penting lainnya adalah memastikan bahwa gambar yang digunakan sebagai batas tetap sesuai dengan konsep desain dan identitas visual halaman. Konsistensi desain ini sangat penting untuk menciptakan pengalaman pengguna yang menyenangkan dan profesional. Gambar batas yang tepat akan memberikan kesan visual yang terintegrasi dengan baik dalam keseluruhan tampilan halaman, sedangkan gambar batas yang tidak sesuai dapat merusak harmoni desain.

Untuk memastikan bahwa batas gambar dapat diterapkan dengan baik pada berbagai perangkat dan resolusi layar, pengujian lintas perangkat sangat diperlukan. Pengujian ini akan membantu memastikan bahwa gambar batas tetap terlihat baik pada berbagai ukuran layar, mulai dari perangkat ponsel hingga layar desktop yang lebih besar. Melalui pengujian ini, pengembang dapat melakukan penyesuaian yang diperlukan untuk menjaga tampilan tetap konsisten dan optimal.

Pada akhirnya, tujuan dari penggunaan batas gambar adalah untuk meningkatkan estetika halaman tanpa mengurangi fungsionalitasnya. Meskipun terlihat sederhana, pengaturan batas gambar memerlukan perencanaan yang cermat dan pemahaman tentang prinsip-prinsip desain yang baik. Melalui pengelolaan yang tepat, batas gambar dapat menjadi elemen yang memperkaya pengalaman pengguna dan memperkuat daya tarik visual dari sebuah halaman.

Artikel ini akan dibaca oleh: Helga Maulida Qonitah, Indah Novitasari, Intan Purnama Putri Damayanti, Irvak Iqrammullah Raharyudar, dan Irwan Syah.
Location: Semarang, Kota Semarang, Jawa Tengah, Indonesia

5 komentar untuk "Mengatur Batas Sumber Gambar HTML borderImageSource DOM"

  1. AnonimSabtu, 21 Mei 2022 pukul 19.44.00 WIB

    Jenis browser apa saja yang dapat digunakan untuk mengaktifkan properti borderImageSource Style DOM pada HTML?

    BalasHapus
    Balasan
    1. AnonimSabtu, 21 Mei 2022 pukul 19.45.00 WIB

      Berikut adalah beberapa jenis browser yang dapat digunakan untuk mengaktifkan properti borderImageSource Style DOM pada HTML:
      1. Chrome
      2. Internet Explorer 11.0
      3. Firefox
      4. Safari 6.0

      Hapus
  2. AnonimJumat, 10 Juni 2022 pukul 08.43.00 WIB

    Apa yang dimaksud dengna properti borderImageSource Style DOM pada HTML?

    BalasHapus
    Balasan
    1. AnonimJumat, 10 Juni 2022 pukul 08.44.00 WIB

      Properti borderImageSource Style DOM pada HTML digunakan untuk menentukan jalur ke gambar yang akan digunakan sebagai berbatasan atau bukan berbatasan normal dari sekitar elemen yang dikenai oleh properti tersebut.

      Hapus
    2. AnonimJumat, 10 Juni 2022 pukul 08.44.00 WIB

      Juga, jika nilai yang digunakan pada properti borderImageSource adalah "none", atau jika nilai gambar tidak dapat ditampilkan pada layar monitor, maka style batas yang akan digunakan untuk menggantikan properti borderImageSource.

      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 -