Custom Navigator

A Custom navigator template that i use for my blog. Create map here Free Online Image Map Generator to visualize the position of the overlay and then edit the html using the code bellow :

<div class="thesis-map-wrapper">
    <div class="thesis-map-container">
        <img src="https://satwika.my.id/wp-content/uploads/2026/04/003_RESEARCH-METHOD.drawio.png" usemap="#image-map" class="thesis-map-image">
        
        <!-- SATU UNIT: Trigger, Overlay, dan Widget -->
        <div class="node-wrapper lit-study-pos">
            <!-- Link transparan seukuran kotak (Pemicu Utama) -->
            <a href="https://satwika.my.id/2026/04/17/thesis-ii-literature-study/" class="area-trigger"></a>
            
            <!-- Kotak Kuning -->
            <div class="hover-overlay"></div>

            <!-- Widget -->
            <div class="hallo-widget">
                <div class="widget-inner">
                    <img src="https://satwika.my.id/wp-content/uploads/2026/04/003_RESEARCH-METHOD.drawio.png" class="widget-img">
                    <div class="widget-text">
                        <strong>Literature Study</strong>
                        <span>Click to proceed to Thesis Summary II</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<map name="image-map">
    <area target="" alt="Literature Study" href="https://satwika.my.id/2026/04/17/thesis-ii-literature-study/" coords="9,87,125,149" shape="rect">
</map>

<script src="https://cdnjs.cloudflare.com/ajax/libs/image-map-resizer/1.0.10/js/imageMapResizer.min.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        imageMapResizer();
    });
</script>

<style>
    .thesis-map-wrapper {
        display: flex;
        justify-content: center;
        width: 100%;
        margin: 40px 0;
    }

    .thesis-map-container {
        position: relative;
        display: inline-block;
        width: 20%; 
        min-width: 150px; 
    }

    .thesis-map-image {
        display: block;
        width: 100%;
        height: auto;
    }

    /* Posisi Node Wrapper (Bungkus semua elemen interaktif) */
    .node-wrapper {
        position: absolute;
        z-index: 10;
    }

    /* Koordinat Persentase Literature Study */
    .lit-study-pos {
        top: 9.11%;
        left: 6.76%;
        width: 87.21%;
        height: 6.49%;
    }

    /* Link Transparan (Area Klik yang sebenernya) */
    .area-trigger {
        display: block;
        width: 100%;
        height: 100%;
        cursor: pointer;
        z-index: 15;
        position: relative;
    }

    /* Kotak Kuning */
    .hover-overlay {
        position: absolute;
        top: 0; left: 0; width: 100%; height: 100%;
        background-color: rgba(255, 255, 0, 0.4);
        border: 2px solid yellow;
        border-radius: 4px;
        opacity: 0;
        transition: opacity 0.3s;
        z-index: 5;
        pointer-events: none;
    }

    /* Widget */
    .hallo-widget {
        position: absolute;
        top: 0;
        left: 115%; /* Di samping kanan */
        background: white;
        border-radius: 8px;
        box-shadow: 0 10px 20px rgba(0,0,0,0.15);
        border-left: 5px solid #ffcc00;
        padding: 8px;
        width: 180px;
        opacity: 0;
        transform: translateY(10px);
        transition: all 0.3s ease;
        z-index: 20;
        pointer-events: none;
    }

    /* Panah Widget */
    .hallo-widget::before {
        content: "";
        position: absolute;
        left: -12px; top: 15px;
        border-width: 6px;
        border-style: solid;
        border-color: transparent white transparent transparent;
    }

    /* --- HOVER LOGIC --- */
    /* Saat kursor masuk ke node-wrapper, nyalakan kuning & widget */
    .node-wrapper:hover .hover-overlay {
        opacity: 1;
        animation: blinkAnimation 0.8s infinite;
    }

    .node-wrapper:hover .hallo-widget {
        opacity: 1;
        transform: translateY(0);
    }

    .widget-inner { display: flex; align-items: center; gap: 10px; }
    .widget-img { width: 40px !important; height: 40px !important; object-fit: cover; border-radius: 4px; }
    .widget-text { display: flex; flex-direction: column; font-size: 11px; line-height: 1.2; color: #333; }

    @keyframes blinkAnimation {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.1; }
    }
</style>