마포노인종합복지관

조직도 상단 HTML 수정

조직도 상단에 표시될 HTML을 직접 편집합니다

<style>/* 레이어드 이미지 + 페이드 */
.img-stack{position:relative;width:100%;height:auto}
.img-stack .base{display:block;width:100%;height:auto;position:relative;z-index:0}
.img-stack .layer{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .25s ease;z-index:1}
.img-stack .layer.show{opacity:1}
/* 뷰어 공통 */
.orgmap-view-svg{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:2;pointer-events:auto;preserveAspectRatio:none}
.orgmap-view-svg .hotspot{
  fill:transparent!important; 
  stroke:transparent!important; 
  pointer-events:auto!important; 
  cursor:pointer!important; 
  outline:none;
  vector-effect:non-scaling-stroke;
  transition:fill .12s, stroke .12s, opacity .12s;
}
.orgmap-view-svg .hotspot:hover{
  fill:transparent!important; 
  stroke:transparent!important; 
  stroke-width:0!important;
}
.orgmap-view-svg .hotspot:focus-visible{
  stroke:transparent!important; 
  stroke-width:0!important; 
  fill:transparent!important;
}
.orgmap-view-svg .hotspot.is-active{
  stroke:none!important; 
  stroke-width:0px!important; 
  fill:transparent!important;
}
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}</style>

<div class="wg_wrap" data-map='{"imgs_pc":["/_img/img/MPB/org_0.png","/_img/img/MPB/org_1.png","/_img/img/MPB/org_2.png","/_img/img/MPB/org_3.png","/_img/img/MPB/org_4.png","/_img/img/MPB/org_5.png","/_img/img/MPB/org_6.png","/_img/img/MPB/org_7.png","/_img/img/MPB/org_8.png","/_img/img/MPB/org_9.png","/_img/img/MPB/org_10.png","/_img/img/MPB/org_0.png"],"imgs_mo":["/_img/img/MPB/org_m_0.png","/_img/img/MPB/org_m_1.png","/_img/img/MPB/org_m_2.png","/_img/img/MPB/org_m_3.png","/_img/img/MPB/org_m_4.png","/_img/img/MPB/org_m_5.png","/_img/img/MPB/org_m_6.png","/_img/img/MPB/org_m_7.png","/_img/img/MPB/org_m_8.png","/_img/img/MPB/org_m_9.png","/_img/img/MPB/org_m_10.png","/_img/img/MPB/org_m_0.png"],"shapes":[{"id":"S1756638062097","type":"rect","title":"","org_path":"","level":1,"parent_id":null,"css_class":"","css_style":"","action":"board","link_url":"","link_target":"_self","board_key":"과장","board_name":"과장","hover_idx":3,"pc":{"points":[[41.62646358480553,58.3583869669161],[58.19910268453729,66.91369641814413]]},"mo":{"points":[[0.8824934540300191,51.38730427852489],[98.45603038169816,58.271921281190885]]}},{"id":"S1756638070765","type":"rect","title":"","org_path":"","level":1,"parent_id":null,"css_class":"","css_style":"","action":"board","link_url":"","link_target":"_self","board_key":"과장","board_name":"과장","hover_idx":4,"pc":{"points":[[74.44180806986832,57.466415540678284],[91.73313082603325,67.86109651756229]]},"mo":{"points":[[0.8147368043723411,75.30519677182824],[98.06256600975979,82.27967765089629]]}},{"id":"S1756642791340","type":"rect","title":"","org_path":"","level":1,"parent_id":null,"css_class":"","css_style":"","action":"board","link_url":"","link_target":"_self","board_key":"과장","board_name":"과장","hover_idx":2,"pc":{"points":[[8.486018216537282,57.36006326587702],[26.092737682853212,67.6101929020769]]},"mo":{"points":[[0,28.31960634507655],[98.57411898318065,33.75872108066145]]}},{"id":"S1756687479224","type":"rect","title":"","org_path":"","level":1,"parent_id":null,"css_class":"","css_style":"","action":"board","link_url":"","link_target":"_self","board_key":"병설마포데이케어센터","board_name":"병설마포데이케어센터","hover_idx":5,"pc":{"points":[[0.4133195540186261,79.51524163505363],[16.522427610364403,90.93845094975573]]},"mo":{"points":[[0.9115157056082452,35.58542464205466],[98.170176070243,41.371614691310576]]}},{"id":"S1756687487122","type":"rect","title":"","org_path":"","level":1,"parent_id":null,"css_class":"","css_style":"","action":"board","link_url":"","link_target":"_self","board_key":"참여복지팀","board_name":"참여복지팀","hover_idx":6,"pc":{"points":[[16.927069877505744,79.94218822493929],[33.096149242872386,90.73691783111815]]},"mo":{"points":[[0,42.87170962038191],[98.42693986743807,48.94577785991068]]}},{"id":"S1756687491523","type":"rect","title":"","org_path":"","level":1,"parent_id":null,"css_class":"","css_style":"","action":"board","link_url":"","link_target":"_self","board_key":"배움복지팀","board_name":"배움복지팀","hover_idx":7,"pc":{"points":[[33.5008265895268,80.42363319096094],[49.68261299448372,91.01034786850796]]},"mo":{"points":[[0.9625965097376294,59.26053075280119],[97.9784671859301,64.95923106654763]]}},{"id":"S1756687495948","type":"rect","title":"","org_path":"","level":1,"parent_id":null,"css_class":"","css_style":"","action":"board","link_url":"","link_target":"_self","board_key":"건강복지팀","board_name":"건강복지팀","hover_idx":8,"pc":{"points":[[49.94285515716938,79.65287348871483],[66.524299490106,91.31582448623126]]},"mo":{"points":[[0.9132667287404459,66.2714792937737],[97.9838358650982,72.10832333961127]]}},{"id":"S1756687500366","type":"rect","title":"","org_path":"","level":1,"parent_id":null,"css_class":"","css_style":"","action":"board","link_url":"","link_target":"_self","board_key":"지역복지협력팀","board_name":"지역복지협력팀","hover_idx":9,"pc":{"points":[[66.85531246918103,79.72596442509757],[83.05908974501382,91.54637649763926]]},"mo":{"points":[[0.9406596770375835,83.26632730020125],[99.00465910496413,89.08970632372028]]}},{"id":"S1757256478270","type":"rect","title":"","org_path":"","level":1,"parent_id":null,"css_class":"","css_style":"","action":"board","link_url":"","link_target":"_self","board_key":"관장","board_name":"관장","hover_idx":1,"pc":{"points":[[39.67760079538801,0.7707627700163986],[60.20586889635853,12.646155220586227]]},"mo":{"points":[[18.931071297342534,0.6709874150689981],[80.37255245184748,7.574734970292179]]}},{"id":"S1766376418889","type":"rect","title":"","org_path":"","level":1,"parent_id":null,"css_class":"","css_style":"","action":"board","link_url":"","link_target":"_self","board_key":"행정복지팀","board_name":"행정복지팀","hover_idx":10,"pc":{"points":[[83.62456005833663,79.64739380066047],[99.52882416868258,91.6223138867662]]},"mo":{"points":[[1.4485742379340678,90.73133161232472],[97.76958489089839,96.3227972394591]]}}]}'>
  <div class="img-stack"></div>
  <svg class="orgmap-view-svg" viewBox="0 0 1000 1000" preserveAspectRatio="none"></svg>
  <h2 class="visually-hidden" id="orgmapHeading">조직도 영역 링크 목록</h2>
