Hi there,
I am using a banner code that is pulling images and links from a database for banners on our site. It works great except in firefox. I have found that if i change the timer i can get it to look good in firefox, however then the links are off. (meaning that the link associated with the image is with the wrong image). So it has something to do with timing. If i leave it how it is in IE it works good, but firefox the images only show 1/8 of the image. can someone help me with what i need to change in the code to make it work in firefox? this is the code:
<script type="text/javascript">
var FadeDurationMS=1500;
function SetOpacity(object,opacityPct)
{
// IE.
object.style.filter = 'alpha(opacity=' + opacityPct + ')';
// Old mozilla and firefox
object.style.MozOpacity = opacityPct/100;
// Everything else.
object.style.opacity = opacityPct/100;
}
function ChangeOpacity(id,msDuration,msStart,fromO,toO)
{
var element=document.getElementById(id);
var msNow = (new Date()).getTime();
var opacity = fromO + (toO - fromO) * (msNow - msStart) / msDuration;
if (opacity>=100)
{
SetOpacity(element,100);
element.timer = undefined;
}
else if (opacity<=0)
{
SetOpacity(element,0);
element.timer = undefined;
}
else
{
SetOpacity(element,opacity);
element.timer = window.setTimeout("ChangeOpacity('" + id + "'," + msDuration + "," + msStart + "," + fromO + "," + toO + ")",20);
}
}
function FadeInImage(foregroundID,newImage,backgroundID, newlink, linkID)
{
var foreground=document.getElementById(foregroundID);
if (foreground.timer) window.clearTimeout(foreground.timer);
if (backgroundID)
{
var background=document.getElementById(backgroundID);
if (background)
{
if (background.src)
{
foreground.src = background.src;
SetOpacity(foreground,100);
}
background.src = newImage;
document.getElementById(linkID).href = newlink;
background.style.backgroundImage = 'url(' + newImage + ')';
background.style.backgroundRepeat = 'no-repeat';
var startMS = (new Date()).getTime();
foreground.timer = window.setTimeout("ChangeOpacity('" + foregroundID + "'," + FadeDurationMS + "," + startMS + ",100,0)",20);
}
} else {
foreground.src = newImage;
}
}
var slideCache = new Array();
function RunSlideShow(pictureID,backgroundID,imageFiles,displaySecs,links, linkID)
{
var imageSeparator = imageFiles.indexOf(";");
var nextImage = imageFiles.substring(0,imageSeparator);
//document.write(links.indexOf(";"));
var linkseparator = links.indexOf(";");
var nextlink = links.substring(0,linkseparator);
FadeInImage(pictureID,nextImage,backgroundID, nextlink, linkID);
var futureImages = imageFiles.substring(imageSeparator+1,imageFiles.length)
+ ';' + nextImage;
var futurelinks = links.substring(linkseparator+1,links.length)
+ ';' + nextlink;
setTimeout("RunSlideShow('"+pictureID+"','"+backgroundID+"','"+futureImages+"',"+displaySecs+",'"+futurelinks+"','"+linkID+"')",
displaySecs*1500);
// Cache the next image to improve performance.
imageSeparator = futureImages.indexOf(";");
nextImage = futureImages.substring(0,imageSeparator);
if (slideCache[nextImage] == null)
{
slideCache[nextImage] = new Image;
slideCache[nextImage].src = nextImage;
}
}
</script>
<table width="680" border="0" align="right" cellpadding="0" cellspacing="0">
<tr>
<?php
$imgsResult = mysql_query("select * from tbl_bannerimages where MainFlag= 0 and RightBan=0" );
$rbanimgsStr = '';
$rbanlinks = '';
$x=1;
while($imgs = mysql_fetch_array($imgsResult, MYSQL_ASSOC))
{
if($x > 1)
{
$rbanimgsStr = $rbanimgsStr . ";";
$rbanlinks = $rbanlinks . ";";
}
if($x == 1)
{
echo "<td width='319' height='69' align='center' valign='middle'>";
echo "<span id='RBanner' width='319' height='69' align='right'>";
if($imgs['ImgLink'] != '')
{
echo "<a id='RBanLink' href=''>";
echo "<img src='BannerImages/" . $imgs['ImgName'] . "' width='319' height='69' border='0' id='RBannerImg' />";
}
else
{
echo "<a id='RBanLink' href=''>";
echo "<img src='BannerImages/" . $imgs['ImgName'] . "' width='319' height='69' border='0' id='RBannerImg' />";
}
echo "</a>";
echo "</span>";
echo "</td>";
}
$rbanimgsStr = $rbanimgsStr . "BannerImages/" . $imgs['ImgName'];
if($imgs['ImgLink'] != '')
$rbanlinks = $rbanlinks . "http://" . $imgs['ImgLink'];
else
$rbanlinks = $rbanlinks . '#';
$x++;
}
echo "<script type='text/javascript'>";
echo "RunSlideShow(\"RBannerImg\",\"RBanner\",\"" . $rbanimgsStr . "\",3,\"" . $rbanlinks . "\",\"RBanLink\");";
echo "</script>";
?>
<?php
$imgsResult = mysql_query("select * from tbl_bannerimages where MainFlag= 0 and RightBan=1" );
$lbanimgsStr = '';
$lbanlinks = '';
$i=1;
while($imgs = mysql_fetch_array($imgsResult, MYSQL_ASSOC))
{
if($i > 1)
{
$lbanimgsStr = $lbanimgsStr . ";";
$lbanlinks = $lbanlinks . ";";
}
if($i == 1)
{
echo "<td width='319' height='69' align='center' valign='middle'>";
echo "<span id='LBanner' width='319' height='69' align='right'>";
if($imgs['ImgLink'] != '')
{
echo "<a id='LBanLink' href=''>";
echo "<img src='BannerImages/" . $imgs['ImgName'] . "' width='319' height='69' border='0' id='LBannerImg' />";
}
else
{
echo "<a id='LBanLink' href=''>";
echo "<img src='BannerImages/" . $imgs['ImgName'] . "' width='319' height='69' border='0' id='LBannerImg' />";
}
echo "</a>";
echo "</span>";
echo "</td>";
}
$lbanimgsStr = $lbanimgsStr . "BannerImages/" . $imgs['ImgName'];
if($imgs['ImgLink'] != '')
$lbanlinks = $lbanlinks . "http://" . $imgs['ImgLink'];
else
$lbanlinks = $lbanlinks . '#';
$i++;
}
echo "<script type='text/javascript'>";
echo "RunSlideShow(\"LBannerImg\",\"LBanner\",\"" . $lbanimgsStr . "\",3,\"" . $lbanlinks . "\",\"LBanLink\");";
echo "</script>";
?>
</tr>
</table>
php/javascript banner code
Moderator: General Moderators