您的位置:首页 > Web前端 > JavaScript

js 实现点击看大图

2009-09-09 15:59 302 查看
显示函数

<script language=javascript>

function over(Name)

{

var id=Name+"div";

var id2=Name+"img";

var tbname=Name+"table"

var con=document.getElementById(id);

var con1=document.getElementById(Name);

con.style.display="block";

var tbobj = document.getElementById(tbname);

var pos = getPos(tbobj);

var con2=document.getElementById(id2)

//con.style.pixelLeft = con1.offsetLeft + pos.x+con1.offsetWidth-con2.offsetWidth;

//con.style.pixelTop = con1.offsetTop + pos.y;

}

function out(obj)

{

obj.style.display="none";

}

</script>

大图显示

<table width="100%" height="317" border="0" cellpadding="0" cellspacing="0">

<tr>

<td><img border="0" src="<%=rs("img1")%>" height="279" width="279" />

<div style="position:absolute;display:none;background-color:#CC3300;
left:288px; top:255px;" id="img1div"><img id="img1img"
src="<%=rs("img1")%>" height="279" width="279" /></div>

<div style="position:absolute;display:none;background-color:#CC3300;
left:288px; top:255px;" id="img2div"><img id="img2img"
src="<%=rs("img2")%>" height="279" width="279" /></div>

<div style="position:absolute;display:none;background-color:#CC3300;
left:288px; top:255px;" id="img3div"><img id="img3img"
src="<%=rs("img3")%>" height="279" width="279"
/></div></td>

</tr>

<tr>

<td height="20"> </td>

</tr>

</table>

点击小图

<table width="90%" border="0" align="center" cellpadding="0" cellspacing="0">

<tr>

<td><img border="0" src="<%=rs("img1")%>" height="74"
onmouseover="over('img1')" onMouseOut="out(img1div)" /></td>

<td><img border="0" src="<%=rs("img2")%>" height="74"
onmouseover="over('img2')" onMouseOut="out(img2div)" /></td>

<td><img border="0" src="<%=rs("img3")%>" height="74"
onmouseover="over('img3')" onMouseOut="out(img3div)" /></td>

</tr>

</table>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: