|
巧妙的幻灯片秀(1) 任何人都能将假期的照片放在自己的网站上，但只有最酷的网络构建者会将他们设计成一场幻灯片秀。而且还不是那种简单的一张照片一个HTML页面的幻灯片，而是一个真正有动态感的幻灯片秀，每一个影像都下载到同一个HTML页面去。我们会教你如何使用Dynamic HTML (DHTML)和Cascading Style Sheets(CSS技巧">CSS)去构建专属你个人的幻灯片秀，让你的朋友、家人和同事觉得更无聊，喔不！是印象更深刻。但是记住！因为这种幻灯片秀是用DHTML写的，因此它只能在4.0或以上更新的浏览器版本才能看得到。
当然喽，这种幻灯片秀也有严肃的用途。只是我们现在还没有想到而已。
步骤一
收集你已经准备放在网络上的影像，而且将他们裁成相同的尺寸。确定尺寸范围不超过640 x 480个像素，而且所有的相片的像素尺寸都要保持相同－－如果照片尺寸大小不定，对观众而言会造成视觉上的不和谐。
步骤二
在你的页首标签里，你首先要做的，就是在<STYLE>标签里指出使用的是CSS。在<STYLE>标签里，在你想要幻灯片出现的页面设定位置，并决定一开头是否要以空白背景图表现，或者直接秀出第一张幻灯片。请将下列程序代码剪贴到你的页面中，并使用你自己选择的位置座标：
<STYLE type="text/css"> <!-- .slides {position:absolute; left: 25%; top:25%; visibility:hidden} --> </STYLE>
步骤三
接下来立刻处理CSS的细节部分，还是在页首标签中插入JavaScript。在var numSLides =之后，设定要秀出的幻灯片数目（别设太多，因为每一张照片都会为网页增加可观的KB数）。我们的范例中有五张照片。以下是程序代码：
<SCRIPT language="JavaScript1.2"> var numSlides = 5; var currentSlide = numSlides;
步骤四
如果你想加入图片的解释说明文字，可以用下列的程序代码，将我们的说明文字换成你自己的说明文字：
var captionTxt = new Array(numSlides);
function setUpCaptions() {
captionTxt[1] = "39号码头入口。"
captionTxt[2] = "海狮在码头附近漫步。"
captionTxt[3] = "小船在码头靠岸。"
captionTxt[4] = "水底世界鲸鱼壁画。"
captionTxt[5] = "海中小岛或者是岩石。"
}
步骤五
将这里所示的程序代码贴到你网页中的HTML文件，位置就在JavaScript的说明文字下。因为Navigator 4.0和IE 4.0以不同的方式解读CSS，我们的script就使用对象检测（object detection）来决定呈现的模式。如果呈现的模式是Navigator，它还是可以定义某些特定的对象，使得IE程序代码还是有作用。另外这也是整个程序代码的结尾，所以一定要以</SCRIPT>标签来作结束：
function setUp() {
if (!document.all) {
document.all = document;
| 
