1/******************************************************************* 2* File : JSFX_ImageFadeSwap.js © JavaScript-FX.com 3* Created : 2001/08/31 4* Author : Roy Whittle ([email protected]) www.Roy.Whittle.com 5* Purpose : To create a more dynamic image swap using opacity 6* History 7* Date Version Description 8* 2001-08-09 1.0 First version 9* 2001-08-31 1.1 Got it working with NS6 - You must use opaque 10* GIF's and use a STYLE attrib in the main 11* HTML Page - Thanks Owl. 12* 2001-08-31 1.2 Added different FadIn/FadeOut and converted 13* all vars to JSFX name space. 14* 2001-09-01 1.3 Make it so you only need one onMouseOver 15* onMouseOut in the main document. 16* 2001-09-09 1.4 Allow you to do a "Swap Other Image" so 17* you can swap the same image with different pictures. 18* 2001-09-17 1.5 Create the pre-loading object - just like 19* simple rollovers and animated rollovers. 20* allows for a similar interface to all. 21* 2001-09-18 1.6 The code contains so much of SimpleRollovers that 22* I added imgOn and imgOff so you can mix rollovers 23* without having to include 2 ".js" files. 24* 2002-02-08 1.7 If the ON image is already loaded don't reload it. 25* This should help with the IE bug that reloads images 26* from the server even though they are pre-cached. 27* (will not work for swapping multiple pictures into same Image object) 28* 2002-02-13 1.8 Corrected a bug in JSFX.findImg 29* 2002-04-23 1.9 Write out the style tag. 30* 2002-06-09 1.10 Attempt fix for IE on a Mac 31* 2002-08-27 1.11 Fix a bug whereby opacity may go over 100 which 32* may be causing a bug in IE6 33* 2002-08-29 1.12 Thanks to piglet (http://homepage.ntlworld.com/thepiglet/) 34* I now have a partial fix for NS7 and Mozilla 1.1. 35***********************************************************************/ 36/****** User may alter these to change the fade effect ********/ 37var FadeInStep = 20; 38var FadeOutStep = 20; 39/****** Don't alter anything else **************/
40document.write('<STYLE TYPE="text/css">.imgFader{ position:relative; filter:alpha(opacity=0); -moz-opacity:0.0 }</STYLE>'); 41 42if(!window.JSFX) 43 JSFX=new Object(); 44 45JSFX.RolloverObjects=new Array(); 46 47JSFX.Rollover = function(name, img) 48{ 49 JSFX.RolloverObjects[name]=new Image(); 50 JSFX.RolloverObjects[name].img_src = img; 51 if(!JSFX.Rollover.postLoad) 52 JSFX.RolloverObjects[name].src = img; 53} 54JSFX.Rollover.postLoad = false; 55JSFX.Rollover.loadImages = function() 56{ 57 var i; 58 for(i in JSFX.RolloverObjects) 59 { 60 r=JSFX.RolloverObjects[i]; 61 r.src=r.img_src; 62 } 63} 64JSFX.Rollover.error = function(n) 65{ 66 alert("JSFX.Rollover - An Error has been detected\n" 67 + "----------------------------------\n" 68 + "You must define a JSFX.Rollover in your document\n" 69 + "JSFX.Rollover(\""+n+"\",\"your_on_img.gif\")\n" 70 + "(check the spelling of your JSFX.Rollovers)"); 71} 72/******************************************************************* 73* 74* Function : getImg 75* 76* Description : In Netscape 4 images could be in layers so we might 77* have to recurse the layers to find the image 78* 79*****************************************************************/ 80JSFX.getImg = function(n, d) 81{ 82 var img = d.images[n]; 83 if(!img && d.layers) 84 for(var i=0 ; !img && i<d.layers.length ; i++) 85 img=JSFX.getImg(n,d.layers[i].document); 86 return img; 87} 88/******************************************************************* 89* 90* Function : findImg 91* 92* Description : gets the image from the document and reports an 93* error if it cannot find it. 94* 95*****************************************************************/ 96JSFX.findImg = function(n, d) 97{ 98 var img = JSFX.getImg(n, d); 99 100 /*** Stop emails because the image was named incorrectly ***/ 101 if(!img) 102 { 103 alert("JSFX.findImg - An Error has been detected\n" 104 + "----------------------------------\n" 105 + "You must define an image in your document\n" 106 + "<IMG SRC=\"your_image.ext\" NAME=\""+n+"\">\n" 107 + "(check the NAME= attribute of your images)"); 108 109 return(new Image()); 110 } 111 return img; 112} 113 114JSFX.ImageFadeRunning=false; 115JSFX.ImageFadeInterval=30; 116 117/******************************************************************* 118* 119* Function : imgFadeIn 120* 121* Description : This function is based on the turn_on() function 122* of animate2.js (animated rollovers from www.roy.whittle.com). 123* Each image object is given a state. 124* OnMouseOver the state is switched depending on the current state. 125* Current state -> Switch to 126* =========================== 127* null -> OFF. 128* OFF -> FADE_IN 129* FADE_OUT -> FADE_IN 130* FADE_OUT -> FADE_OUT_IN (if the new image is different) 131* FADE_IN_OUT-> FADE_IN (if the image is the same) 132*****************************************************************/ 133JSFX.imgFadeIn = function(img, imgSrc) 134{ 135 if(img) 136 { 137 if(img.state == null) 138 { 139 img.state = "OFF"; 140 img.index = 0; 141 img.next_on = null; 142 } 143 144 if(img.state == "OFF") 145 { 146 /*** Vers 1.7 only load the ON image once ever ***/ 147 if(img.src.indexOf(imgSrc) == -1) 148 img.src=imgSrc; 149 150 img.currSrc = imgSrc; 151 img.state = "FADE_IN"; 152 JSFX.startFading(); 153 } 154 else if( img.state == "FADE_IN_OUT" 155 || img.state == "FADE_OUT_IN" 156 || img.state == "FADE_OUT") 157 { 158 if(img.currSrc == imgSrc) 159 img.state = "FADE_IN"; 160 else 161 { 162 163 img.next_on = imgSrc; 164 img.state="FADE_OUT_IN"; 165 } 166 } 167 } 168} 169/******************************************************************* 170* 171* Function : imgFadeOut 172* 173* Description : This function is based on the turn_off function 174* of animate2.js (animated rollovers from www.roy.whittle.com). 175* Each image object is given a state. 176* OnMouseOut the state is switched depending on the current state. 177* Current state -> Switch to 178* =========================== 179* ON -> FADE_OUT. 180* FADE_IN -> FADE_IN_OUT. 181* FADE_OUT_IN -> FADE_IN. (after swapping to the next image) 182*****************************************************************/ 183JSFX.imgFadeOut = function(img) 184{ 185 if(img) 186 { 187 if(img.state=="ON") 188 { 189 img.state="FADE_OUT"; 190 JSFX.startFading(); 191 } 192 else if(img.state == "FADE_IN") 193 { 194 img.state="FADE_IN_OUT"; 195 } 196 else if(img.state=="FADE_OUT_IN") 197 { 198 img.next_on == null; 199 img.state = "FADE_OUT"; 200 } 201 } 202} 203/******************************************************************* 204* 205* Function : startFading 206* 207* Description : This function is based on the start_animating() function 208* of animate2.js (animated rollovers from www.roy.whittle.com). 209* If the timer is not currently running, it is started. 210* Only 1 timer is used for all objects 211*****************************************************************/ 212JSFX.startFading = function() 213{ 214 if(!JSFX.ImageFadeRunning) 215 JSFX.ImageFadeAnimation(); 216} 217 218/******************************************************************* 219* 220* Function : ImageFadeAnimation 221* 222* Description : This function is based on the Animate function 223* of animate2.js (animated rollovers from www.roy.whittle.com). 224* Each image object has a state. This function 225* modifies each object and (possibly) changes its state. 226*****************************************************************/ 227JSFX.ImageFadeAnimation = function() 228{ 229 JSFX.ImageFadeRunning = false; 230 for(i=0 ; i<document.images.length ; i++) 231 { 232 var img = document.images[i]; 233 if(img.state) 234 { 235 if(img.state == "FADE_IN") 236 { 237 img.index+=FadeInStep; 238 239 if(img.index > 100) 240 img.index = 100; 241 242 if(img.filters)
243 img.filters.alpha.opacity = img.index; 244 else 245 img.style.MozOpacity = img.index/101; 246 247 if(img.index == 100) 248 img.state="ON"; 249 else 250 JSFX.ImageFadeRunning = true; 251 } 252 else if(img.state == "FADE_IN_OUT") 253 { 254 img.index+=FadeInStep; 255 if(img.index > 100) 256 img.index = 100; 257 258 if(img.filters) 259 img.filters.alpha.opacity = img.index; 260 else 261 img.style.MozOpacity = img.index/101; 262 263 264 if(img.index == 100) 265 img.state="FADE_OUT"; 266 267 JSFX.ImageFadeRunning = true; 268 } 269 else if(img.state == "FADE_OUT") 270 { 271 img.index-=FadeOutStep; 272 if(img.index < 0) 273 img.index = 0; 274 275 if(img.filters) 276 img.filters.alpha.opacity = img.index; 277 else 278 img.style.MozOpacity = img.index/101; 279 280 281 if(img.index == 0) 282 img.state="OFF"; 283 else 284 JSFX.ImageFadeRunning = true; 285 } 286 else if(img.state == "FADE_OUT_IN") 287 { 288 img.index-=FadeOutStep; 289 if(img.index < 0) 290 img.index = 0; 291 292 if(img.filters)
293 img.filters.alpha.opacity = img.index; 294 else 295 img.style.MozOpacity = img.index/101; 296 297 if(img.index == 0) 298 { 299 img.src = img.next_on; 300 img.currSrc = img.next_on; 301 img.state="FADE_IN"; 302 } 303 JSFX.ImageFadeRunning = true; 304 } 305 } 306 } 307 /*** Check to see if we need to animate any more frames. ***/ 308 if(JSFX.ImageFadeRunning) 309 setTimeout("JSFX.ImageFadeAnimation()", JSFX.ImageFadeInterval); 310} 311/******************************************************************* 312* 313* Function : hasOpacity 314* 315* Description : Tests if the browser allows Opacity 316* 317*****************************************************************/ 318JSFX.hasOpacity = function(obj) 319{ 320 if(document.layers) 321 return false; 322 323 if(window.opera) 324 return false; 325 326 if(navigator.userAgent.toLowerCase().indexOf("mac") != -1) 327 return false; 328 329 return true; 330} 331/******************************************************************* 332* 333* Function : fadeIn /fadeOut 334* 335* Description : Detects browser that can do opacity and fades the images 336* For browsers that do not support opacity it just does an image swap. 337* (I only know about NS4 but maybe IE on a Mac also ?) 338* For these functions to work you need to name the image 339* e.g. for an image named "home" you need 340* <IMG .... NAME="home"> 341* and you need 2 images, the on and the off image 342*****************************************************************/ 343JSFX.fadeIn = function(imgName, rollName) 344{ 345 if(rollName == null) 346 rollName=imgName; 347 348 /*** Stop emails because the rollover was named incorrectly ***/ 349 if(!JSFX.RolloverObjects[rollName]) 350 { 351 JSFX.Rollover.error(rollName); 352 return; 353 } 354 355 var img = JSFX.findImg(imgName, document); 356 if(JSFX.hasOpacity(img)) 357 JSFX.imgFadeIn(img, JSFX.RolloverObjects[rollName].img_src); 358 else 359 { 360 if(img.offSrc==null) 361 img.offSrc=img.src; 362 img.src=JSFX.RolloverObjects[rollName].img_src; 363 } 364} 365JSFX.fadeOut = function(imgName) 366{ 367 var img = JSFX.findImg(imgName, document); 368 if(JSFX.hasOpacity(img)) 369 JSFX.imgFadeOut(img); 370 else 371 img.src=img.offSrc; 372} 373/******************************************************************* 374* 375* Function : imgOn /imgOff 376* 377* Description : Included these functions so you can mix simple and 378* fading rollovers without having to include 2 ".js" files 379* 380*****************************************************************/ 381JSFX.imgOn = function(imgName, rollName) 382{ 383 if(rollName == null) 384 rollName=imgName; 385 386 /*** Stop emails because the rollover was named incorrectly ***/ 387 if(!JSFX.RolloverObjects[rollName]) 388 { 389 JSFX.Rollover.error(rollName); 390 return; 391 } 392 var img = JSFX.findImg(imgName,document); 393 if(img.offSrc==null) 394 img.offSrc=img.src; 395 img.src=JSFX.RolloverObjects[rollName].img_src; 396} 397JSFX.imgOff = function(imgName) 398{ 399 var img = JSFX.findImg(imgName,document); 400 img.src=img.offSrc; 401}
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.