Haroop Webagency team BICTOR

원격 및 파견 개발팀분들을 위한 하룹소속 개발자전용 빅터 오픈소스 커뮤니티입니다

이곳은 하룹 개발팀 소속 직원들에 전체 개발기술력 및 전체 평균 능력치 강화를 위한, 빅터팀 리드개발자들에 오픈소스 개발 커뮤니티 공간입니다, 만약 고객이시라면 여기를 이용해주세요.

제목
마우스 특정위치 지정 클릭시 출력방식 컨트롤
작성자
제이
작성일
2022-05-10 10:20
조회
202
답변완료
안녕하세요 마우스 특정위치 지정 클릭시 출력부분에서 기본 pug구조는 아래와 같습니다.

main
.container
.media
figure
img
.hotspots
.hotspot
.trigger
.content
figure
img
.hotspot
.trigger
.content
figure
img
.hotspot
.trigger
.content
figure
img

여기서 언제나 툴팁이 떠버리는게 기본인거같은데
툴팁이 아닌, 아예 특정 이미지가 로드되게끔 하려면 어떻게 해야하나요?
전체 1

  • 2022-05-10 21:32

    클릭이벤트와 트리거 그리고 핫스팟개념을 조금만 이해하셔도
    어렵지않게 개발이 가능하실거같습니다.
    아래 소스를 참고하시면 도움이 되실거같습니다.
    감사합니다.

    let clickEvent = ('ontouchstart' in window ? 'touchend' : 'click')

    let triggers = document.querySelectorAll( '.trigger' )
    let hotspots = document.querySelectorAll( '.hotspot' )

    for ( let trigger of triggers ) {
    trigger.addEventListener( clickEvent, function( event ) {
    event.stopPropagation()
    this.parentNode.classList.add( 'reveal' )
    } )
    }

    for ( let hotspot of hotspots ) {
    hotspot.addEventListener( clickEvent, function() {
    for ( let hotspot of hotspots ) {
    hotspot.classList.remove( 'reveal' )
    }
    } )
    }

    document.body.addEventListener( clickEvent, function() {
    for ( let hotspot of hotspots ) {
    hotspot.classList.remove( 'reveal' )
    }
    } )