Fitur Web Interaktif & Multimedia

Fitur web Interaktif

dan Multimedia

ALGORITMA

RESEARHCH & CONSULTING

Oleh: Supriadi. Eng

Terapan penggunaa Algoritma pemograman pada halaman web

Edisi Musafir Engeneering Nona & AI

2025

🔘Baca Daftar isi:

18

Galery Photo dengan satu display
<!-- Tombol Galery bisa di mana saja -->
⚪<a href="javascript:void(0)" onclick="openGalery('galery1')">galery1</a> 
⚪<a href="javascript:void(0)" onclick="openGalery('galery2')">galery2</a> 
⚪<a href="javascript:void(0)" onclick="openGalery('galery3')">galery3</a>

<!-- Jendela Galery ditempatkan sesuai posisi -->
<div class="fullwidth"><div id="galeryWindow"style="display: none; border: 1px solid Gray; 

height: 400px; overflow: auto; max-width: 760px;"></div></div>

<!-- Isi galery disimpan tersembunyi di bawah -->

<div id="galery1" style="display:none;">isi konten disini</div>

<div id="galery2" style="display:none;">isi konten disini</div>

<div id="galery3" style="display:none;">isi konten disini</div>

<!--➖Galery Photo-->

<scrip>let currentOpenId = null; // simpan id catatan yang sedang terbuka

function openGalery(id) {let galeryWindow = document.getElementById("galeryWindow");
let target = document.getElementById(id); if (!target) return;
if (currentOpenId === id && galeryWindow.style.display === "block") {
galeryWindow.style.display = "none"; galeryWindow.innerHTML = ""; currentOpenId = null; return;}
galeryWindow.style.display = "block";

galeryWindow.innerHTML = target.innerHTML;currentOpenId = id;}</scrip>

Script catatan tersembunyi Variable dengan Id yang bisa diubah

<!--pembuka-->
<button onclick="toggleNote('albumA','album')">Album A</button>
<button onclick="toggleNote('albumB','album')">Album B</button>

<!--pemnyimpan-->

<div id="albumA" style="display:none;">Foto Album A</div>
<div id="albumB" style="display:none;">Foto Album B</div>

<a href="javascript:void(0)" onclick="closeAllNotes('album')">Close All</a>

<!--➖Script catatan tersembunyi Variable dengan Id yang bisa diubah-->
<script>(function() {window.toggleNote = function(id, prefix = "album") 

{let notes = document.querySelectorAll("div[id^='" + prefix + "']");
let note = document.getElementById(id);
if (!note) return;if (note.style.display === "block") 

{note.style.display = "none"; } else {
notes.forEach(n => n.style.display = "none");
note.style.display = "block";}};
window.closeAllNotes = function(prefix = "album") {
let notes = document.querySelectorAll("div[id^='" + prefix + "']");
notes.forEach(n => n.style.display = "none");};})();</script>

Catatan tersembunyi dengan display tunggal Id bisa diubah

<!-- Tombol untuk membuka/tutup catatan -->
<a href="javascript:void(0)" onclick="toggleSingleContainer('open1', 'open')" style="color:blue; text-decoration:underline; cursor:pointer;">Buka / Tutup Catatan</a>

<!-- Kontainer catatan -->
<div id="open1" style="display:none; border:1px solid #ccc; padding:10px; margin-top:5px;">
Ini adalah isi catatan tunggal. Saat dibuka, catatan teman akan otomatis tertutup.</div>

<!--➖Script Catatan Ringan dengan Satu Kontainer tampilan dan ID bisa diubah-->

<script>(function() {
window.toggleSingleContainer = function(id, prefix = "open") {
let container = document.getElementById(id);
let notes = document.querySelectorAll("div[id^='" + prefix + "']");
if (!container) return;
if (container.style.display === "block") {
container.style.display = "none"; } else {// tutup dirinya sendiri
notes.forEach(n => n.style.display = "none"); // tutup teman
container.style.display = "block"; } };})()// buka dirinya sendiri</script>

Catatatn terbuka saat dimuat dengan tombol buka tutup

 <button id="toggleButton" onclick="toggleSingleOpen('open1')">Tutup Catatan</button>

<a href="javascript:void(0)" id="toggleLink" onclick="toggleSingleOpen('open1')">Tutup Catatan</a>

<div id="open1" style="display:block; border:1px solid #ccc; padding:10px; margin-top:5px;">
Ini adalah isi catatan. Saat halaman dimuat, catatan ini terbuka.</div>

