Hello Javascripters,

I confess my knowledge of javascript is very basic - I have basic knowledge of HTML and CSS, that's about it.

Nevertheless, I did find a really easy Javascript snippet of code that works great for randomly rotating a collection of images, like a slideshow.

I'm very happy how the images rotate, but I'd like to add in a fading transition between images. Basically, everything is just one big table with the HTML on top and Javascript below it:

Does anyone know an easy way to modify my existing Javascript so that it has a fade effect?

Here is the URL where you will see right away the rotating images:
http://www2.pri.org/infosite/network...hemovement.cfm

Here's the table with HTML and Javascript:

<table width="805" style="line-height: normal; font-size: 24px; font-family: Cambria;border-collapse:collapse; margin: 0;">
<tr>
<td width="479" height="268" valign="top" style="line-height: normal; font-size: 24px; font-family: Cambria;">This Black History Monthy, try something different for your listeners! Moments of the movement is an initiative to bring new and diverse voices to the radio. In this package<strong>,</strong> available exclusively to PRI affiliates, you will have available a one-hour long special, along with (28) short segments that each tell the story of the Civil Rights Movement!</td>
<td width="314" valign="top" style="line-height: normal; font-size: 16px; font-family: Cambria; display: block;">
<div id="randomdiv1" style="line-height: normal; font-size: 16px; font-family: Cambria; padding-top: 0px; padding-bottom: 5px; padding-left: 5px;">
<img src="/infosite/programs/_bhm14/esther_terry.jpg">
</div>
<div id="randomdiv2" style="line-height: normal; font-size: 16px; font-family: Cambria; padding-top: 0px; padding-bottom: 5px; padding-left: 5px;"><img src="/infosite/programs/_bhm14/robert_hayling.jpg">
</div>
<div id="randomdiv3" style="line-height: normal; font-size: 16px; font-family: Cambria; padding-top: 0px; padding-bottom: 5px; padding-left: 5px;"><img src="/infosite/programs/_bhm14/freeman_hrabowski.jpg">
</div>
<div id="randomdiv4" style="line-height: normal; font-size: 16px; font-family: Cambria; padding-top: 0px; padding-bottom: 5px; padding-left: 5px;"><img src="/infosite/programs/_bhm14/alfred_moldovan.jpg">
</div>
<script type="text/javascript" language="JavaScript"><!--
TotalRandomDivs = 4;
var CookieName = 'DivRamdomValueCookie';
function RandomDisplay() {
var r = Math.ceil(Math.random() * TotalRandomDivs);
if(TotalRandomDivs > 1) {
var ck = 0;
var cookiebegin = document.cookie.indexOf(CookieName + "=");
if(cookiebegin > -1) {
cookiebegin += 1 + CookieName.length;
cookieend = document.cookie.indexOf(";",cookiebegin);
if(cookieend < cookiebegin) { cookieend = document.cookie.length; }
ck = parseInt(document.cookie.substring(cookiebegin,cookieend));
}
while(r == ck) { r = Math.ceil(Math.random() * TotalRandomDivs); }
document.cookie = CookieName + "=" + r;
}
for( var i=1; i<=TotalRandomDivs; i++) {
document.getElementById("randomdiv"+i).style.display="none";
}
document.getElementById("randomdiv"+r).style.display="block";
}
RandomDisplay();
setInterval("RandomDisplay()",5200);
//--></script>
</td></tr></table>

Any ideas anyone has would be most appreciated!

Ben