我做的这个图片查看器怎么查看不了？

krusher105 2008-01-01 10:52:30

代码要求实现单击最下面一兰的小图片，在上面的预览窗口中显示大图，显示的不是完整的大图，再单击大图，就会显示完整的大图。
执行结果是能把这个大概样式能显示出来，但如果大图不完整，单击它，没反应，单击下面的小图，上面的预览窗口也不显示，我自己也改了几个地方，但还是不对。
请教各位朋友帮我看看，问题出在哪？后面还有我CSS的代码
<title>图片查看器</title>
<link href="file:///C:\Documents and Settings\Administrator\桌面\lightbox.css" rel=stylesheet type=text/css>
<script src="file:///D:\My Documents\lightbox.js" type="text/javascript"></script>
</head>

<body>
<h1 style="text-align:center; font-size:1.5em; padding:1em">图片查看器</h1>
<div id=album>
<div id=pic> <a href="../../photo/20071021.jpg" rel=lightbox id=showlightbox>
<img src="../../photo/20071013007.jpg" alt=单击查看完全尺寸 id=placeholder></a></div>
<p id=desc>家人</p>
<div id=thumbs>
<ul>
<il>
<a onclick="return showpic(this);" href="../../photo/20071021.jpg" title=家人>
<img src="../../photo/20071013007.jpg" alt=家人></a></il>
<il>
<a onclick="return showpic(this);" href="../../photo/20071013003.jpg" title=两人合影>
<img src="../../photo/20071013004.jpg" alt=两人合影></a></il>
</ul>
</div>
</div>
<script language=javascript>
<!--
function showpic(whichpic) {
if (document.getElementById) {
document.getEmentById('placeholder').src=whichpic.href;
document.getEmentById('showlightbox').href=whichpic.href;
if (whichpic.title) {
document.getEmentById('desc').childNodes[0].nodeValue=whichpic.title;
} else {
document.getElementById('desc').childNodes[0].nodeValue=whichpic.childNodes[0].nodeValue;
} return false;
} else {
return true;
}
}

CSS代码：
* {
padding:0;
margin:0;
border:0;
}

body {
text-align:center;
font-size:75%;
}

#pic {
margin:10px;
width:400px;
height:300px;
overflow:hidden;
border:solid 5px #FFFFFF;
float:left;
}

* html #pic {
display:inline;
width:410px;
}

#album {
width:430px;
background:#EEEEEE;
margin:5em atuo;
font-size:100%;
padding-bottom:10px;
text-align:left;
}

#desc {
text-align:center;
float:left;
width:430px;
}

#thumbs {
height:80px;
clear:left;
width:400px;
margin:0 15px;
overflow:auto;
overflow-y:hidden;
}

#thumbs ul{
width:520px;
padding:5px 0;
}

#thumbs img{
width:60px;
height:50px;
}

#thumbs ul li{
float:left;
padding:0 3px 0 2px;
}

#thumbs ul li a{
background:transparent;
}

...全文

42 4 打赏收藏转发到动态举报

写回复

用AI写文章

4 条回复

切换为时间正序

请发表友善的回复…

发表回复

tantaiyizu 2008-01-01

打赏
举报

document.getElementById("pView").src = whichPic.src
这个。src是什么？
---
就是要显示缩略图的src属性，在这里去动态设定他

ShowPic(this)这里的this是什么？
---
把当前对象传进去，那么就可以在函数里面获取到他的src属性

krusher105 2008-01-01

打赏
举报

感谢2楼的朋友，你的方法更好些。

某些代码我不是很明白意思，知道的可以告诉我下吗？
document.getElementById("pView").src = whichPic.src
这个。src是什么？

ShowPic(this)这里的this是什么？

tantaiyizu 2008-01-01

打赏
举报



<script language="JavaScript">

	var ShowPic = function(whichPic){

		document.getElementById("pView").src = whichPic.src;

	};

</script>

<div>

	<img id="pView" src="image/1.jpg" width="200" height="200" onclick="window.open(this.src)" />

</div>

<div>

	<img src="image/1.jpg" width="100" height="100" onclick="ShowPic(this)" />

	<img src="image/2.jpg" width="100" height="100" onclick="ShowPic(this)" />

	<img src="image/3.jpg" width="100" height="100" onclick="ShowPic(this)" />

	<img src="image/4.jpg" width="100" height="100" onclick="ShowPic(this)" />

	<img src="image/5.jpg" width="100" height="100" onclick="ShowPic(this)" />

	<img src="image/6.jpg" width="100" height="100" onclick="ShowPic(this)" />

</div>