theserene1
OSNN One Post Wonder
- Joined
- 9 Jul 2008
- Messages
- 1
Hi there
I'm trying to build an image rotator but I cant seem to find the right code for fade to use in it or find the right place to put it to get it to work. Can someone advise on the fade in and fade out code to insert?
Thank you kindly.
The code is below
I'm trying to build an image rotator but I cant seem to find the right code for fade to use in it or find the right place to put it to get it to work. Can someone advise on the fade in and fade out code to insert?
Thank you kindly.
The code is below
Code:
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
// Comma separated list of images to rotate
var imgs = new Array('Site Images/11.jpg','Site Images/12.jpg','Site Images/13.jpg','Site Images/14.jpg','Site Images/15.jpg','Site Images/16.jpg','Site Images/17.jpg','Site Images/18.jpg','Site Images/19.jpg','Site Images/20.jpg','Site Images/21.jpg','Site Images/22.jpg');
// delay in milliseconds between image swaps 1000 = 1 second
var delay = 4000;
var counter = 0;
function preloadImgs(){
for(var i=0;i<imgs.length;i++){
MM_preloadImages(imgs[i]);
}
}
function randomImages(){
if(counter == (imgs.length)){
counter = 0;
}
MM_swapImage('rotator', '', imgs[counter++]);
setTimeout('randomImages()', delay);
}
//-->
</script>
<style type="text/css">
<!--
.style3 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
.style4 {
font-size: 10px;
color: #666666;
}
.style5 {font-family: Arial, Helvetica, sans-serif}
.style6 {font-size: 12px}
.style7 {
font-size: 10px;
font-family: Arial, Helvetica, sans-serif;
color: #666666;
}
a:link {
color: #000000;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #000000;
}
a:hover {
text-decoration: none;
color: #000000;
}
a:active {
text-decoration: none;
color: #000000;
}
-->
</style>
</head>
<body onLoad="preloadImgs();randomImages();">
<p> </p>
<table width="550" height="582" align="center" cellpadding="0">
<tr>
<td width="8"><div align="left" class="style3">
<div align="left"></div>
</div> <div align="center"></div></td>
<td width="163"><span class="style3">Bobby Cheng Design Archive </span></td>
<td width="96"><span class="style7">coming soon </span></td>
<td width="112"> </td>
<td width="154"><div align="right" class="style3"><a href="news.htm">News</a></div></td>
<td width="7"><a href="news.htm"></a></td>
</tr>
<tr>
<td height="553" colspan="6"><div align="center">
<p align="left"><span class="style3"><span class="style4"><img src="Site%20Images/11.jpg" name="rotator" width="550" height="550" border="0" align="baseline" class="style3" id="rotator" ><br>
</span></span><span class="style5"><span class="style6"> </span></span></p>
</div></td>
</tr>
</table>
</body>
</html>
