동적으로 생성 된 ASP.NET 이미지 컨트롤을 변경하기 위해 javascript 사용

Question

동적으로 (DB에서 읽음) 만들어야하는 ASP.NET (C#, VS2010) 웹 응용 프로그램에서 테이블을 만들었습니다. 이미지가 있습니다. (코드 숨김 파일에서) 동적으로 생성되는 각 행에서 마우스로 해당 이미지를 어떻게 바꿀 수 있습니까? 정적으로 생성 된 컨트롤에 작은 JavaScript 함수를 사용하는 것은 쉽지만 동적으로 생성 된 컨트롤에 대해서는 어떻게 수행 할 수 있습니까? 인라인 JS 함수를 사용할 수 있습니까? 어떻게 구현해야합니까?

감사

Answer 1

자신의 CssClass 속성을 사용하여 동적으로 생성 한 이미지를 클래스를 보내기, jQuery를에 그런

<img src="image.jpg" class="change-on-hover" 
    data-alternative-image="image-over.jpg" /> 

당신이이 같은 각각의 이미지를 렌더링

// Dynamically create the image control in code behind 
Image image = new Image(); 
Image.CssClass = "change-on-hover"; 
Image.ImageUrl = "image.jpg"; // Of course, this is dynamic from the database 

// Save the alternative image URL in a data-attribute 
Image.Attributes["data-alternate-image"] = "image-over.jpg"; 

parent.Controls.Add(image); 

을 이 클래스를 사용하여 모든 이미지를 찾을 수 있습니다.

$("img.change-on-hover") 
    .on("mouseover", function(e) { 
    // Save original src (image.jpg) 
    $(this).data("original-image") = this.src; 

    // Change src to alternative (image-over.jpg) 
    this.src = $(this).data("data-alternate-image"); 
    }) 
    .on("mouseout", function(e) { 
    // Change src back to original 
    this.src = $(this).data("original-image"); 
    }); 

data-alternative-image 속성은 이미지 태그 안에있는 정보를 코드 뒤에 저장하여 나중에 JavaScript 이벤트 핸들러에서 읽을 수있는 좋은 방법입니다. 자신 만의 데이터 속성을 원하는 방식으로 만들 수 있습니다.

데이터-속성에 대한 몇 가지 추가 정보를 원하시면 : http://ejohn.org/blog/html-5-data-attributes/