Fade one image to another

**tech_support** · 03-16-2007, 10:01 AM

I need a script to fade one image to another and not flicker in FireFox. Any ideas?

**codeexploiter** · 03-16-2007, 10:08 AM

Have you tried this script

**tech_support** · 03-16-2007, 10:09 AM

Actually, I have but I don't need a slideshow, just fading one image to another.

**codeexploiter** · 03-16-2007, 10:21 AM

what about tweaking the technique used here so that it can serve your purpose.

**tech_support** · 03-17-2007, 03:00 AM

I want to fade from one image to another, not just for one image.

**jscheuer1** · 03-17-2007, 05:15 AM

I've had this lying around for awhile:

http://home.comcast.net/~jscheuer1/s...controlled.htm

Check out the bottom most image.

**tech_support** · 03-17-2007, 05:58 AM

Yep, that's the effect that I want. But I don't know what function it is in your code...

**jscheuer1** · 03-17-2007, 07:18 AM

Well the entire script is used and BTW, this isn't the standard Ultimate Fade In script. The particular code for that last image is:

HTML Code:

<div style="position:relative;z-index:10000;width:140px;" onmouseover="switchFade(3,2)" onmouseout="switchFade(0,2)"><script type="text/javascript">
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
new fadeshow(fadeimages2, 140, 225, 0, 100, 1)
</script></div>

What you are most concerned with are the mouse events. The script initializes the 'show' which is then controlled by the mouse events. I'll break one of those mouse events down:

Code:

onmouseover="switchFade(3,2)"

The red 3 is the image associated with the array entry [3] for this show which is using the fadeimages2 array as you can see in the script call. That means photo9.jpg:

Code:

fadeimages2[3]=["photo9.jpg", "", ""] //plain image syntax

The green 2 means that it is the 3rd instance of a show on the page. Instances are numbered from 0 to whatever and because there are two other shows before it (0 and 1), this instance is 2.

Basically what function switchFade(iNum, instance) does is switch to and fade in the image number to the show instance.

**tech_support** · 03-18-2007, 04:39 AM

When I tested your script, the page just flickered (black to white and black again).

I've found another script that lets me blend images (shorter version/no slideshow) but it flickers. Anyone know why?

**codeexploiter** · 03-20-2007, 06:02 AM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- TWO STEPS TO INSTALL FADING ROLLOVER:

  1.  Copy the coding into the HEAD of your HTML document
  2.  Add the last code into the BODY of your HTML document  -->

<!-- STEP ONE: Paste this code into the HEAD of your HTML document  -->

<SCRIPT LANGUAGE="JavaScript">

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
var maximages =6; // how many fade images do you have?
var fadespeed = 300; // fade frame time in milliseconds;  125 = 125 ms

var fadeintimer;
var fadeouttimer;
var fadeincount = 0;
var fadeoutcount = maximages-1;
var fadearray = new Array(maximages);  // enter all the fade images here
// the first item should be 0, then numbered through 1 less than your maximages

fadearray[0] = "http://javascript.internet.com/img/fading-rollover/fade00.jpg";
fadearray[1] = "http://javascript.internet.com/img/fading-rollover/fade01.jpg";
fadearray[2] = "http://javascript.internet.com/img/fading-rollover/fade02.jpg";
fadearray[3] = "http://javascript.internet.com/img/fading-rollover/fade03.jpg";
fadearray[4] = "http://javascript.internet.com/img/fading-rollover/fade04.jpg";
fadearray[5] = "http://javascript.internet.com/img/fading-rollover/fade05.jpg";

for (var i = 0; i < maximages; i++) {
eval('pic' + i + ' = new Image();');
eval('pic' + i + '.src = fadearray[i];'); // preloads fade images
}
function fade_in() {
clearTimeout(fadeouttimer);
document.images['fade-pic'].src = fadearray[fadeincount];
if (fadeincount != maximages-1) {
fadeincount++;
fadeintimer = setTimeout('fade_in()', fadespeed);
}
else {
clearTimeout(fadeintimer);
fadeincount = 0;
   }
}
function fade_out() {
clearTimeout(fadeintimer);
document.images['fade-pic'].src = fadearray[fadeoutcount];
if (fadeoutcount != 0) {
fadeoutcount--;
fadeouttimer = setTimeout('fade_out()', fadespeed);
}
else {
clearTimeout(fadeouttimer);
fadeoutcount = maximages-1;
   }
}
//  End -->
</script>
</HEAD>

<!-- STEP TWO: Copy this code into the BODY of your HTML document  -->

<BODY>

<center>
<img src="http://javascript.internet.com/img/fading-rollover/icontop.gif" border=0><br>
<img name="fade-pic" height=56 width=300 border=0 src="http://javascript.internet.com/img/fading-rollover/fade00.jpg"><br>
<img src="http://javascript.internet.com/img/fading-rollover/iconbtm.gif" border=0><br></a>
</center>

<p><center>
<font face="arial, helvetica" size="-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</center><p>

<!-- Script Size:  2.49 KB -->
<script type="text/javascript">
setTimeout('fade_in()',1000);
</script>
</body>
</html>

Thread: Fade one image to another

Thread Tools

Search Thread

Fade one image to another

Bookmarks

Bookmarks

Posting Permissions