<!--➖Script Catatan terbuka saat dimuat dengan tombol buka/tutup yang fleksibel-->

<!--➖Script Catatan terbuka saat dimuat dengan tombol buka/tutup yang fleksibel dan ID Open-->

<script>(function() {window.toggleSingleOpen = function(id) {
let open = document.getElementById(id); if (!open) return;
// Cari semua pemanggil tombol/link yang memakai fungsi ini
let triggers = document.querySelectorAll("[onclick*='toggleSingleOpen(\"" + id + "\")'], [onclick*=\"toggleSingleOpen('" + id + "')\"]"); if (open.style.display === "block") {
open.style.display = "none";
triggers.forEach(trigger => trigger.innerText = "Buka Catatan");} else {open.style.display = "block";
triggers.forEach(trigger => trigger.innerText = "Tutup Catatan");}};})();</script>

Catatan BerPaswoord.1

<!--➖Script&CSS Catatan tersembunyi dengan Password opsional➖➖-->

<!-- Tombol & Link -->

<button onclick="togglePasw('pasw1')">Pasw 1</button>

<button onclick="togglePasw('pasw2')">Pasw 2</button>

<ul><li><a href="javascript:void(0)" onclick="togglePasw('pasw1')">Link Pasw 1</a></li>

<li><a href="javascript:void(0)" onclick="togglePasw('pasw2')">Link Pasw 2</a></li></ul>

<!-- kontainer Catatan -->

<div class="pasw-box" id="pasw1">🔐 Isi Pasw 1</div>

<div class="pasw-box" id="pasw2">🔐 Isi Pasw 2</div>

<style>.pasw-box {display:none; padding:8px;

margin:6px 0; border:1px solid #aaa;

border-radius:6px; background:#f9f9f9; }</style><!--☀-->

<script>const SECRET_PASS = "1234"; // 👉 ganti password

function togglePasw(id) {let item = document.getElementById(id);

if (item.style.display === "block") {

// kalau sudah terbuka → tutup

item.style.display = "none"; } else {

// tutup semua dulu

document.querySelectorAll(".pasw-box")

.forEach(el => el.style.display = "none");

// minta password

let pass = prompt("Masukkan password:");

if (pass === SECRET_PASS) 

{item.style.display = "block"; } else if (pass !== null) 

{alert("Password salah!"); }}}</script><!--☀☀☀-->

Catatan BerPaswoord.2

<a href="javascript:void(0)" onclick="togglePasw('pasw1')">
<span style="color: black; font-family: Righteous; font-size: 20px;">Open data</span></a>
<div class="pasw-box" id="pasw1">Test password</div>
<li><a href="javascript:void(0)" onclick="togglePasw('pasw1')">Buka Konten Rahasia</a></li>

<div class="pasw-box" id="pasw1">
<p>Selamat! Abang berhasil memasukkan password yang benar. Ini adalah konten rahasia yang Abang cari.</p></div>


<style>/* Gaya untuk kotak konten yang disembunyikan */
.pasw-box {
display: none; /* Penting! Menyembunyikan konten secara default */
padding: 8px;
margin: 6px 0;
border: 0px solid #aaa;
border-radius: 6px;
background: none;}
/* Gaya untuk pop-up overlay */
.password-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;}
.password-popup {
background: white;
padding: 20px;
border-radius: 8px;
text-align: center;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);}
.password-popup h3 {
margin-top: 0;
margin-bottom: 10px;}
.password-popup input {
width: 200px;
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
margin-bottom: 10px;}
.password-popup button {
padding: 8px 12px;
margin: 0 5px;
border: none;
border-radius: 4px;
cursor: pointer;}
.password-popup .submit-btn {
background-color: #007bff;
color: white;}
.password-popup .cancel-btn {
background-color: #6c757d;
color: white;}
.toggle-pasw-btn {background: none;
border: none;
color: #007bff;
cursor: pointer;
font-size: 14px;
margin-left: 5px; }</style>

