/******************************************************************* * File : JSFX_ImageZoom.js © JavaScript-FX.com * Created : 2001/08/31 * Author : Roy Whittle (Roy@Whittle.com) www.Roy.Whittle.com * Purpose : To create a zooming effect for images * History * Date Version Description * 2001-08-09 1.0 First version * 2001-08-31 1.1 Code split - others became JSFX_FadingRollovers, * JSFX_ImageFader and JSFX_ImageZoom. * 2002-01-27 1.2 Completed development by converting to JSFX namespace * 2002-04-25 1.3 Added the functions stretchIn & expandIn * 2004-01-06 1.4 Allowed for the image (tag) being forcibly sized ***********************************************************************/ /*** Create some global variables ***/ if(!window.JSFX) JSFX=new Object(); JSFX.ImageZoomRunning = false; /******************************************************************* * * Function : zoomIn * * Description : This function is based on the turn_on() function * of animate2.js (animated rollovers from www.roy.whittle.com). * Each zoom object is given a state. * OnMouseOver the state is switched depending on the current state. * Current state -> Switch to * =========================== * null -> OFF. * OFF -> ZOOM_IN + start timer * ZOOM_OUT -> ZOOM_IN * ZOOM_IN_OUT -> ZOOM_IN *****************************************************************/ JSFX.zoomOn = function(img, zoomStep, maxZoom) { if(img) { if(!zoomStep) { if(img.mode == "EXPAND") zoomStep = img.height/10; else zoomStep = img.width/10; } if(!maxZoom) { if(img.mode == "EXPAND") maxZoom = img.height/2; else maxZoom = img.width/2; } if(img.state == null) { img.state = "OFF"; img.index = 0; img.orgWidth = img.width; img.orgHeight = img.height; img.zoomStep = zoomStep; img.maxZoom = maxZoom; } if(img.state == "OFF") { img.state = "ZOOM_IN"; start_zooming(); style= "opacity: 0.9;filter:alpha(opacity=90)" ; } else if( img.state == "ZOOM_IN_OUT" || img.state == "ZOOM_OUT") { img.state = "ZOOM_IN"; } } } JSFX.zoomIn = function(img, zoomStep, maxZoom) { img.mode = "ZOOM"; JSFX.zoomOn(img, zoomStep, maxZoom); } JSFX.stretchIn = function(img, zoomStep, maxZoom) { img.mode = "STRETCH"; JSFX.zoomOn(img, zoomStep, maxZoom); } JSFX.expandIn = function(img, zoomStep, maxZoom) { img.mode = "EXPAND"; JSFX.zoomOn(img, zoomStep, maxZoom); } /******************************************************************* * * Function : zoomOut * * Description : This function is based on the turn_off function * of animate2.js (animated rollovers from www.roy.whittle.com). * Each zoom object is given a state. * OnMouseOut the state is switched depending on the current state. * Current state -> Switch to * =========================== * ON -> ZOOM_OUT + start timer * ZOOM_IN -> ZOOM_IN_OUT. *****************************************************************/ JSFX.zoomOut = function(img) { if(img) { if(img.state=="ON") { img.state="ZOOM_OUT"; start_zooming(); } else if(img.state == "ZOOM_IN") { img.state="ZOOM_IN_OUT"; } } } /******************************************************************* * * Function : start_zooming * * Description : This function is based on the start_animating() function * of animate2.js (animated rollovers from www.roy.whittle.com). * If the timer is not currently running, it is started. * Only 1 timer is used for all objects *****************************************************************/ function start_zooming() { if(!JSFX.ImageZoomRunning) ImageZoomAnimation(); } JSFX.setZoom = function(img) { if(img.mode == "STRETCH") { img.width = img.orgWidth + img.index; img.height = img.orgHeight; } else if(img.mode == "EXPAND") { img.width = img.orgWidth; img.height = img.orgHeight + img.index; } else { img.width = img.orgWidth + img.index; img.height = img.orgHeight + (img.index * (img.orgHeight/img.orgWidth)); } } /******************************************************************* * * Function : ImageZoomAnimation * * Description : This function is based on the Animate function * of animate2.js (animated rollovers from www.roy.whittle.com). * Each zoom object has a state. This function * modifies each object and (possibly) changes its state. *****************************************************************/ function ImageZoomAnimation() { JSFX.ImageZoomRunning = false; for(i=0 ; i img.maxZoom) img.index = img.maxZoom; JSFX.setZoom(img); if(img.index == img.maxZoom) img.state="ON"; else JSFX.ImageZoomRunning = true; } else if(img.state == "ZOOM_IN_OUT") { img.index+=img.zoomStep; if(img.index > img.maxZoom) img.index = img.maxZoom; JSFX.setZoom(img); if(img.index == img.maxZoom) img.state="ZOOM_OUT"; JSFX.ImageZoomRunning = true; } else if(img.state == "ZOOM_OUT") { img.index-=img.zoomStep; if(img.index < 0) img.index = 0; JSFX.setZoom(img); if(img.index == 0) img.state="OFF"; else JSFX.ImageZoomRunning = true; } } } /*** Check to see if we need to animate any more frames. ***/ if(JSFX.ImageZoomRunning) setTimeout("ImageZoomAnimation()", 40); } //------------------------------------------------------------------------------------------------------------------------------------------------------------------------ // JavaScript Document /* Cross browser Marquee script- © Dynamic Drive (www.dynamicdrive.com) For full source code, 100's more DHTML scripts, and Terms Of Use, visit http://www.dynamicdrive.com Credit MUST stay intact */ //Specify the marquee's width (in pixels) var marqueewidth="800px" //Specify the marquee's height var marqueeheight="250px" //Specify the marquee's marquee speed (larger is faster 1-10) var marqueespeed=4 //configure background color: var marqueebgcolor="#fff" //Pause marquee onMousever (0=no. 1=yes)? var pauseit=1 //Specify the marquee's content (don't delete tag) //Keep all content on ONE line, and backslash any single quotations (ie: that\'s great): var marqueecontent='                                       ' ////NO NEED TO EDIT BELOW THIS LINE//////////// marqueespeed=(document.all)? marqueespeed : Math.max(1, marqueespeed-1) //slow speed down by 1 for NS var copyspeed=marqueespeed var pausespeed=(pauseit==0)? copyspeed: 0 var iedom=document.all||document.getElementById if (iedom) document.write('') var actualwidth='' var cross_marquee, ns_marquee function populate(){ if (iedom){ cross_marquee=document.getElementById? document.getElementById("iemarquee") : document.all.iemarquee cross_marquee.style.left=parseInt(marqueewidth)+8+"px" cross_marquee.innerHTML=marqueecontent actualwidth=document.all? temp.offsetWidth : document.getElementById("temp").offsetWidth } else if (document.layers){ ns_marquee=document.ns_marquee.document.ns_marquee2 ns_marquee.left=parseInt(marqueewidth)+8 ns_marquee.document.write(marqueecontent) ns_marquee.document.close() actualwidth=ns_marquee.document.width } lefttime=setInterval("scrollmarquee()",20) } window.onload=populate function scrollmarquee(){ if (iedom){ if (parseInt(cross_marquee.style.left)>(actualwidth*(-1)+8)) cross_marquee.style.left=parseInt(cross_marquee.style.left)-copyspeed+"px" else cross_marquee.style.left=parseInt(marqueewidth)+8+"px" } else if (document.layers){ if (ns_marquee.left>(actualwidth*(-1)+8)) ns_marquee.left-=copyspeed else ns_marquee.left=parseInt(marqueewidth)+8 } } if (iedom||document.layers){ with (document){ document.write('
') if (iedom){ write('
') write('
') write('
') write('
') } else if (document.layers){ write('') write('') write('') } document.write('
') } }