本文介绍了一系列实用的图片处理技巧，包括设置替代图片、自动调整图片大小、禁止图片自动缩小等功能，并展示了如何实现图片拖动查看、生成缩略图、随机显示图片等效果。
1，掉链级图片的替代图片
<img src="cnbruce.jpg" onerror="this.src='http://www.cnbruce.com/images/logo.gif'">
[Ctrl+A 全部选择进行拷贝 提示：可先修改部分代码，再点击运行]
2，自动缩小大图
经常看到一些图片很大，上传后显示会撑满屏幕
下面的例子通过检测
if(this.width>screen.width-350)then(this.width=screen.width-350)
如果该图片的宽度大于“屏幕宽度-350”，则让该图就显示“屏幕宽度-350”这么大小。
原图<br>
<img src="http://www.cnbruce.com/images/cnrose/mi.jpg"><br>
设定大小的图<br>
<img src="http://www.cnbruce.com/images/cnrose/mi.jpg" onload="javascript:if(this.width>screen.width-350)then(this.width=screen.width-350)">
[Ctrl+A 全部选择进行拷贝 提示：可先修改部分代码，再点击运行]
3，禁止IE6中大尺寸图片的自动缩小
原图,会自动缩小<br>
<img src="http://www.cnbruce.com/images/cnrose/xx.jpg"> <br>
设定不缩小<br>
<img src="http://www.cnbruce.com/images/cnrose/xx.jpg" galleryimg="no">
[Ctrl+A 全部选择进行拷贝 提示：可先修改部分代码，再点击运行]
4，去掉用IE6.0浏览图片，当鼠标放到图片上时出现快捷工具（打印、邮寄、另存等）
方法一：
<META
HTTP-EQUIV="imagetoolbar" CONTENT="no">
方法二：
<img
galleryimg="no">
定义CSS：
<style>
img
{nobar:expression(this.galleryImg='no')}
</style>
5，去掉热点地图上的区域线框与超链接的线框
使用CSS定义
<style>
a
{blr:expression(this.onFocus=this.blur())}
area
{blr:expression(this.onFocus=this.blur())}
</style>
或者
<a href="http://www.cnbruce.com/blog/" onFocus=this.blur()><img src="http://www.cnbruce.com/images/logo.gif" border=0></a>
[Ctrl+A 全部选择进行拷贝 提示：可先修改部分代码，再点击运行]
6,可控制上传图片的大小
<script language="JavaScript">
var img;
function test(){
if(img)img.removeNode(true);
img=document.createElement('img');
img.style.display='none';
img.attachEvent('onreadystatechange',function(){if(img.readyState=='complete')alert(img.fileSize>1024?'图片尺寸必要小于1024':'OK');});
img.attachEvent('onerror',function(){alert('不能读取此文件')});
document.body.appendChild(img);
img.src=file.value;
}
</script>
<input name="file" type='file'><input type="button" value="Test" onClick="test()">
[Ctrl+A 全部选择进行拷贝 提示：可先修改部分代码，再点击运行]
7,检测一个图片的长宽尺寸
<script>
var img=null;
function s()
{
if(img)img.removeNode(true);
img=document.createElement("img");
img.style.position="absolute";
img.style.visibility="hidden";
img.attachEvent("onreadystatechange",orsc);
img.attachEvent("onerror",oe);
document.body.insertAdjacentElement("beforeend",img);
img.src=inp.value;
}
function oe()
{
alert("cant load img");
}
function orsc()
{
if(img.readyState!="complete")return false;
alert("高:"+img.offsetHeight+"\n宽:"+img.offsetWidth);
}
</script>
<input type="file" Name="file" id="inp" value="默认值"><br><input onclick="s()" type="button" value="点我一下给出要上传图片的大小及长、宽" name="button">
[Ctrl+A 全部选择进行拷贝 提示：可先修改部分代码，再点击运行]
按比例缩小
<script defer>
for (var i=0;i<document.images.length;i++){
document.images[i].width=document.images[i].width*0.5
}
</script>
<img src="http://www.cnbruce.com/images/cnrose/xx.jpg">
[Ctrl+A 全部选择进行拷贝 提示：可先修改部分代码，再点击运行]
类似Acdsee看大图的时的拖动
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script language="JavaScript">
<!--
var scrollcount=0;
var dragy;
var scrollarrowtop;
function initdrag() {
scrollcount=1;
dragy=event.clientY;
document.body.setCapture();
}
function startdrag() {
if (scrollcount==1) {
window.scrollBy(dragy-event.clientX,dragy-event.clientY);
document.body.style.cursor='hand';
dragy=event.clientY;
}
}
function enddrag() {
document.body.style.cursor='';
scrollcount=0;
document.body.releaseCapture();
}
// -->
</script>
</head>
<body bgcolor="#FFFFFF" text="#000000" onselectstart="return false;" onmousedown="initdrag()" onmousemove="startdrag()" onmouseup="enddrag()" scroll=yes>
<img src="http://www.cnbruce.com/images/cnrose/mi.jpg">
<img src="http://www.cnbruce.com/images/cnrose/xx.jpg">
</body>
</html>
[Ctrl+A 全部选择进行拷贝 提示：可先修改部分代码，再点击运行]
选择图片产生缩略图，最多10个
<html>
<head>
<title>Upload Image</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<SCRIPT language=Javascript>
gFlag=false;
var gMaxSize,gCurrentSize,gUploadSize,gCurInputIndex,gCurImageSrc,gCurOFile;
gMaxSize="10";
gCurrentSize=".18";
gMaxSize=parseFloat(gMaxSize)*1024*1024;
//gMaxSize=parseFloat("1")*1024;
gCurrentSize=parseFloat(gCurrentSize)*1024*1024;
gErr="";
gUploadSize=0;
////////////////////////////////////////////////////
function validate()
{
var lErr;
lErr="";
if((gUploadSize+gCurrentSize)>gMaxSize){
if(form1.TempAlbum.value!=form1.OldAlbum.value){
lErr=".您要上传的图片尺寸大于您的剩余相册容量,请选择上传至\"临时相册\"\n"+lErr;
}
}
if(form1.OldAlbum.value=="0"){
if(form1.NewAlbum.value.length==0){
lErr=".请输入新相册名称\n"+lErr;
}
}
if(lErr.length>0){
alert("错误:\n"+lErr);
if(lErr.indexOf("请输入新相册名称\n\n")!=-1){
form1.NewAlbum.focus();
}
return false;
}
form1.submit();
/*进度条控制*/
//var winProgress=window.open("progress.htm","progress","width=300,height=250");
//winProgress.focus();
/*进度条控制*/
return true;
}
function handleBadImage() {
alert('所选图片并非有效的JPG格式!\n请重新选择!');
eval("form1.file"+gCurInputIndex+".outerHTML=\"<input type=\\\"file\\\" name=\\\"file"+gCurInputIndex+"\\\" style=\\\"width:275\\\" value=\\\"\\\" onChange=\\\"FileChange(this);\\\">\"");
eval("form1.file"+gCurInputIndex+".fireEvent(\"onChange\")");
return false;
}
function handleGoodImage() {
imgsrc='<img src="'+gCurImageSrc+'" onload="DrawImage(this,'+gCurInputIndex+'); " width="0" height="0">';
gCurOFile.parentNode.previousSibling.innerHTML=imgsrc;
return true;
}
//////////////////////////////////////////
function FileChange(oFile){
gErr="";
gUploadSize=0;
str='';
gCurOFile=oFile;
gCurImageSrc=oFile.value;
inputname=oFile.name;
i=inputname.substr((inputname.length-1),1);
gCurInputIndex=i;
if (gCurImageSrc.length>0){
//check for none jpg
imgExt=new Image();
imgExt.onload=handleGoodImage;
imgExt.onerror=handleBadImage;
var fileName = gCurImageSrc.replace("\\", "/"); // NN7
var imgURL = 'file:///' + fileName;
if((navigator.appVersion.indexOf('Mac')>-1) && (navigator.appVersion.indexOf('MSIE')>-1)){
imgURL='file://' + fileName;
}
imgExt.src=imgURL;
//finish check
}
}
function ShowImgOfServer(NewPath,ImgD){
ImgD.src=NewPath;
}
/////////////////////////////////////
function DrawImage(ImgD,Index){
var flag=false;
var image=new Image();
image.src=ImgD.src;
ImgD.value=ImgD.src;
if(image.fileSize>2048000){
image.outerHTML="";
gErr+="此图片尺寸过大,图片尺寸应小于2MB\n";
eval("form1.file"+Index+".outerHTML=\"<input type=\\\"file\\\" name=\\\"file"+Index+"\\\" style=\\\"width:275\\\" value=\\\"\\\" onChange=\\\"FileChange(this);\\\">\"");
eval("form1.file"+Index+".fireEvent(\"onChange\")");
alert("此图片尺寸过大,图片尺寸应小于2MB\n");
return ;
}
if(image.src.substr(image.src.length-3,3).toLowerCase()!="jpg"){
image.outerHTML="";
gErr+="此图片类型不匹配,只能上传JPG(JPEG)格式文件\n";
eval("form1.file"+Index+".outerHTML=\"<input type=\\\"file\\\" name=\\\"file"+Index+"\\\" style=\\\"width:275\\\" value=\\\"\\\" onChange=\\\"FileChange(this);\\\">\"");
eval("form1.file"+Index+".fireEvent(\"onChange\")");
alert("此图片类型不匹配,只能上传JPG(JPEG)格式文件\n");
return ;
}
tempFileName=image.src;
var iLastDot;
iLastLine=tempFileName.lastIndexOf('/');
if(iLastLine!=-1){
tempFileName=tempFileName.substring(iLastLine+1,tempFileName.length);
}
if(!CheckIfEnglish(tempFileName)){
image.outerHTML="";
gErr+="此图片文件名包含中文或其他不合法字符\n文件名只能由'a-z'、'A-Z'、'_'、'-'构成\n";
eval("form1.file"+Index+".outerHTML=\"<input type=\\\"file\\\" name=\\\"file"+Index+"\\\" style=\\\"width:275\\\" value=\\\"\\\" onChange=\\\"FileChange(this);\\\">\"");
eval("form1.file"+Index+".fireEvent(\"onChange\")");
alert("此图片文件名包含中文或其他不合法字符\n文件名只能由'a-z'、'A-Z'、'_'、'-'构成\n");
return ;
}
if(gErr.length>0){
return;
}
if(image.width>0 && image.height>0){
flag=true;
if(image.width/image.height>= 120/80){
if(image.width>120){
ImgD.width=120;
ImgD.height=(image.height*120)/image.width;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
ImgD.alt="图片大小(宽*高): "+image.width+"×"+image.height+"\n图片大小: "+image.fileSize+"\n图片路径: "+image.src;
eval('document.all.width'+Index+'.value='+image.width);
eval('document.all.height'+Index+'.value='+image.height);
var oCreated=new Date(image.fileModifiedDate);
eval('document.all.PicUpdateDate'+Index+'.value="'+oCreated.toLocaleString()+'"');
}
else{
if(image.height>80){
ImgD.height=80;
ImgD.width=(image.width*80)/image.height;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
ImgD.alt="图片大小(宽*高): "+image.width+"×"+image.height+"\n图片大小: "+image.fileSize+"\n图片路径: "+image.src;
eval('document.all.width'+Index+'.value='+image.width);
eval('document.all.height'+Index+'.value='+image.height);
var oCreated=new Date(image.fileModifiedDate);
eval('document.all.PicUpdateDate'+Index+'.value="'+oCreated.toLocaleString()+'"');
}
}
if(parseInt(Index)==parseInt(form1.upcount.value)){
form1.upcount.value=parseInt(form1.upcount.value)+1;
str+='<table width="100%" ><tr valign="middle" ><td align="center" id="tdimg" height="" width="120" ></td><td id="tdfile" >文件'+(parseInt(Index)+1)+':<input onpropertychange="FileChange(this);" type="file" name="file'+(parseInt(Index)+1)+'" style="width:275" ><input id="width'+(parseInt(Index)+1)+'" name="width'+(parseInt(Index)+1)+'" type="hidden" value=""><input id="height'+(parseInt(Index)+1)+'" name="height'+(parseInt(Index)+1)+'" type="hidden" value=""><input name="PicUpdateDate'+(parseInt(Index)+1)+'" type="hidden" id="PicUpdateDate'+(parseInt(Index)+1)+'"></td></tr></table>';
window.upid.insertAdjacentHTML("beforeEnd",str+'<br>');
}
gUploadSize+=parseFloat(image.fileSize);
}
//////////////////////////////////////////
function AlbumChange(Value){
if(Value=='0'){
document.all.sNewAlbum.style.display='inline';
document.all.NewAlbum.focus();
}
else{
document.all.sNewAlbum.style.display='none';
}
return ;
}
function CheckIfEnglish( String )
{
var Letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890-_.";
var i;
var c;
if(String.charAt( 0 )=='-')
return false;
if( String.charAt( String.length - 1 ) == '-' )
return false;
for( i = 0; i < String.length; i ++ )
{
c = String.charAt( i );
if (Letters.indexOf( c ) < 0)
return false;
}
return true;
}
</SCRIPT>
</head>
<body >
<form name="form1" method="post" action="">
<TABLE align=center bgColor=#cccccc border=0
borderColorDark=#cccccc borderColorLight=#000000
cellPadding=5 cellSpacing=1 height=367
width="500">
<TBODY>
<TR vAlign=center>
<TD align=left bgColor=#ffffff colSpan=2
height=269 id=upid vAlign=top> <TABLE cellPadding=3 cellSpacing=1 width="100%">
<TBODY>
<TR vAlign=center>
<TD align=middle bgColor=#ffffff id=tdimg
width=120></TD>
<TD bgColor=#ffffff id=tdfile>文件1:
<INPUT
name=file1 onpropertychange=FileChange(this);
style="WIDTH: 275px" type=file> <INPUT id=width1
name=width1 type=hidden> <INPUT id=height1
name=height1 type=hidden> <INPUT
id=PicUpdateDate1 name=PicUpdateDate1
type=hidden></TD>
</TR>
</TBODY>
</TABLE></TD>
</TR>
<TR bgColor=#eeeeee vAlign=center>
<TD align=middle bgColor=#ebebeb colSpan=2
height=24> <DIV align=left>将图片上传至已有相册
<SELECT id=OldAlbum
name=OldAlbum onchange=AlbumChange(this.value);>
<OPTION value=0><新建相册></OPTION>
<OPTION
selected value=365>临时相册</OPTION>
</SELECT>
<INPUT
id=TempAlbum name=TempAlbum type=hidden
value=365>
<SPAN id=sNewAlbum
style="DISPLAY: none">或新建相册
<INPUT id=NewAlbum
maxLength=50 name=NewAlbum onfocus="">
</SPAN></DIV></TD>
</TR>
<TR bgColor=#eeeeee vAlign=center>
<TD align=middle bgColor=#ebebeb colSpan=2
height=24> <DIV align=center><FONT size=2>
<INPUT class=bt name=Submit onclick=validate(); type=button value="· 上传已选图片 ·">
<INPUT id=upcount name=upcount type=hidden
value=1>
<INPUT id=from name=from type=hidden>
</FONT></DIV></TD>
</TR>
</TBODY>
</TABLE>
</form>
</body>
</html>
[Ctrl+A 全部选择进行拷贝 提示：可先修改部分代码，再点击运行]
随机图片
<script language=vbs>
Randomize
i=Int((80 * Rnd) + 1)
document.write"<img src='http://www.cnbruce.com/blog/smile/face"&i&".gif'>"
</script>
[Ctrl+A 全部选择进行拷贝 提示：可先修改部分代码，再点击运行]
不同的ALT
<SCRIPT language=JavaScript1.2>
<!--
tPopWait=50;
tPopShow=50000;
showPopStep=10;
popOpacity=100;
sPop=null;
curShow=null;
tFadeOut=null;
tFadeIn=null;
tFadeWaiting=null;
document.write("<style type='text/css'id='defaultPopStyle'>");
document.write(".cPopText { background-color: #FFFFFF; border: 1px #000000 solid; font-size: 12px; padding-right: 4px; padding-left: 4px; height: 20px; padding-top: 2px; padding-bottom: 2px; filter: Alpha(Opacity=0)}");
document.write("</style>");
document.write("<div id='dypopLayer' style='position:absolute;z-index:1000;' class='cPopText'></div>");
function showPopupText(){
var o=event.srcElement;
MouseX=event.x;
MouseY=event.y;
if(o.alt!=null && o.alt!=""){o.dypop=o.alt;o.alt=""};
if(o.dypop!=sPop) {
sPop=o.dypop;
clearTimeout(curShow);
clearTimeout(tFadeOut);
clearTimeout(tFadeIn);
clearTimeout(tFadeWaiting);
if(sPop==null || sPop=="") {
dypopLayer.innerHTML="";
dypopLayer.style.filter="Alpha()";
dypopLayer.filters.Alpha.opacity=0;
}
else {
if(o.dyclass!=null) popStyle=o.dyclass
else popStyle="cPopText";
curShow=setTimeout("showIt()",tPopWait);
}
}
}
function showIt(){
dypopLayer.className=popStyle;
dypopLayer.innerHTML=sPop;
popWidth=dypopLayer.clientWidth;
popHeight=dypopLayer.clientHeight;
if(MouseX+12+popWidth>document.body.clientWidth) popLeftAdjust=-popWidth-24
else popLeftAdjust=0;
if(MouseY+12+popHeight>document.body.clientHeight) popTopAdjust=-popHeight-24
else popTopAdjust=0;
dypopLayer.style.left=MouseX+12+document.body.scrollLeft+popLeftAdjust;
dypopLayer.style.top=MouseY+12+document.body.scrollTop+popTopAdjust;
dypopLayer.style.filter="Alpha(Opacity=0)";
fadeOut();
}
function fadeOut(){
if(dypopLayer.filters.Alpha.opacity<popOpacity) {
dypopLayer.filters.Alpha.opacity+=showPopStep;
tFadeOut=setTimeout("fadeOut()",1);
}
else {
dypopLayer.filters.Alpha.opacity=popOpacity;
tFadeWaiting=setTimeout("fadeIn()",tPopShow);
}
}
function fadeIn(){
if(dypopLayer.filters.Alpha.opacity>0) {
dypopLayer.filters.Alpha.opacity-=1;
tFadeIn=setTimeout("fadeIn()",1);
}
}
document.onmouseover=showPopupText;
//-->
</script>
<img src="http://www.cnbruce.com/images/logo.gif" alt="this is cnbruce blog">
[Ctrl+A 全部选择进行拷贝 提示：可先修改部分代码，再点击运行]
图片轮流切换
<SCRIPT LANGUAGE="JavaScript" defer>
// Set slideShowSpeed (milliseconds)
var slideShowSpeed = 2000;
// Duration of crossfade (seconds)
var crossFadeDuration = 3;
// Specify the image files
var Pic = new Array();
// to add more images, just continue
// the pattern, adding to the array below
Pic[0] = "/blog/smile/face1.gif";
Pic[1] = "/blog/smile/face2.gif";
Pic[2] = "/blog/smile/face3.gif";
Pic[3] = "/blog/smile/face4.gif";
Pic[4] = "/blog/smile/face5.gif";
// do not edit anything below this line
var t;
var j = 0;
var p = Pic.length;
var preLoad = new Array();
for (i = 0; i < p; i++) {
preLoad[i] = new Image();
preLoad[i].src = Pic[i];
}
function runSlideShow() {
if (document.all) {
document.images.SlideShow.style.filter="blendTrans(duration=2)";
document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)";
document.images.SlideShow.filters.blendTrans.Apply();
}
document.images.SlideShow.src = preLoad[j].src;
if (document.all) {
document.images.SlideShow.filters.blendTrans.Play();
}
j = j + 1;
if (j > (p - 1)) j = 0;
t = setTimeout('runSlideShow()', slideShowSpeed);
}
</script>
<body onload="runSlideShow()">
<img id="SlideShow"/>
[Ctrl+A 全部选择进行拷贝 提示：可先修改部分代码，再点击运行]
图片+文字说明PPT效果
<html>
<head>
<title>Listing 35.13. A Wipe Transition for the Incoming Slide</title>
<script language="JavaScript" type="text/javascript">
// This array holds all of the document's DHTML-able objects
var dhtml_objects = new Array()
// This function creates the custom objects that serve as cross-browser front-ends
function create_object_array() {
// All the <div> and <span> tags are stored in these variables
var div_tags
var span_tags
var css_tags
// Is the browser W3C DOM compliant?
if (document.getElementById) {
// If so, use getElementsByTagName() to get the <div> tags
div_tags = document.getElementsByTagName("div")
// Loop through the <div> tags
for (var counter = 0; counter < div_tags.length; counter++) {
// Store the current object
current_object = div_tags[counter]
// Store how the browser accesses styles
object_css = current_object.style
// Store the object's id
object_id = current_object.id
// Only store those tags that have an id
if (object_id) {
// Create a new dhtml_object and store it in dhtml_objects
dhtml_objects[object_id] = new dhtml_object(current_object,
object_css,
object_id)
}
}
// Use getElementsByTagName() to get the <span> tags
span_tags = document.getElementsByTagName("span")
// Loop through the <span> tags
for (var counter = 0; counter < span_tags.length; counter++) {
// Store the current object
current_object = span_tags[counter]
// Store how the browser accesses styles
object_css = current_object.style
// Store the object's id
object_id = current_object.id
// Only store those tags that have an id
if (object_id) {
// Create a new dhtml_object and store it in dhtml_objects
dhtml_objects[object_id] = new dhtml_object(current_object,
object_css,
object_id)
}
}
}
// Is the browser DHTML DOM compliant?
else if (document.all) {
// If so, use document.all to get the <div> tags
div_tags = document.all.tags("div")
// Loop through the <div> tags
for (var counter = 0; counter < div_tags.length; counter++) {
// Store the current object
current_object = div_tags[counter]
// Store how the browser accesses styles
object_css = current_object.style
// Store the object's id
object_id = current_object.id
// Only store those tags that have an id
if (object_id) {
// Create a new dhtml_object and store it in dhtml_objects
dhtml_objects[object_id] = new dhtml_object(current_object,
object_css,
object_id)
}
}
// Use document.all to get the <span> tags
span_tags = document.all.tags("span")
// Loop through the <span> tags
for (var counter = 0; counter < span_tags.length; counter++) {
// Store the current object
current_object = span_tags[counter]
// Store how the browser accesses styles
object_css = current_object.style
// Store the object's id
object_id = current_object.id
// Only store those tags that have an id
if (object_id) {
// Create a new dhtml_object and store it in dhtml_objects
dhtml_objects[object_id] = new dhtml_object(current_object,
object_css,
object_id)
}
}
}
// Is the browser LDOM compliant?
else if (document.layers) {
// Use document.layers to get the positioned <div> and <span> tags
css_tags = document.layers
// Loop through the layers
for (var counter = 0; counter < css_tags.length; counter++) {
// Store the current object
current_object = css_tags[counter]
// Store how the browser accesses styles
object_css = current_object
// Store the object's id
object_id = current_object.id
// Only store those tags that have an id
if (object_id) {
// Create a new dhtml_object and store it in dhtml_objects
dhtml_objects[object_id] = new dhtml_object(current_object,
object_css,
object_id)
}
}
}
}
function dhtml_object (obj, css, id) {
this.obj = obj
this.css = css
this.id = id
this.left = get_left
this.right = get_right
this.top = get_top
this.bottom = get_bottom
this.width = get_width
this.height = get_height
this.visibility = get_visibility
this.zIndex = get_zIndex
this.move_to = move_to
this.move_by = move_by
this.set_left = set_left
this.set_top = set_top
this.set_width = set_width
this.set_height = set_height
this.set_visibility = set_visibility
this.set_zIndex = set_zIndex
this.move_above = move_above
this.move_below = move_below
this.set_backgroundColor = set_backgroundColor
this.set_backgroundImage = set_backgroundImage
this.set_html = set_html
this.get_clip_top = get_clip_top
this.get_clip_right = get_clip_right
this.get_clip_bottom = get_clip_bottom
this.get_clip_left = get_clip_left
this.get_clip_width = get_clip_width
this.get_clip_height = get_clip_height
this.resize_clip_to = resize_clip_to
this.resize_clip_by = resize_clip_by
}
function get_left() {
return parseInt(this.css.left)
}
function get_right() {
return this.left() + this.width()
}
function get_top() {
return parseInt(this.css.top)
}
function get_bottom() {
return this.top() + this.height()
}
function get_width() {
// Is this a W3C or DHTML DOM browser?
if (!document.layers) {
// If so, is the width defined?
if (this.css.width) {
// If so, return the width property
return parseInt(this.css.width)
}
else {
// If not, return the offsetWidth property
return parseInt(this.obj.offsetWidth)
}
}
else {
// If not, return the layer's document width
return parseInt(this.obj.document.width)
}
}
function get_height() {
// Is this a W3C or DHTML DOM browser?
if (!document.layers) {
// If so, is the height defined?
if (this.css.height) {
// If so, return the height property
return parseInt(this.css.height)
}
else {
// If not, return the offsetHeight property
return parseInt(this.obj.offsetHeight)
}
}
else {
// If not, return the layer's document height
return parseInt(this.obj.document.height)
}
}
function get_visibility() {
// Is this a W3C or DHTML DOM browser?
if (!document.layers) {
// If so, is the visibility defined?
if (this.css.visibility) {
// If so, return the visibility property
return this.css.visibility
}
}
else {
// Otherwise, it's an LDOM browser, so
// handle the proprietary visibility values
if (this.css.visibility == "show") {
return "visible"
}
if (this.css.visibility == "hide") {
return "hidden"
}
}
// If we get this far, just return "inherit"
return "inherit"
}
function get_zIndex() {
return this.css.zIndex
}
function move_to (new_left, new_top) {
this.css.left = new_left
this.css.top = new_top
}
function move_by (delta_left, delta_top) {
// Add the delta values
this.css.left = this.left() + parseInt(delta_left)
this.css.top = this.top() + parseInt(delta_top)
}
function set_left (new_left) {
this.css.left = new_left
}
function set_top (new_top) {
this.css.top = new_top
}
function set_width (new_width) {
// Is this a W3C or DHTML DOM browser?
if (!document.layers) {
// If so, just set the width property
this.css.width = new_width
}
}
function set_height (new_height) {
// Is this a W3C or DHTML DOM browser?
if (!document.layers) {
// If so, just set the width property
this.css.height = new_height
}
}
function set_visibility (new_visibility) {
// Is this a W3C or DHTML DOM browser?
if (!document.layers) {
// If so, just set the visibility
// to the value of the argument
this.css.visibility = new_visibility
}
else {
// Otherwise, set the proprietary visibility values
if (new_visibility == "visible") {
this.css.visibility = "show"
}
else if (new_visibility == "hidden") {
this.css.visibility = "hide"
}
else {
this.css.visibility = "inherit"
}
}
}
function set_zIndex(new_zindex) {
// Is the new z-index greater than 0?
if (new_zindex > 0) {
// If so, set it
this.css.zIndex = new_zindex
}
else {
// If not, set it to 0
this.css.zIndex = 0
}
}
function move_above(reference_object) {
this.css.zIndex = reference_object.css.zIndex + 1
}
function move_below(reference_object) {
// Get the z-index of the reference object
reference_zindex = reference_object.css.zIndex
// Is it greater than 0?
if (reference_zindex > 0) {
// If so, set this object's zindex to one less
this.css.zIndex = reference_zindex - 1
}
else {
// If not, set the reference object's z-index to 1
// and this object's z-index to 0
reference_object.css.zIndex = 1
this.css.zIndex = 0
}
}
function set_backgroundColor(new_color) {
// Is this a W3C or DHTML DOM browser?
if (!document.layers) {
// If so, use the backgroundColor property
this.css.backgroundColor = new_color
}
else {
// If not, use the bgcolor property
this.css.bgColor = new_color
}
}
function set_backgroundImage(new_image) {
// Is this a W3C or DHTML DOM browser?
if (!document.layers) {
// If so, use the backgroundImage property
this.css.backgroundImage = "url(" + new_image + ")"
}
else {
// If not, use the background property
this.css.background.src = new_image
}
}
function set_html(new_html) {
// Is this a W3C or DHTML DOM browser?
if (!document.layers) {
// If so, use the innerHTML property
this.obj.innerHTML = new_html
}
else {
// If not, use the document.write() method
this.obj.document.open()
this.obj.document.write(new_html)
this.obj.document.close()
}
}
function get_clip_top() {
// Is this a W3C or DHTML DOM browser?
if (!document.layers) {
// If so, first parse the clip string
parse_dom_clip(this)
// Clip values are now in the current_clip object
return current_clip.top
}
else {
// Otherwise, use clip.top
return this.css.clip.top
}
}
var current_clip
function clip_object(top, right, bottom, left) {
this.top = top
this.right = right
this.bottom = bottom
this.left = left
}
function parse_dom_clip(current_object) {
clip_string = current_object.css.clip
if (clip_string.length > 0) {
var values_string = clip_string.slice(5, clip_string.length - 1)
var clip_values = values_string.split(" ")
var clip_top = parseInt(clip_values[0])
var clip_right = parseInt(clip_values[1])
var clip_bottom = parseInt(clip_values[2])
var clip_left = parseInt(clip_values[3])
}
else {
var clip_top = 0
var clip_right = current_object.width()
var clip_bottom = current_object.height()
var clip_left = 0
}
current_clip = new clip_object(clip_top, clip_right, clip_bottom, clip_left)
}
function get_clip_right() {
// Is this a W3C or DHTML DOM browser?
if (!document.layers) {
// If so, first parse the clip string
parse_dom_clip(this)
// Clip values are now in the current_clip object
return current_clip.right
}
else {
// Otherwise, use clip.right
return this.css.clip.right
}
}
function get_clip_bottom() {
// Is this a W3C or DHTML DOM browser?
if (!document.layers) {
// If so, first parse the clip string
parse_dom_clip(this)
// Clip values are now in the current_clip object
return current_clip.bottom
}
else {
// Otherwise, use clip.bottom
return this.css.clip.bottom
}
}
function get_clip_left() {
// Is this a W3C or DHTML DOM browser?
if (!document.layers) {
// If so, first parse the clip string
parse_dom_clip(this)
// Clip values are now in the current_clip object
return current_clip.left
}
else {
// Otherwise, use clip.left
return this.css.clip.left
}
}
function get_clip_width() {
// Is this a W3C or DHTML DOM browser?
if (!document.layers) {
// If so, first parse the clip string
parse_dom_clip(this)
// Clip values are now in the current_clip object
return current_clip.right - current_clip.left
}
else {
// Otherwise, use clip.width
return this.css.clip.width
}
}
function get_clip_height() {
// Is this a W3C or DHTML DOM browser?
if (!document.layers) {
// If so, first parse the clip string
parse_dom_clip(this)
// Clip values are now in the current_clip object
return current_clip.bottom - current_clip.top
}
else {
// Otherwise, use clip.width
return this.css.clip.height
}
}
function resize_clip_to(new_top, new_right, new_bottom, new_left) {
if (new_top == "auto") {new_top = this.get_clip_top() }
if (new_right == "auto") {new_right = this.get_clip_right() }
if (new_bottom == "auto") {new_bottom = this.get_clip_bottom() }
if (new_left == "auto") {new_left = this.get_clip_left() }
// Is this a W3C or DHTML DOM browser?
if (!document.layers) {
// Clip values are now in the current_clip object
this.css.clip = "rect(" + new_top + " " + new_right + " " +
new_bottom + " " + new_left + ")"
}
else {
// Otherwise, use clip properties
this.css.clip.top = new_top
this.css.clip.right = new_right
this.css.clip.bottom = new_bottom
this.css.clip.left = new_left
}
}
function resize_clip_by(delta_top, delta_right, delta_bottom, delta_left) {
var new_top = this.get_clip_top() + delta_top
var new_right = this.get_clip_right() + delta_right
var new_bottom = this.get_clip_bottom() + delta_bottom
var new_left = this.get_clip_left() + delta_left
// Is this a W3C or DHTML DOM browser?
if (!document.layers) {
// Clip values are now in the current_clip object
this.css.clip = "rect(" + new_top + " " + new_right + " " +
new_bottom + " " + new_left + ")"
}
else {
// Otherwise, use clip properties
this.css.clip.top = new_top
this.css.clip.right = new_right
this.css.clip.bottom = new_bottom
this.css.clip.left = new_left
}
}
function get_mouse_x(current_event) {
// Is this Internet Explorer 4 or later?
if (its_ie4plus) {
// If so, return the event.clientX property
return event.clientX
}
// Is this Netscape Explorer 4 or later?
else if (its_ns4plus) {
// Otherwise, return the pageX property
return current_event.pageX
}
else {
// Otherwise, return null
return null
}
}
function get_mouse_y(current_event) {
// Is this Internet Explorer 4 or later?
if (its_ie4plus) {
// If so, return the event.clientY property
return event.clientY
}
// Is this Netscape Explorer 4 or later?
else if (its_ns4plus) {
// If so, return the pageY property
return current_event.pageY
}
else {
// Otherwise, return null
return null
}
}
function get_client_width() {
// Is this Internet Explorer 4 or later?
if (its_ie4plus) {
// If so, return the clientWidth property
return document.body.clientWidth
}
else if (its_ns4plus) {
// If so, return the innerWidth property
return window.innerWidth - 18
}
else {
// Otherwise, return null
return null
}
}
function get_client_height() {
// Is this Internet Explorer 4 or later?
if (its_ie4plus) {
// If so, return the clientHeight property
return document.body.clientHeight
}
// Is this Netscape Explorer 4 or later?
else if (its_ns4plus) {
// If so, return the innerHeight property
return window.innerHeight - 18
}
else {
// Otherwise, return null
return null
}
}
function get_client_scroll_left() {
// Is this Internet Explorer 4 or later?
if (its_ie4plus) {
// If so, return the scrollLeft property
return document.body.scrollLeft
}
// Is this Netscape Explorer 4 or later?
else if (its_ns4plus) {
// If so, return the pageXOffset property
return pageXOffset
}
else {
// Otherwise, return null
return null
}
}
function get_client_scroll_top() {
// Is this Internet Explorer 4 or later?
if (its_ie4plus) {
// If so, return the scrollTop property
return document.body.scrollTop
}
// Is this Netscape Explorer 4 or later?
else if (its_ns4plus) {
// If so, return the pageYOffset property
return pageYOffset
}
else {
// Otherwise, return null
return null
}
}
</script>
<script language="JavaScript" type="text/javascript">
// One of these boolean variables will be
// set to true based on the browser name
var its_ie = false
var its_ns = false
var its_opera = false
var its_webtv = false
var its_compatible = false
// One of these boolean variables will be set to
// true based on the Internet Explorer version
var its_ie2 = false
var its_ie3 = false
var its_ie4 = false
var its_ie5 = false
var its_ie55 = false
var its_ie6 = false
var its_ie4plus = false
var its_ie5plus = false
var its_ie55plus = false
var its_ie6plus = false
// One of these boolean variables will be set to
// true based on the Netscape version
var its_ns2 = false
var its_ns3 = false
var its_ns4 = false
var its_ns6 = false
var its_ns3plus = false
var its_ns4plus = false
var its_ns6plus = false
// One of these boolean variables will be
// set to true based on the operating system
var its_win31 = false
var its_win95 = false
var its_win98 = false
var its_winme = false
var its_winnt = false
var its_win2000 = false
var its_winxp = false
var its_windows = false
var its_win32 = false
var its_mac68k = false
var its_macppc = false
var its_macos = false
var its_linux = false
var its_other_os = false
// This will be true of the browser supports some kind of DHTML
var dhtml_ok = false
// Let's work with lowercase letters to keep things simple
var user_agent = navigator.userAgent.toLowerCase()
// BROWSER NAME
// Use indexOf() to examine the userAgent string
// for telltale signs of the browser name
if (user_agent.indexOf("opera") != -1) { its_opera = true }
else if (user_agent.indexOf("webtv") != -1) { its_webtv = true }
else if (user_agent.indexOf("msie") != -1) { its_ie = true }
else if (user_agent.indexOf("mozilla") != -1) {
// For "moziila", we need to rule out some other possibilities, first
if ((user_agent.indexOf("compatible") == -1) &&
(user_agent.indexOf("spoofer") == -1) &&
(user_agent.indexOf("hotjava") == -1)) {
its_ns = true
}
else { its_compatible = true }
}
// BROWSER VERSION
var major_version = parseInt(navigator.appVersion)
var full_version = parseFloat(navigator.appVersion)
var ie_start = user_agent.indexOf("msie")
if (ie_start != -1) {
var version_string = user_agent.substring(ie_start + 5)
major_version = parseInt(version_string)
full_version = parseFloat(version_string)
}
// INTERNET EXPLORER
if (its_ie || its_webtv) {
if (major_version < 3) { its_ie2 = true }
else if (major_version == 3) { its_ie3 = true }
else if (major_version == 4) { its_ie4 = true }
else if (major_version == 5) { its_ie5 = true }
else if (full_version == 5.5) { its_ie55 = true }
else if (major_version == 6) { its_ie6 = true }
if (major_version >= 4) { its_ie4plus = true }
if (major_version >= 5) { its_ie5plus = true }
if (full_version >= 5.5) { its_ie55plus = true }
if (major_version >= 6) { its_ie6plus = true }
}
// NETSCAPE
if (its_ns) {
if (major_version < 3) { its_ns2 = true }
else if (major_version < 4) { its_ns3 = true }
else if (major_version == 4) { its_ns4 = true }
else if (major_version == 5) { its_ns6 = true }
if (major_version >= 3) { its_ns3plus = true }
if (major_version >= 4) { its_ns4plus = true }
if (major_version >= 5) { its_ns6plus = true }
}
// OPERATING SYSTEM
// Use indexOf() to examine the userAgent string
// for telltale signs of the operating system
// WINDOWS 3.1
if ((user_agent.indexOf("windows 3.1") != -1) ||
(user_agent.indexOf("win16") != -1) ||
(user_agent.indexOf("16bit") != -1) ||
(user_agent.indexOf("16-bit") != -1)) { its_win31 = true }
// WINDOWS 95
else if ((user_agent.indexOf("windows 95") != -1) ||
(user_agent.indexOf("win95") != -1)) { its_win95 = true }
// WINDOWS ME
if (user_agent.indexOf("win 9x 4.90") != -1) { its_winme = true }
// WINDOWS 98
else if ((user_agent.indexOf("windows 98") != -1) ||
(user_agent.indexOf("win98") != -1)) { its_win98 = true }
// WINDOWS XP
else if ((user_agent.indexOf("windows nt 5.1") != -1) ||
(user_agent.indexOf("winnt 5.1") != -1)) { its_winxp = true }
// WINDOWS 2000
else if ((user_agent.indexOf("windows nt 5.0") != -1) ||
(user_agent.indexOf("winnt 5.0") != -1)) { its_win2000 = true }
// WINDOWS NT
else if ((user_agent.indexOf("windows nt") != -1) ||
(user_agent.indexOf("winnt") != -1)) { its_winnt = true }
// MAC 680x0
else if ((user_agent.indexOf("mac") != -1) &&
((user_agent.indexOf("68K") != -1) ||
(user_agent.indexOf("68000") != -1))) { its_mac68k = true }
// MAC PowerPC
else if ((user_agent.indexOf("mac") != -1) &&
((user_agent.indexOf("ppc") != -1) ||
(user_agent.indexOf("powerpc") != -1))) { its_macppc = true }
// LINUX
else if (user_agent.indexOf("linux") != -1) { its_linux = true }
// OTHER OS
else { its_other_os = true }
// PLATFORM
// Use the operating system booleans to
// determine the general platform
// MAC OS
if (its_mac68k || its_macppc) { its_macos = true}
// 32-BIT WINDOWS
if (its_win95 || its_win98 || its_winme || its_winnt || its_win2000 || its_winxp) {its_win32 = true}
// WINDOWS
if (its_win31 || its_win32) {its_windows = true}
// DHTML SUPPORT
if (document.getElementById || document.all || document.layers) {
dhtml_ok = true
}
</script>
<script language="JavaScript" type="text/javascript">
<!--
var slides = new Array()
var slide_width = 525
var slide_height = 296
slides[0] = new Image(slide_width, slide_height)
slides[0].src = "http://www.mcfedries.com/graphics/fiesole1.jpg"
slides[0].caption = "A 3,000-seat Roman theatre from about 100 BC (Fiesole, Italy)"
slides[1] = new Image(slide_width, slide_height)
slides[1].src = "http://www.mcfedries.com/graphics/fiesole2.jpg"
slides[1].caption = "Etruscan ruins from about 600 BC (Fiesole, Italy)"
slides[2] = new Image(slide_width, slide_height)
slides[2].src = "http://www.mcfedries.com/graphics/florence04.jpg"
slides[2].caption = "The Piazza Della Signoria (Florence, Italy)"
slides[3] = new Image(slide_width, slide_height)
slides[3].src = "http://www.mcfedries.com/graphics/florence06.jpg"
slides[3].caption = "The Boboli Gardens (Florence, Italy)"
// Use these variables to configure the viewer
var scroll_amount = 10
var scroll_delay = 50
var timeout_id
var current_slide = 0
var pending_slide = 1
var scrolling
var transitions = new Array("slide", "wipe")
var h_directions = new Array("left", "right", "both", "none")
var v_directions = new Array("down", "up", "both", "none")
var viewer_data = new viewer_data_object()
// This function creates the viewer object
function viewer_data_object(width, height, top, left, scrollamount) {}
function initialize() {
// If this is a non-DHTML browser, bail out
if (!dhtml_ok) { return }
// Create the DHTML objects
create_object_array()
// Set up the viewer object
viewer_data.width = dhtml_objects['viewer1'].width()
viewer_data.height = dhtml_objects['viewer1'].height()
viewer_data.top = dhtml_objects['viewer1'].top()
viewer_data.left = dhtml_objects['viewer1'].left()
viewer_data.scrollamount = scroll_amount
viewer_data.scrolldelay = scroll_delay
viewer_data.scroll_start = slide_width
viewer_data.transition = transitions[0]
viewer_data.h_direction = h_directions[0]
viewer_data.v_direction = v_directions[0]
write_controls()
}
// This function sets the initial viewer position and clip region
function initialize_viewer() {
// Hide viewer2
dhtml_objects['viewer2'].set_visibility("hidden")
// Put in the main image
dhtml_objects['viewer1'].set_html('<img src="' + slides[current_slide].src + '">')
// Reset it for full viewing
dhtml_objects['viewer1'].move_to(viewer_data.left, viewer_data.top)
dhtml_objects['viewer1'].resize_clip_to(0, viewer_data.width, viewer_data.height, 0)
// Select a random transition
viewer_data.transition = transitions[Math.floor(transitions.length * Math.random())]
viewer_data.h_direction = h_directions[Math.floor(h_directions.length * Math.random())]
viewer_data.v_direction = v_directions[Math.floor(v_directions.length * Math.random())]
// Set the scrolling flag
scrolling = true
// Update the controls
write_controls()
if (viewer_data.transition == "slide") {
slide_out()
}
else {
wipe_out()
}
}
function next_slide() {
// Change the pending slide number
pending_slide = current_slide + 1
initialize_viewer()
}
function previous_slide() {
// Change the pending slide number
pending_slide = current_slide - 1
initialize_viewer()
}
function slide_out() {
// Check the width and height of the object's clip region
if (dhtml_objects['viewer1'].get_clip_width() > 0 &&
dhtml_objects['viewer1'].get_clip_height() > 0) {
// If both are still positive, keep sliding
var horizontal_move = 0
var vertical_move = 0
var top_resize = 0
var right_resize = 0
var bottom_resize = 0
var left_resize = 0
// Get the horizontal adjustments
if (viewer_data.h_direction == "left") {
horizontal_move = -viewer_data.scrollamount
left_resize = viewer_data.scrollamount
}
else if (viewer_data.h_direction == "right") {
horizontal_move = viewer_data.scrollamount
right_resize = -viewer_data.scrollamount
}
else if (viewer_data.h_direction == "both") {
left_resize = viewer_data.scrollamount
right_resize = -viewer_data.scrollamount
}
// Get the vertical adjustments
if (viewer_data.v_direction == "down") {
vertical_move = viewer_data.scrollamount
bottom_resize = -viewer_data.scrollamount
}
else if (viewer_data.v_direction == "up") {
vertical_move = -viewer_data.scrollamount
top_resize = viewer_data.scrollamount
}
else if (viewer_data.v_direction == "both") {
bottom_resize = -viewer_data.scrollamount
top_resize = viewer_data.scrollamount
}
// Move the object
dhtml_objects['viewer1'].move_by(horizontal_move, vertical_move)
// Adjust the clip region
dhtml_objects['viewer1'].resize_clip_by(top_resize,
right_resize,
bottom_resize,
left_resize)
// Set a new timeout
timeout_id = setTimeout("slide_out()", viewer_data.scrolldelay)
write_controls()
}
else {
// Clear the timeout
clearTimeout(timeout_id)
// The pending slide is now the current slide
current_slide = pending_slide
// Prepare the incoming slide
prepare_next_slide()
}
}
function wipe_out() {
// Check the width and height of the object's clip region
if (dhtml_objects['viewer1'].get_clip_width() > 0 &&
dhtml_objects['viewer1'].get_clip_height() > 0) {
// If both are still positive, keep wiping
var top_resize = 0
var right_resize = 0
var bottom_resize = 0
var left_resize = 0
// Get the horizontal adjustments
if (viewer_data.h_direction == "left") {
right_resize = -viewer_data.scrollamount
}
else if (viewer_data.h_direction == "right") {
left_resize = viewer_data.scrollamount
}
else if (viewer_data.h_direction == "both") {
left_resize = viewer_data.scrollamount
right_resize = -viewer_data.scrollamount
}
// Get the vertical adjustments
if (viewer_data.v_direction == "down") {
top_resize = viewer_data.scrollamount
}
else if (viewer_data.v_direction == "up") {
bottom_resize = -viewer_data.scrollamount
}
else if (viewer_data.v_direction == "both") {
bottom_resize = -viewer_data.scrollamount
top_resize = viewer_data.scrollamount
}
// Adjust the clip region
dhtml_objects['viewer1'].resize_clip_by(top_resize,
right_resize,
bottom_resize,
left_resize)
// Set a new timeout
timeout_id = setTimeout("wipe_out()", viewer_data.scrolldelay)
}
else {
// Clear the timeout
clearTimeout(timeout_id)
// The pending slide is now the current slide
current_slide = pending_slide
// Prepare the incoming slide
prepare_next_slide()
}
}
function stop_it() {
// Shut down the viewer by clearing the current timeout
clearTimeout(timeout_id)
// Clear the scrolling flag
scrolling = false
// Update the controls
write_controls()
}
function prepare_next_slide() {
// Select a random wipe transition
viewer_data.transition = "wipe"
viewer_data.h_direction = h_directions[Math.floor(h_directions.length * Math.random())]
viewer_data.v_direction = v_directions[Math.floor(v_directions.length * Math.random())]
var top_clip_start = 0
var right_clip_start = viewer_data.width
var bottom_clip_start = viewer_data.height
var left_clip_start = 0
// Get the horizontal adjustments
if (viewer_data.h_direction == "left") {
left_clip_start = viewer_data.width
}
else if (viewer_data.h_direction == "right") {
right_clip_start = 0
}
else if (viewer_data.h_direction == "both") {
left_clip_start = Math.floor(viewer_data.width / 2)
right_clip_start = Math.floor(viewer_data.width / 2)
}
// Get the vertical adjustments
if (viewer_data.v_direction == "down") {
bottom_clip_start = 0
}
else if (viewer_data.v_direction == "up") {
top_clip_start = viewer_data.height
}
else if (viewer_data.v_direction == "both") {
bottom_clip_start = Math.floor(viewer_data.height / 2)
top_clip_start = Math.floor(viewer_data.height / 2)
}
// Add the image
dhtml_objects['viewer2'].set_html('<img src="' + slides[current_slide].src + '">')
// Make the object visible
dhtml_objects['viewer2'].set_visibility("visible")
// Resize it
dhtml_objects['viewer2'].resize_clip_to(top_clip_start,
right_clip_start,
bottom_clip_start,
left_clip_start)
// Do the wipe transition
wipe_in()
}
function wipe_in() {
// Compare the clip width and height with the object width and height
if (dhtml_objects['viewer2'].get_clip_width() < viewer_data.width ||
dhtml_objects['viewer2'].get_clip_height() < viewer_data.height) {
// If either one is less, keep wiping
var top_resize = 0
var right_resize = 0
var bottom_resize = 0
var left_resize = 0
// Get the horizontal adjustments
if (viewer_data.h_direction == "left") {
left_resize = -viewer_data.scrollamount
}
else if (viewer_data.h_direction == "right") {
right_resize = viewer_data.scrollamount
}
else if (viewer_data.h_direction == "both") {
left_resize = -viewer_data.scrollamount
right_resize = viewer_data.scrollamount
}
// Get the vertical adjustments
if (viewer_data.v_direction == "down") {
bottom_resize = viewer_data.scrollamount
}
else if (viewer_data.v_direction == "up") {
top_resize = -viewer_data.scrollamount
}
else if (viewer_data.v_direction == "both") {
bottom_resize = viewer_data.scrollamount
top_resize = -viewer_data.scrollamount
}
// Adjust the clip region
dhtml_objects['viewer2'].resize_clip_by(top_resize,
right_resize,
bottom_resize,
left_resize)
// Set a new timeout
timeout_id = setTimeout("wipe_in()", viewer_data.scrolldelay)
}
else {
stop_it()
}
}
function write_controls() {
// Write the slide number
if (scrolling) {
slide_text = "Loading the next slide...<p>"
}
else {
slide_text = "Slide #" + eval(current_slide + 1) + "—" + slides[current_slide].caption + "<p>"
}
if (current_slide == 0 || scrolling) {
previous_control = "Previous"
}
else {
previous_control = '<a href="javascript:previous_slide()">Previous</a>'
}
if (current_slide == slides.length - 1 || scrolling) {
next_control = "Next"
}
else {
next_control = '<a href="javascript:next_slide()">Next</a>'
}
dhtml_objects["controls"].set_html(slide_text + previous_control + " " + next_control)
}
//-->
</script>
</head>
<body onLoad="initialize()">
<!--IE needs to have the positioning inside the tag -->
<div id="viewer1" style="position:absolute; left:10; top:0">
<img src="http://www.mcfedries.com/graphics/fiesole1.jpg">
</div>
<div id="viewer2" style="position:absolute; left:10; top:0"></div>
<div id="controls" style="position:absolute; left:10; top:325; width: 525; text-align: center; font-weight:bold"></div>
</div>
</body>
</html>
[Ctrl+A 全部选择进行拷贝 提示：可先修改部分代码，再点击运行]
不错的图片显示效果
<script language=JavaScript>
<!--
var num = 50
function chFilter() {
if(num > 2) {
num -= 1
img1.style.filter = "progid:DXImageTransform.Microsoft.Pixelate(MaxSquare=" + num + ")"
setTimeout("chFilter()",5)
} else {
img1.style.filter = ""
}
}
//-->
</script>
<body onload="img1.style.visibility='visible';chFilter()">
<img id=img1 style="FILTER: progid:DXImageTransform.Microsoft.Pixelate(MaxSquare=50); VISIBILITY: hidden" src=http://www.it365cn.com/images/banner/yesky.jpg border=0 align="absmiddle">
[Ctrl+A 全部选择进行拷贝 提示：可先修改部分代码，再点击运行]
扫一扫
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
