Javascript: Stop Banner slideshow when mouseover (not work in Firefox)

Question

The following code can stop the slideshow banner in IE, but cannot pause in Firefox ? Please help.

Thanks.

Joe

The following is my javascript code to display banner:

var promotionTime;
var p=0;
var zone=0;

function changeBanner2(imgFile,imglink,altText){
//pause banner when mouseover
if((document.getElementById("promotionBanner").getAttribute("paused"))!=true)     {     
document.getElementById("promotionBanner").src=imgFile;
document.getElementById("promotionBanner").title=altText;
document.getElementById("bannerLink").href=imglink;
} }

function promotionBannerChanger(promotionImg,promotionLink,promotionAlt,num){
if(zone!=num){
    p=0;
    zone=num;
}

//set attribute to pause banner when mouseover
document.getElementById("promotionBanner").onmouseover =
                     function() { this.setAttribute("paused", true);}
document.getElementById("promotionBanner").onmouseout = 
                     function() { this.removeAttribute("paused");}

changeBanner2(promotionImg[p],promotionLink[p],promotionAlt[p]);
p++;
if(p>=promotionImg.length){
    p=0;
}
clearTimeout(promotionTime);
if(num==1)
    promotionTime=setTimeout("promotionBannerChanger(promotionImage1,promotionLink1,promotionAlt1,'1')",2000);
else if(num==2)
    promotionTime=setTimeout("promotionBannerChanger(promotionImage2,promotionLink2,promotionAlt2,'2')",2000);
else if(num==3)
    promotionTime=setTimeout("promotionBannerChanger(promotionImage3,promotionLink3,promotionAlt3,'3')",2000); }

ASP code:

            <td width="480" >
            <div id="banner" oonmouseover="paused=true;" onmouseout="paused=false;">
                    <a id="bannerLink" href="archive.htm"><img title="Hot Topic" src=./promotion/1/en/c1Lagge.GIF id="promotionBanner" width="480" height="252"  border="0"></a>
            </div>
                </td>
            </table>

Answer 1

document.getElementById("promotionBanner").onmouseover =
                         function() { this.setAttribute("paused", true); };
document.getElementById("promotionBanner").onmouseout = 
                         function() { this.removeAttribute("paused"); };


function changeBanner2(imgFile,imglink,altText){
    if(document.getElementById("promotionBanner").getAttribute("paused")) {
        document.getElementById("promotionBanner").src=imgFile;
        document.getElementById("promotionBanner").title=altText;
        document.getElementById("bannerLink").href=imglink;
    }
}

Basically, on hover, you add the "paused" attribute to the promotionBanner, if that is the relevant element. If the timeout function gets run while the "paused" attribute is active, don't advance the banner. You may also want to return a true/false value from changeBanner2 in order to determine whether or not you advance the counter. This way, you won't skip images when the mouse leaves and the banner starts up again.