jQuery/ASP.NET을 사용하여 이미지 (runat 서버) Src 업데이트

jQuery를 사용하여 이미지의 소스를 업데이트하려고합니다. 문제는 img가 초기 소스가로드 될 때 서버 측을 실행하고 있다는 것입니다. 아래jQuery/ASP.NET을 사용하여 이미지 (runat 서버) Src 업데이트

사용되는 샘플 jQuery 코드를 찾을 수 있습니다

<h2><asp:Label ID="lblTitle" runat="server" /></h2> 
<img id="largeImg" runat="server" width="320" alt="Large Image" /> 
<p class="thumbs"> 
<a id="imgBACK" runat="server" title="Back"><img id="imgBACK_Thumb" runat="server" /></a> 
<a id="imgFRONT" runat="server" title="Front"><img id="imgFRONT_Thumb" runat="server" /></a> 
<a id="imgINSIDELEFT" runat="server" title="Inside Left"><img id="imgINSIDELEFT_Thumb" runat="server" /></a> 
<a id="imgINSIDERIGHT" runat="server" title="Inside Right"><img id="imgINSIDERIGHT_Thumb" runat="server" /></a> 
</p>

here 나 :

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Image Replacement</title> 
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
     $("h2").append('<em></em>') 
    $(".thumbs a").click(function(){ 

     var largePath = $(this).attr("href"); 
     var largeAlt = $(this).attr("title"); 

     $("#largeImg").attr({ src: largePath, alt: largeAlt }); 

     $("h2 em").html(" (" + largeAlt + ")"); return false; 
    }); 
}); 
</script> 
<style type="text/css"> 
body { 
    margin: 20px auto; 
    padding: 0; 
    width: 580px; 
    font: 75%/120% Arial, Helvetica, sans-serif; 
} 
h2 { 
    font: bold 190%/100% Arial, Helvetica, sans-serif; 
    margin: 0 0 .2em; 
} 
h2 em { 
    font: normal 80%/100% Arial, Helvetica, sans-serif; 
    color: #999999; 
} 
#largeImg { 
    border: solid 1px #ccc; 
    width: 550px; 
    height: 400px; 
    padding: 5px; 
} 
.thumbs img { 
    border: solid 1px #ccc; 
    width: 100px; 
    height: 100px; 
    padding: 4px; 
} 
.thumbs img:hover { 
    border-color: #FF9900; 
} 
</style> 
</head> 
<body> 
<h2>Illustrations</h2> 
<p><img id="largeImg" src="images/img1-lg.jpg" alt="Large image" /></p> 
<p class="thumbs"> 
    <a href="images/img2-lg.jpg" title="Image 2"><img src="images/img2-thumb.jpg" /></a> 
    <a href="images/img3-lg.jpg" title="Image 3"><img src="images/img3-thumb.jpg" /></a> 
    <a href="images/img4-lg.jpg" title="Image 4"><img src="images/img4-thumb.jpg" /></a> 
    <a href="images/img5-lg.jpg" title="Image 5"><img src="images/img5-thumb.jpg" /></a> 
    <a href="images/img6-lg.jpg" title="Image 6"><img src="images/img6-thumb.jpg" /></a> 
</p> 
</body> 
</html>

는 현재 모든 이미지 소스가 부하에서 완벽 (작은 여기

는 ASPX/HTML입니다 큰 이미지는 코드 숨김을 통해로드됩니다). 그러나 엄지 손톱을 클릭해도 서버 측에서 실행되므로 큰 이미지는 변경되지 않습니다.

해결 방법에 대한 의견이 있으십니까?

미리 감사드립니다. 너무 많은 시간 동안 내 머리를 벽에 치고 난 후 마침내 수건을 던지고 있습니다 (적어도 몇 시간 동안).

감사합니다.

-Adam

출처

2009-12-09 Adam

이 두 지점 외에, 작동합니다 :

이미지의 src 클라이언트 측에서 변경 될 수 있지만, 이후 서버 측에서 그것을 볼 것으로 예상하지 않는다 다시 게시. 이미지는 게시되지 않으며 입력 필드 만 표시됩니다.
귀하의 img는 runat="server"입니다 - (이 루트 수준에 예를 들어, 아니 마스터 페이지, 패널, 중계기 등의 경우 제외)이 페이지의 id 변화를 의미한다. 당신은 아주 못생긴 어느
```
$('#<%=largeImg.ClientID%>') 
```
를 사용하거나 클래스를 추가하고 선택에 그것을 사용할 필요가 :
```
<img id="largeImg" runat="server" width="320" alt="Large Image" 
    CssClass="LargeImage" /> 

$(".LargeImage").attr({ src: largePath, alt: largeAlt }); 
```

출처

2009-12-09 07:34:27 Kobi

당신은 내 밤을했다! 얼마나 고마워요? – Adam

문제 없습니다. StackOverflow에 오신 것을 환영합니다, 우리가하는 일입니다 :) – Kobi

jQuery/ASP.NET을 사용하여 이미지 (runat 서버) Src 업데이트

답변

관련 문제