Hi there,
I'm having trouble getting a rotating image script working on a site. Unfortunately it's not displaying correctly in Firefox or IE9 and I need some help to fix that and wondered if anyone would be kind enough to help please?
It seems to get stuck on the Sharpie animation (the second one in a sequence of 9) in IE and is jumpy throughout in Firefox, though it seems to be working fine in Opera and Chrome.
From my limited knowledge - and it's limited - I think it has something to do with animated gifs not displaying correctly in Firefox but it could also have something to do with the time delay settings in the coding itself. When I originally added in the time delays I based it on the length of each animated gif and added in an initial time delay of 3 seconds as you can see below. How do I fix it so I can see the rotating banner in full in all browsers?
thanks
Helen
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Banner</title>
<script type="text/javascript">
<!-- Original: D. Keith Higgs (dkh2@po.cwru.edu) -->
<!-- Begin
var timeDelay = 3; // initial change delay time in seconds
/* Provide image with time value - scout@communitymx.com */
var Pix = new Array (
["/skins/zipskin_khxc0091/media/1_gen_ban_crc_intro.gif", 15, "http://www.crc-tasktron.co.uk/"]
, ["/skins/zipskin_khxc0091/media/2_gen_ban_sharpie.gif", 9, "http://www.crc-tasktron.co.uk/gbu0-catshow/SHARPIE.html"]
, ["/skins/zipskin_khxc0091/media/3_gen_ban_rhino.gif", 6, "http://www.crc-tasktron.co.uk/gbu0-catshow/LT0300.html"]
, ["/skins/zipskin_khxc0091/media/4_gen_ban_dymo.gif", 10, "http://www.crc-tasktron.co.uk/gbu0-catshow/DYMO.html"]
, ["/skins/zipskin_khxc0091/media/5_gen_ban_leitz.gif", 13, "http://www.crc-tasktron.co.uk/gbu0-catshow/LEITZ.html"]
, ["/skins/zipskin_khxc0091/media/6_gen_ban_xyron.gif", 18, "http://www.crc-tasktron.co.uk/gbu0-catshow/XYRON.html"]
, ["/skins/zipskin_khxc0091/media/7_gen_ban_canon.gif", 14, "http://www.crc-tasktron.co.uk/gbu0-catshow/CANON.html"]
, ["/skins/zipskin_khxc0091/media/8_gen_ban_cardscan.gif", 13, "http://www.crc-tasktron.co.uk/gbu0-catshow/BC0000.html"]
);
var howMany = Pix.length;
timeDelay *= 1000;
var PicCurrentNum = 0;
var PicCurrent = new Image();
PicCurrent.src = Pix[PicCurrentNum][0];
PicCurrent.href = Pix[PicCurrentNum] [2];
function startPix() {
timer = setInterval("slideshow()", timeDelay);
}
function slideshow() {
PicCurrentNum++;
if (PicCurrentNum == howMany) {
PicCurrentNum = 0;
}
PicCurrent.src = Pix[PicCurrentNum][0];
document["ChangingPix"].src = PicCurrent.src;
PicCurrent.href = Pix[PicCurrentNum][2];
document.links["bannerLink"].href = PicCurrent.href;
/* Redeclare timer with given value - scout@communitymx.com */
timeDelay = Pix[PicCurrentNum][1]*1000;
clearInterval(timer);
timer = setInterval("slideshow()", timeDelay);
}
// End -->
</script>
</head>
<body onload="startPix()">
<a name="bannerLink" href="#" title="banner link"><img name="ChangingPix" src="/skins/zipskin_khxc0091/media/1_gen_ban_crc_intro.gif" width="530" height="120" border="0" alt="Supplier range from CRC" /> </a>
</body>
</html>