求高手用javascrip整合一段代码！

答案:2 悬赏:50 手机版

解决时间 2021-05-18 21:23

提问者网友：欲望失宠
2021-05-18 11:49

<html>

<head>

//后面还有多个隐藏的层省略

<LINK href="xlcd.css" rel=stylesheet>
<script type=text/javascript><![CDATA[//><!--
function menuFix() {
var sfEls = document.getElementById("nav").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
sfEls[i].onMouseDown=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
sfEls[i].onMouseUp=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"),

"");
}
}
}
window.onload=menuFix;
//more javascript
//--><!]]></script>
</head>

<body style="background-color:#333333; margin:0">
<table width="980" border="0" cellspacing="0" cellpadding="0">
     // ........此处省略一段无关紧要的代码！
        <tr>
          <td width="150" height="100"><a href=# type="button" onClick="document.getElementById('div1').style.display='block';"><img src="../images/zhanlanPic/x6.png" width="150" height="100" style="border:0px"></a></td>
          <td width="80"> </td>
          <td width="150"><a href=# type="button" onClick="document.getElementById
('div2').style.display='block';"><img src="../images/zhanlanPic/x12.png" width="150" height="100" style="border:0px"></a></td>
          <td width="80"><p> </p></td>
          <td width="150"><a href=# type="button" onClick="document.getElementById
('div3').style.display='block';"><img src="../images/zhanlanPic/x3.png" width="150" height="100" style="border:0px"></a></td>
        </tr></table></body></html>

我是在网页上有很多小图片然后点击小图片跳出隐藏的层显示大图片，但问题是图片太多，导致上面要放很多个隐藏层，想请高手帮忙用javascrip整合下，把上面的隐藏层弄成一个，当点小图片，则跳出层，而层里面显示的图片会自动显示相应的大图片。或者直接不用层就直接出大图片，然后点一下大图片就关闭图片的那种整合也行（我还没学这个，为了关闭跳出的图片就弄了层，旁边放了个按钮。所以麻烦了点）

最佳答案

五星知识达人网友：woshuo
2021-05-18 12:21

1.将div1中的img标签增加1个ID，如：<img src="" id="randImg" />

function showObj(obj)
{
document.getElementById('randImg').src = obj.src;
document.getElementById('div1').style.display = 'block';
}

将这个函数写到head之间

3.将小图片改为<img src="../images/zhanlanPic/x6.png" width="150" height="100" style="border:0px" onClick="showObj(this);">

TIPS：因为有些情况大图和小图的名称不尽相同，但是会有一定的规律，你可以在showObj函数的第一句稍做修改，比如：大图名为S_123.gif,小图则为M_123.gif,原图为123.gif这样直接做个转换。

你明白滴

全部回答

1楼网友：玩家
2021-05-18 13:15

我要举报

如以上回答内容为低俗、色情、不良、暴力、侵权、涉及违法等信息，可以点下面链接进行举报！

点此我要举报以上问答信息