마우스 클릭 이벤트를 통해 동적으로 이미지 변경

목표

특정 이미지를 클릭하면 다른 이미지로 변경되고 다시 클릭하면 원래 이미지로 돌아오는 토글 형식의 이벤트를 구현, 단 해당 컨트롤은 서버쪽에서도 접근 가능해야 함


준비
이미지 컨트롤은 asp .net의 이미지 컨트롤을 사용하지 않고 html 컨트롤을 사용한다. 적당한 위치에 이미니 컨트롤을 추가

<span style="cursor:hand" onclick="return Test_Change_Img('Test_Img');">       
        <img src = "img/small-sphere-green.bmp" runat="server" alt="" id= "Test_Img" name = "Test_Img" style="border-width: 0" enableviewstate="false" /></span>

초기 이미지는 img 폴더의 small-sphere-green.bmp 로 설정하였다.


구현

함수를 호출하는 곳에서 해당 이미지의 이름을 함께 넘겨준다. 함수 구현부에서는 컨트롤 이름을 통해 이미지의 url을 알아내고 해당 url을 비교하여 토글링에 이용한다.

주의 : 이미지 src에는 full url이 들어가 있다 따라서 이미지 파일 이름만 얻어오기 위해 몇가지 string 관련 함수를 이용하였다.

function Test_Change_Img(){   
    var str = document[Test_Change_Img.arguments[0]].src;   
    var str_index = str.^[각주:1]lastIndexOf("/");
    var img_src_str = str.^[각주:2]slice(str_index+1, str.length);    
   
    if(img_src_str == "small-sphere-red.bmp"){
        document[Test_Change_Img.arguments[0]].src = "img/small-sphere-green.bmp";
    }else{
        document[Test_Change_Img.arguments[0]].src = "img/small-sphere-red.bmp";
    }   
}

비하인드 코드(*.cs)에서는 다음과 같이 이미지 컨트롤에 접근할 수 있다.

Test_Img.Src = "img/small-sphere-red.bmp";

1. 매개변수 스트링이 나타나는 마지막 위치 인덱스 반환 [본문으로]
2. 문자열의 특정 위치부터 특정 위치까지를 반환 [본문으로]