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

zzxap 2009-12-07 03:55:16

[code=HTML]
目的就是点击小图显示大图。

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>

[/CODE]

...全文

177 8 打赏收藏转发到动态举报

写回复

用AI写文章

8 条回复

切换为时间正序

请发表友善的回复…

发表回复

zzxap 2009-12-07

打赏
举报

不能传this ，传this.src才行

zzxap 2009-12-07

打赏
举报

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() %>">

这样也行。唉

sohighthesky 2009-12-07

打赏
举报

[Quote=引用 3 楼 zzxap 的回复:]
img 没有ID的。如果设置了ID，经过repeater生成后，他的ID全部都是一样
[/Quote]



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

        }

    }

}

zzxap 2009-12-07

打赏
举报

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

zzxap 2009-12-07

打赏
举报

img的个数是不定的

zzxap 2009-12-07

打赏
举报

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

ws_hgo 2009-12-07

打赏
举报

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

ws_hgo 2009-12-07

打赏
举报

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