JavaScript :: mouseover (마우스오버)

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

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

결과

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

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

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

HTML

    <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>

 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;')
}
 

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

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

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

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

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

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

실행결과