<script>const SECRET_PASS = "1234"; // 👉 Ganti password di sini
let currentTargetId = '';
function togglePasw(id) {currentTargetId = id;
// Tutup semua kontainer berpassword yang sedang terbuka
document.querySelectorAll(".pasw-box").forEach(el => el.style.display = "none");
// Tampilkan overlay password
const overlay = document.createElement('div');
overlay.className = 'password-overlay';
overlay.id = 'password-overlay';
overlay.innerHTML = `
<div class="password-popup">
<h3>Masukkan Password</h3>
<input type="password" id="password-input">
<button id="toggle-visibility" class="toggle-pasw-btn">Lihat</button>
<div style="margin-top: 10px;">
<button class="submit-btn" onclick="checkPassword()">OK</button>
<button class="cancel-btn" onclick="closePasswordPopup()">Batal</button>
</div></div>
`; document.body.appendChild(overlay);
// Fokuskan input
document.getElementById('password-input').focus();
// Tambahkan event listener untuk tombol lihat/sembunyikan
document.getElementById('toggle-visibility').addEventListener('click', function() {
const passwordInput = document.getElementById('password-input');
const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
passwordInput.setAttribute('type', type);
this.textContent = type === 'password' ? 'Lihat' : 'sembunyikan'; });}
function checkPassword() {
const input = document.getElementById('password-input').value;
if (input === SECRET_PASS) {
document.getElementById(currentTargetId).style.display = 'block';
closePasswordPopup();} else {
alert("Password salah!");}}
function closePasswordPopup() {const overlay = document.getElementById('password-overlay');
if (overlay) {overlay.remove(); }}</script>

Kontainer-resize

<div class="kontainer-resize">
<ol>
<li>Conika</li>
<li>Perfect Liar</li>
<li>Right here waiting</li>
<li>She's Gone</li>
<li>My heart will go on</li>
<li>Always Remember Us This Way</li>
<li>Hold my hand extended</li>
<li>Kau dan sebuah hati</li>
<li>Hati yang luka</li>
<li>Es lilin</li>
<li>aNAS SAYED</li> </ol></div>

<style>.kontainer-resize { border: 1px solid #444;
padding: 10px; width: 250px; height: 300px;
/* fitur resize */
resize: both !important; overflow: auto !important;
/* biar bisa jelas digeser */
min-width: 150px; min-height: 100px;
max-width: 90%; max-height: 90vh; }</style>

26

Kontainer Fullwidth FullScreen

<!--🔴➖➖ Kontainer Fullwidth FullScreen ➖➖-->
<style>/* Reset global mempertahankan width dari tendangan padding*/
*, *::before, *::after {box-sizing: border-box; margin: 0; padding: 0; }
html, body {margin: 0; padding: 0; box-sizing: border-box;}
.fullwidth{ /*float atau tampa float */
background:transparent; /*background kontainer */
border-radius: 5px; width: 100%;
border: 0px dashed gray; /*pengaturan border */
padding: 0px; top: 0px} /*pengaturan padding disni */
/* Mobile: full lebar layar */
@media (max-width: 1000px)
{.fullwidth{width: 100vw; /*100vw fullwidth, 100% kontainer biasa*/
position: relative; left: 50%; margin-left: -50vw;}}
/* Desktop: batasi agar tidak masuk sidebar */
@media (min-width: 1025px)
{.fullwidth{width: 100%; /*pengaturan Width di dekstob */
margin-right: 0px ;/*posisi kontaine sebelah kiri */
max-width: 800px; }}/* sesuaikan dengan lebar area konten */
.konten-center {color: white; padding:0px; box-sizing: border-box;}</style><!--☀☀☀-->

Tombol Dropdown

<div class="dropdown">

<button class="dropbtn" onclick="toggleDropdown()">Menu ▼</button>
<div id="dropdownContent" class="dropdown-content">
<a href="#">1. Panas Berlebihan</a>
<a href="#">2. Suara Pecah</a>
<a href="#">3. Tidak Bisa Wi-Fi</a>
<a href="#">4. HDMI/USB Error</a></div></div>

<script>function toggleDropdown() {document.getElementById("dropdownContent").classList.toggle("show");}
// Tutup kalau klik di luar
window.onclick = function(e) {if (!e.target.matches('.dropbtn')) {
document.querySelectorAll(".dropdown-content").forEach(dd => {
dd.classList.remove("show");}); }}</script>

