怎样点击改变图像的背景？

Question

目的就是点击小图显示大图。  function imgsrc(idd)
            {
             //document.all("ShowImg").innerHTML="<img Src='"+idd.src+"'>" 
            //document.getElementById('ShowImg').src=document.getElementById(idd).src;
 //document.getElementById('ShowImg').style.backgroundImage=document.getElementById(idd).style.backgroundImage;            }
<div id="imgbottom" style="width:96%; height:500px; float:left; border:3px solid #dddddd; margin:0 auto;">
             <img id="ShowImg" src="" style="border-width:0px;" />
          
          </div>
       <div id="imgtop" style="width:96%; height:auto; float:left; border:3px solid #dddddd;margin:0 auto; margin-top:2px;">
         <ul >
                
    <li  style="  list-style-type:none; float:left; margin-left:2px"><img   style=" width:50px; height:50px" onclick="imgsrc(this)" src="picture/phone/000317116.jpg" alt="" title="沃尔特"></li>
                        
     <li  style="  list-style-type:none; float:left; margin-left:2px"><img   style=" width:50px; height:50px" onclick="imgsrc(this)" src="picture/phone/000317115.jpg" alt="" title="沃尔特"></li>
                        
    <li  style="  list-style-type:none; float:left; margin-left:2px"><img   style=" width:50px; height:50px" onclick="imgsrc(this)" src="picture/phone/000317111.jpg" alt="" title="沃尔特"></li>
                        
    <li  style="  list-style-type:none; float:left; margin-left:2px"><img   style=" width:50px; height:50px" onclick="imgsrc(this)" src="picture/phone/000598961.jpg" alt="" title="威尔"></li>
                         
         </ul>
          </div>

Answer 1

<script src="http://ajax.Microsoft.com/ajax/jQuery/jquery-1.3.2.min.js" type="text/javascript"> </script> 
<script>
$().ready(function(){
    for(var i=1;i<3;i++){
        $("#sample_smallimg" + i).click(
            function(event){
                var image = $(event.target).attr("src");
                alert(image);
                $("#sample_bigimg img").attr("src",image);
            }
        );
    }
});
</script>
<div id="sample_bigimg"> <img src="aubergine.jpg" width="120px" height="120px;" /> </div> 
<div> <img src="palomino.jpg" width="50px" height="50px" id="sample_smallimg1" /> </div> 

Answer 2

http://topic.csdn.net/u/20091207/13/3866d91f-d1c0-4535-90c3-62ea7f6a2c97.html

Answer 3

img 没有ID的。如果设置了ID，经过repeater生成后，他的ID全部都是一样

Answer 4

document.getElementById('ShowImg').src= $('img',this).src
想获取当前img的src。但是这样没效果

Answer 5

(function() {
    var imgs=document.getElementById("<%= Repeater1.ClientID %>").getElementsByTagName("img");//如果rep中还有其它图片，只能指定name用byname来查找
    var len=imgs.length;
    for(var i=0;i<len;i++) {
        imgs[i].onclick=function() {
            document.getElementById('ShowImg').src=this.src;
        }
    }
}

Answer 6

 function imgsrc(idd)
            {
            document.getElementById('ShowImg').src=idd;
            }<img  onclick="imgsrc(this.src)"   id="imgt" style=" width:50px; height:50px"  src="<%# Eval("imagesurl").ToString() %>" alt="" title="<%#Eval("ImagesDesc").ToString() %>">这样也行。唉

Answer 7

不能传this ，传this.src才行