'자바스크립트 마우스오버'에 해당하는 글 1건

JavaScript :: mouseover (마우스오버)

ASP.NET MVC/JavaScript 2017. 1. 13. 15:57

기준 프로젝트화면  : http://moonna.tistory.com/18


이전에 작업은 그리드 로우 클릭시 결과값을 그래프로 보여주는 것까지 완성을 하였다 


결과



밑에 결과 그리드에 들어가있는 내용은 




그리드 안의 이미지 컬럼에 마우스를 가져가면 컬럼안의 이미지 주소값을 이용해 마우스 위치에 


이미지를 보여주는 걸 만들어볼까 합니다


HTML

1
2
3
4
5
6
7
    <ag-grid-ng2 #agGrid2 style="width: 100%; height: 200px;" class="ag-fresh"
                 [gridOptions]="gridOptions2"
                  on-mouseover='overimage($event)'
                   on-mousemove='overimagemove($event)'
                  on-mouseout='overimageout($event)'
                 enableColResize>   
    </ag-grid-ng2>
cs


해당 그리드에 on-mouseover , on-mousemove, on-mouseout 이벤트를 걸어주었습니다 



on-mouseover : 마우스 오버시 발생하는 이벤트 


on-mousemove : 마우스 이동시 발생하는 이벤트


on-mouseout : 마우스 포커스 아웃할때 발생하는 이벤트



이벤트 생성을 해준후 그리드 이미지컬럼에 마우스 오버시 이미지 컬럼의 값을 가져와보겠습니다 


우선 마우스 오버시 어떤값들을 가져오는지 확인을해보면 ..




해당 마우스 좌표값들을 가져 올수 있습니다


이 좌표들을 이용해서 마우스 위치를 기준으로 이미지를 보여주면 될거같습니다 


이후 이미지컬럼의 내용을 가져와보면 




이미지컬럼안의 값은 fromElement 라는 요소 안의 있는걸로 확인이되네요 


자세히 들여다 보면 




innerHTML이 보이실겁니다 HTML 안에있는 값을 나타냅니다 


이미지컬럼의 이미지주소를 가져오면 될거같습니다 




TS(TypeScript)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 overimage(event : any ){
    if(event.fromElement.innerText.slice(0,8) == 'https://')
    {           
        var divTop = event.clientY - 20 + 'px'; //상단 좌표
        var divLeft =event.clientX + 10 + 'px'; //좌측 좌표
        document.getElementById("imgViewer").setAttribute('src',event.fromElement.innerText);
        document.getElementById("imgViewer").setAttribute('style','z-index:1; position: absolute; top :'+divTop+';left : '+divLeft+';width: 150px; display:block;')
        console.log(event)
    }
 }
overimagemove(event : any ){
        var divTop = event.clientY - 20 + 'px'; //상단 좌표
        var divLeft =event.clientX + 10 + 'px'; //좌측 좌표
        document.getElementById("imgViewer").setAttribute('style','z-index :1; position: absolute; top :'+divTop+';left : '+divLeft+';width: 150px; display:block;')
}
 overimageout(event : any ){
         document.getElementById("imgViewer").setAttribute('style','display:none;')
}
 
cs


if 문 조건은 그리드 아무곳에나 마우스오버시 이미지가 보여주면 안되어서 걸어준겁니다 


z-index 는 레이어들의 쌓임순서(배치순서) 를 정해줄수있습니다  이걸해주는이유는 그리드데이터가 이미지보다 먼저 배치가될경우


이미지가 그리드에 가려지는 경우가 발생하기때문입니다.


아래 이미지를 참고하시면 이해가 빠르실겁니다



position : absolute  는 문서의 원래위치와 상관없이  위치를 조정할수있기때문에  지금만드려는 마우스 위치를 기준으로 이미지를


보여주려하기때문에 위치값을 absoulte 를 주었습니다 





실행결과









'ASP.NET MVC > JavaScript' 카테고리의 다른 글

JavaScript :: 한글만 추출하는 정규식  (0) 2017.03.09
JavaScript :: array 특정요소 삭제  (0) 2017.02.08
JavaScript :: async.forEachOf  (0) 2017.02.01
JavaScript :: callbackhell(콜백헬)  (0) 2017.01.07
JavaScript ::GetDate (날짜)  (0) 2017.01.06
WRITTEN BY
내가달이다
,