<style>.dropdown {position: relative; display: inline-block;}
.dropbtn { padding: 8px 16px; cursor: pointer; }
.dropdown-content { display: none; position: absolute; margin-top: 10px;
background: #fff; min-width: 200px;
border: 1px solid #555; z-index: 1000; }
.dropdown-content a { display: block; padding: 8px;
text-decoration: none; color: black; } .show { display: block; } </style>

Tombol select ( Menu )

<select id="pilihan-aksi">
<option disabled="" selected="" value="">Menu </option>
<option value="note1">1. Catatan 1</option>
<option value="note2">2. Catatan 2</option>
<option value="note3">3. Catatan 3</option>
<option value="https://example.com">4. Ke Link Example</option>
<option value="https://musafirji.blogspot.com">5. Ke Blog Musafir JI</option></select>

<!--Tombol Tutup-->
<button id="tutup-btn">🔴</button>
<!--Kontainer cattn-->
<div class="note-box" id="note1">Ini isi catatan 1</div>
<div class="note-box" id="note2">Ini isi catatan 2</div>
<div class="note-box" id="note3">Ini isi catatan 3</div>

<style>/* Gaya untuk select */
#pilihan-aksi {font-family: "Segoe UI", Arial, sans-serif; font-size: 15px; color: #333;
padding: 6px 10px; border-radius: 6px; border: 1px solid #bbb; }
/* Gaya untuk catatan */
.note-box { display: none; padding: 12px; border: 1px solid #ccc; margin: 8px 0;
border-radius: 8px; font-family: Georgia, serif;
font-size: 16px; color: #004477; background: #f8faff; }
/* Tombol Tutup */
#tutup-btn { display: none; margin: 6px 0; padding: 6px 12px;
font-size: 14px; font-family: Arial, sans-serif; color: #fff;
background: none; border: 2px solid red; border-radius: 6px;
cursor: pointer; }#tutup-btn:hover {background: none; }</style>

<script>const select = document.getElementById('pilihan-aksi');
const tutupBtn = document.getElementById('tutup-btn'); function tutupSemua()
{ document.querySelectorAll(".note-box").forEach(n => n.style.display="none");
tutupBtn.style.display = "none"; }// sembunyikan tombol tutup
select.addEventListener('change', function()
{let val = this.value; tutupSemua(); // selalu tutup dulu
if(val.startsWith("http")){ window.open(val, "_blank"); // buka link
} else {let note = document.getElementById(val); if(note)
{note.style.display = "block";
tutupBtn.style.display = "inline-block"; }}// tampilkan tombol tutup
this.value=""; });// reset kembali ke default
tutupBtn.addEventListener('click', tutupSemua);</script>

Script Catatan tersebunyi 2 Id 

dengan display tunggal

<!-- Tombol Note -->
<button onclick="toggleNote('note1','noteContainer1')">Buka Note 1</button>
<button onclick="toggleNote('note2','noteContainer1')">Buka Note 2</button>

<!-- Tombol Catt -->
<button onclick="toggleCatt('catt1','cattContainer1')">Buka Catt 1</button>
<button onclick="toggleCatt('catt2','cattContainer1')">Buka Catt 2</button>

<a onclick="toggleNote('catt1','noteContainer1')">Buka Catt 1</a>
<a onclick="toggleNote('note1','noteContainer1')">Buka Note 1</a>

<!-- Tombol OFF -->
<button onclick="closeAll()">Tutup Semua</button>


<!-- Display Tampilan -->
<div id="noteContainer1" style="border:1px solid gray; padding:10px; display:none;"></div>
<div id="cattContainer1" style="border:1px solid gray; padding:10px; display:none;"></div>

<!-- Kontainer Catatan Note -->
<div id="note1" hidden>Isi Note 1 di sini...</div>
<div id="note2" hidden>Isi Note 2 di sini...</div>

<!-- Kontainer Catatan catt-->
<div id="catt1" hidden>Isi Catt 1 (foto / teks)</div>
<div id="catt2" hidden>Isi Catt 2 (foto / teks)</div>

<!--💋Script Catatan tersebunyi 2 Id dengan display tunggal-->

<script>function toggleNote(noteId, containerId) {
// tutup semua note container
let containers = document.querySelectorAll("div[id^='noteContainer']");
containers.forEach(c => c.style.display = "none");
const container = document.getElementById(containerId);
const note = document.getElementById(noteId);
if (container && note) { container.innerHTML = note.innerHTML;
container.style.display = "block"; }}
function toggleCatt(cattId, containerId) {
// tutup semua catt container
let containers = document.querySelectorAll("div[id^='cattContainer']");
containers.forEach(c => c.style.display = "none");
const container = document.getElementById(containerId);
const catt = document.getElementById(cattId);
if (container && catt) {container.innerHTML = catt.innerHTML;
container.style.display = "block"; }}
// Tombol OFF → menutup semua note & catt
function closeAll() {let allContainers = document.querySelectorAll("div[id^='noteContainer'], div[id^='cattContainer']");
allContainers.forEach(c => c.style.display = "none");}</script>

☀Background Gambar

<div style="display: border-radius: 0px; borde: 0px solid gray; margin: 40px auto; max-width: 800px; overflow: hidden; position: relative;"><div style="background image: url( photo); background-position: 50% 50%; background-repeat: no-repeat; background-size: cover; height: 100%; left: 0px; opacity: 1; position: absolute; top: 0px; width: 100%; z-index: 0;"></div><div style="height: 500px; padding: 10px; position: relative; z-index: 1;">  

☀Catatan tersembunyi dengan id catt<style>.catt-box {display: none; padding: 8px; margin: 6px 0;
border: 1px solid #aaa; border-radius: 8px;
background: #f9f9f9; }</style>
<script>function toggleCatt(id) {let el = document.getElementById(id);
if (el.style.display === "block") {el.style.display = "none"; return; }
document.querySelectorAll(".catt-box")
.forEach(c => c.style.display = "none");
el.style.display = "block"; }</script>

<!--🔑 Contoh tombol & isi -->
<button onclick="toggleCatt('catt1')">Catt 1</button>
<button onclick="toggleCatt('catt2')">Catt 2</button>
<button onclick="toggleCatt('catt3')">Catt 3</button>

<div class="catt-box" id="catt1">Isi Catt 1</div>
<div class="catt-box" id="catt2">Isi Catt 2</div>
<div class="catt-box" id="catt3">Isi Catt 3</div>
<ul>
<li><a class="catt-link" onclick="toggleCatt('catt1')">Catt 1</a></li>
<li><a class="catt-link" onclick="toggleCatt('catt2')">Catt 2</a></li>
<li><a class="catt-link" onclick="toggleCatt('catt3')">Catt 3</a></li></ul>

☀Catatan tersembunyi dengan 2 id

Id Note dan Id catt

1. Note membuka dirinya dan menutup yang lain dan bisa memnutup dirinya sendiri

2. Catt bisa membuka dirinya tidak menutup yang lain dan bisa menutup dirinya

3. Kalau klik Catt 1 & Catt 2, keduanya bisa terbuka bersamaan.

4. Kalau klik Note 1, dia terbuka → kalau klik Note 2, maka Note 1 otomatis tertutup.

5. Semua bisa ditutup dengan klik tombol OFF 🔴☀

Tombol text
<a href="javascript:void(0);" onclick="toggleNote('note4')"> Note 5</a>
Tombol kotak
<!--id note-->
<button onclick="toggleNote('note4')">Note4</button>
<!--id catt-->
<button onclick="toggleCatt('catt4')">Catt 4</button>

<!--Tombol OFF-->
<button onclick="closeAll()">OFF 🔴</button>

Container catatan terlihat di komposit

• <div contenteditable="false" hidden="" id="note51"></div>
• <div contenteditable="true" hidden="" id="catt4"><p>letakkan konten disini</p></div>
• <div class="kontainer-lembut1" contenteditable="true" hidden="" id="note4"><p>letakkan konten disini</p></div>

<!--💋Script Pesan tersembunyi dengan 2 id dan tombol off-->
<script>function toggleNote(id)
{let notes = document.querySelectorAll("div[id^='note']");
let note = document.getElementById(id);
// cek kalau dia sudah terbuka → tutup
if (note.style.display === "block") {note.style.display = "none"; } else
{notes.forEach(n => n.style.display = "none"); // tutup semua Note
note.style.display = "block"; }}// buka Note terpilih
function toggleCatt(id)
{let catts = document.querySelectorAll("div[id^='catt']");
let catt = document.getElementById(id);
if (catt.style.display === "block") {catt.style.display = "none";} else
{catts.forEach(c => c.style.display = "none"); // tutup semua Catt
catt.style.display = "block"; }}// buka Catt terpilih
// tombol OFF untuk menutup semua
function closeAll() {let notes = document.querySelectorAll("div[id^='note']");
let catts = document.querySelectorAll("div[id^='catt']");
notes.forEach(n => n.style.display = "none");
catts.forEach(c => c.style.display = "none"); }</script><!--☀☀☀-->