</div>
<script>(function(){
  var root=document.currentScript.previousElementSibling;
  var cfg=JSON.parse(root.getAttribute('data-map'));
  var svg=root.querySelector('svg');
  var stack=root.querySelector('.img-stack');

function v(){return window.matchMedia('(max-width:768px)').matches?'mo':'pc';}
  function se(t,a){var e=document.createElementNS('http://www.w3.org/2000/svg',t); for(var k in a)e.setAttribute(k,a[k]); return e;}

// ★ 클릭 고정(토글)
  var stickyIdx = null;

function buildImages(){
    stack.innerHTML='';
    var imgs = (v()==='mo') ? (cfg.imgs_mo||[]) : (cfg.imgs_pc||[]);
    if(!imgs || !imgs.length) return;
    var base = document.createElement('img'); base.className='base'; base.alt='조직도'; base.src= imgs[0]||''; stack.appendChild(base);
    for(var i=1;i<imgs.length;i++){
      var im=document.createElement('img'); im.className='layer'; im.dataset.idx=String(i); im.alt='map_img_'+String(i).padStart(2,'0'); im.src=imgs[i]||''; stack.appendChild(im);
    }
    stickyIdx = null;
  }

function enhance(el,s){
    el.setAttribute('tabindex','0'); el.setAttribute('role','link'); el.style.cursor='pointer';
    el.classList.add('hotspot','hotspot--'+(s.id||'shape'));
    if(s.css_class) el.classList.add(s.css_class);
    if(s.css_style) el.setAttribute('data-style', s.css_style);

var hoverIdx = (typeof s.hover_idx==='number') ? s.hover_idx : null;
    function on(){ if(hoverIdx!=null) showLayer(hoverIdx); }
    function off(){ if(stickyIdx==null) showLayer(null); }

el.addEventListener('mouseenter', on);
    el.addEventListener('mouseleave', off);
    el.addEventListener('focus', on);
    el.addEventListener('blur', off);
    el.addEventListener('touchstart', function(){ on(); setTimeout(off, 800); }, {passive:true});

// ★ 클릭 고정(토글) + 원래 액션
    el.addEventListener('click', function(){
      if(hoverIdx!=null){
        stickyIdx = (stickyIdx===hoverIdx) ? null : hoverIdx;
        applyLayerVisibility(stickyIdx!=null ? stickyIdx : hoverIdx);
      }
      if(s.action==='link' && s.link_url){
        window.open(s.link_url, s.link_target||'_self');
      }else{
        this.dataset.key = s.board_key||''; this.dataset.name = s.board_name||s.title||s.board_key||'';
        try{
          if(typeof getAllPersons==='function' && typeof renderTable==='function'){
            var people=getAllPersons(this.dataset.key)||[]; renderTable(people, this.dataset.name||this.dataset.key);
          } else { alert('[board] '+(this.dataset.name||this.dataset.key||'선택됨')); }
        }catch(e){ console.error(e); }
      }
    });
  }

function render(){
    buildImages();
    svg.innerHTML='';
    var vv = (v()==='mo') ? 'mo' : 'pc';
    (cfg.shapes||[]).forEach(function(s){ add(svg,s,vv); });
  }

render(); window.addEventListener('resize', render);

// 배경 클릭/ESC로 고정 해제
  root.addEventListener('click', function(e){
    if(!e.target.closest('.hotspot')) clearSticky();
  });
  document.addEventListener('keydown', function(e){
    if(e.key==='Escape') clearSticky();
  });
})();</script>

테이블 컬럼 설정

드래그로 순서 변경, 체크박스로 출력 여부, 정렬 및 너비 설정

모바일 가로비율 미입력시 기본 600px

기관안내

조직도

조직도 상단 HTML 수정

테이블 컬럼 설정

안전보건경영방침