Odd Mozilla Rollover Behavior

[jscheuer1]

A while back someone asked me how to do something like the Widget Browser at Apple - Downloads - Dashboard but, they lost interest before we got very far. I liked the idea however and eventually came up with Three Column - Demo. There's just one problem. In Mozilla, when you select something from the first column and then mouse over another selection, it acts like it is loading a page. It is caused by the image rollover somehow. This does not happen in IE. I've tried the set up with no style and using preloads for the rollovers (using the image.src in the script instead of the image's name). Neither of these changes helped this odd Mozilla behavior. I've seen and heard of this happening in other scripts. I would like to know why it is happening and what can be done to prevent it as it looks odd, even scary, as though something is going on in the background.

Here is the script with the preload, the demo above uses it without the preload but, as I said, it doesn't make any difference:

/* © John Davenport Scheuer */

var containerPage='3col.htm'
var masterList='page1.htm'
var midPlace='page2.htm'
var endBlank='page3.htm'
var endPlace='page4.htm'

image1=new Image()
image1.src="whitearrow.gif"
image2=new Image()
image2.src="bluearrow.gif"



function restoreA(){
var links=document.getElementsByTagName('a');
for (var xdt =0; xdt<links.length ; xdt++){
if (links[xdt].className=='clicked'||links[xdt].className=='oldClicked'){
links[xdt].className='list'
swapImage(links[xdt].innerHTML,image2.src)
}
}
}

function restoreB(){
parent.frame1.grayOut()
var links=document.getElementsByTagName('a');
for (var xdt =0; xdt<links.length ; xdt++){
if (links[xdt].className=='clicked'){
links[xdt].className='list'
swapImage(links[xdt].innerHTML,image2.src)
}
}
}

function grayOut(){
var links=document.getElementsByTagName('a');
for (var xdt =0; xdt<links.length ; xdt++){
if (links[xdt].className=='clicked'){
links[xdt].className='oldClicked'
}
}
}

function swapImage(elm,img){
var tmpStr=elm.substr(elm.indexOf('name='))
document.images['ar'+parseInt(tmpStr.substr(tmpStr.indexOf('ar')+2))].src=img
}

function init() {
if (location.href.indexOf(containerPage)!==-1)
init1();
else if (location.href.indexOf(masterList)!==-1)
init2();
else
init3();
}

function init1() {
if (frame1.location.href.indexOf(masterList)==-1)
frame1.location.replace(masterList);
if (frame2.location.href.indexOf(midPlace)==-1)
frame2.location.replace(midPlace);
if (frame3.location.href.indexOf(endBlank)==-1)
frame3.location.replace(endBlank)
}
function init2() {
var links=document.getElementsByTagName('a');
for (var xdt =0; xdt<links.length ; xdt++){
if (links[xdt].className=='list'){
links[xdt].onmouseover=function(){
swapImage(this.innerHTML,image1.src)
}
links[xdt].onmouseout=function(){
if (this.className=='list')
swapImage(this.innerHTML,image2.src)
}
links[xdt].onclick=function(){
restoreA();this.className='clicked';
swapImage(this.innerHTML,image1.src)
if (parent.frame3.location.href.indexOf(endBlank)!==-1)
parent.frame3.location.replace(endPlace);
parent.frame2.location.replace(this.href);return false
}
}
}
}

function init3() {
var links=document.getElementsByTagName('a');
for (var xdt =0; xdt<links.length ; xdt++){
if (links[xdt].className=='list'){
links[xdt].onmouseover=function(){
swapImage(this.innerHTML,image1.src)
}
links[xdt].onmouseout=function(){
if (this.className=='list')
swapImage(this.innerHTML,image2.src)
}
links[xdt].onclick=function(){
restoreB();this.className='clicked';
swapImage(this.innerHTML,image1.src)
parent.frame3.location.replace(this.href);return false
}
}
}
}
if ( typeof window.addEventListener != "undefined" )
    window.addEventListener( "load", init, false );
else if ( typeof window.attachEvent != "undefined" ) {
    window.attachEvent( "onload", init );
}
else {
    if ( window.onload != null ) {
        var oldOnload = window.onload;
        window.onload = function ( e ) {
            oldOnload( e );
            init();
        };
    }
    else
        window.onload = init;
}

[mwinter]

In Mozilla, when you select something from the first column and then mouse over another selection, it acts like it is loading a page. It is caused by the image rollover somehow.

This is a bug. One which was probably reported a long time ago, but not high on the to-do list as it's only cosmetic.

I wouldn't worry about it, and don't know of any way to fix it, anyway.

Mike