tranparency

[AndrewSmith]

Helo again, I (again) am bringing up this topic because I thought that I got it working but did not. I am trying to set up my cycling banner so that when one image ends it fades out, and as that image fades out, the next one fades in. Here is what I have for my script. In the head<script>imgArray = new Array(4);imgArray[0] = new Image;imgArray[0].src = "epicgamer.jpg";imgArray[1] = new Image;imgArray[1].src = "atv.jpg";imgArray[2] = new Image;imgArray[2].src = "awar.jpg";imgArray[3] = new Image;imgArray[3].src = "banana.jpg";imgArray[4] = new Image;imgArray[4].src = "war.jpg";imgArray[5] = new Image;imgArray[5].src = "bird.jpg";imgArray[6] = new Image;imgArray[6].src = "cannon.jpg";imgArray[7] = new Image;imgArray[7].src = "cross.jpg";imgArray[8] = new Image;imgArray[8].src = "dragracer.jpg";imgArray[9] = new Image;imgArray[9].src = "escape.jpg";imgArray[10] = new Image;imgArray[10].src = "face.jpg";imgArray[11] = new Image;imgArray[11].src = "game.jpg";imgArray[12] = new Image;imgArray[12].src = "goal.jpg";imgArray[13] = new Image;imgArray[13].src = "happy.jpg";imgArray[14] = new Image;imgArray[14].src = "hgame.jpg";imgArray[15] = new Image;imgArray[15].src = "hocky.jpg";imgArray[16] = new Image;imgArray[16].src = "logix.jpg";imgArray[17] = new Image;imgArray[17].src = "mania.jpg";imgArray[18] = new Image;imgArray[18].src = "math.jpg";imgArray[19] = new Image;imgArray[19].src = "maze.jpg";imgArray[20] = new Image;imgArray[20].src = "ngame.jpg";index = 0;function cycle(){document.banner.src = imgArray[index].src;index++;if (index == 21){index = 0;}setTimeout("cycle()", 2000);return;}</script> In the body<table align=center bordersize=10 bordercolor=#999999><tr><td><img src="epicgamer.jpg" name="banner" width="700" height="400"></td></tr></table>

[jeffman]

I assume you want to do it yourself and not have someone write it for you. Here are some tips to get started. 1. you need two timeouts. The first rotates the images. It runs all the time. The second controls the image fade. It gets turned on by the first timeout and turns itself off when the fade is complete. 2. The thing you're changing is the CSS opacity property. You'll need to experiment with increments and intervals. 3. You need two images to occupy the same coordinates. The easiest thing is to have a div element with one image as its background. The div contains an image element. 4. You need two images because during the fade, both have to be visible simultaneously. You don't actually rotate the src until the fade is complete. The best you can accomplish with one image is fading one image out, changing the source, and then fading the next image in. You wouldn't get the cross-fade effect.

[thescientist]

what's the problem? Are you checking for errors in the console? To reference the <img>, I would certainly reference the element using an ID and document.getElementById. also, you are using setTimeout, which only run once. For a slideshow, you probably want to use setInterval. aside from that, there are the numerous points that DD brought up, but i'm assuming you are attempting this one working piece at a time.

Edited March 26, 2013 by thescientist

[AndrewSmith]

So, what you are saying is that I need two timeouts, one controling time the image that will be displayed and the other controling opacity of the image being displayed. But I don't know how to do the opacity part, how am I supposed to combinediv{opacity:0.5;filter:Alpha(opacity=50);}and the timeout? And for the image all I need to do is place <div></div> on both ends of the <img> tag, with a specified bgimage for the div. correct?