代码如下：
<script language="javascript">
//定义img图库
var img = ["","images/1.gif","images/2.gif","images/3.gif","images/4.gif"]//最前面留一个空白位置
//轮番显示
function show(op){
if(Number(op)){
// 取得对应的图片
document.getElementById("img1").src=img[op]
}
}
</script>
//设置图片显示样式
<style type="text/css">
li{
float:left
height:15px
background-color:#FF66FF
border:1px #00FFFF dotted
line-height:15px
}
a{
color:#00FFFF
text-decoration:none
}
</style>
以下是html代码，设置一个img控件，长和宽都是50个像素
<img src="images/1.gif" id="img1" width="50" height="50" />
<ul style="list-style-type:nonewidth:200px">
<li><a href="#" onclick="show(1)">1</a></li><!--点击显示第一张图-->
<li><a href="#" onclick="show(2)">2</a></li><!--点击显示第二张图-->
<li><a href="#" onclick="show(3)">3</a></li><!--点击显示第三张图-->
<li><a href="#" onclick="show(4)">4</a></li><!--点击显示第四张图-->
</ul>
恩，帮你用Firefox的firebug查看了一下，主要代码如下：这是页面的HTML代码，包括其中的CSS样式调用：
<ul class="hoverbox">
<li>
<a href="#">
<img alt="description" src="img/photo01.jpg"/>
<img class="preview" alt="description" src="img/photo01.jpg"/>
</a>
</li>
</ul>
以下是关于图片相册的CSS代码：
//////CSS代码////
.hoverbox {
cursor:default
list-style-image:none
list-style-position:outside
list-style-type:none
}
.hoverbox a {
cursor:default
}
.hoverbox a .preview {
display:none
}
.hoverbox a:hover .preview {
display:block
left:-30px
position:absolute
top:-33px
z-index:1
}
.hoverbox img {
background:#FFFFFF none repeat scroll 0% 0%
border-color:#AAAAAA rgb(204, 204, 204) rgb(221, 221, 221) rgb(187, 187, 187)
border-style:solid
border-width:1px
color:inherit
height:75px
padding:2px
vertical-align:top
width:100px
}
.hoverbox li {
background:#EEEEEE none repeat scroll 0% 0%
border-color:#DDDDDD rgb(187, 187, 187) rgb(170, 170, 170) rgb(204, 204, 204)
border-style:solid
border-width:1px
color:inherit
display:inline
float:left
margin:3px
padding:5px
position:relative
}
.hoverbox .preview {
border-color:#000000
height:150px
width:200px
}
你去试试看哦，就是这样的。
Q1.二者有何区别？\x0d\x0aA1.写在css里面的图片是以背景图形式存在的，而写在html里的是以标签形式存在的，\x0d\x0a 在网页加载的过程中，以css背景图存在的图片会等到结构加载完成（网页的内容全部显示以后）才开始加载，而html中的标签是网页结构（内容）的一部分会在加载结构的过程中加载，换句话讲，网页会先加载标签的内容，再加载背景图片，如果你用引入了一个很大的图片，那么在这个图片下载完成之前，之后的内容都不会显示。而如果用css来引入同样的图片，网页结构和内容加载完成之后，才开始加载背景图片，不会影响你浏览网页内容。\x0d\x0a\x0d\x0aQ2.什么图片插入在css，什么图片插入在html里面？\x0d\x0aA2.如果是装饰性的图片就写在css里面，如果是内容性的图片就写在html里面，\x0d\x0a 打个比方，你要做一个有漂亮边框的相册。那么修饰边框的图片就写在css里面，相框里面的内容照片就写在html里面。\x0d\x0aQ3.不知道怎样问了，扩展点说就更好。\x0d\x0aA3.以后的网页设计方向是表现层和内容层分离，css管表现，也就是显示效果，html管结构，内容结构的划分，这样代码要简洁易维护一些。关于其他回答中的“像这种属于表现层的东西都会被丢弃的”这种说法是不正确的，内容中的图片还是要使用图标而不是css背景来引入。而“css图片可以复用，图片不能复用”这种说法也不正确，网页加载过程中相同的图片会下载一次并保存在缓存里面，其他地方的使用了同样的图片是不会再去下载的。图片也可以复用。
