Click to See Complete Forum and Search --> : onmouseover problem in FF


screamingWeasel
07-19-2006, 12:51 AM
Hi, I have a feeling that this problem has been dealt with numerous times before but I can't solve it from the threads I have read so I am going to drag it up again.

I have a simple goal - I have x amount of images nested within div tags and each div has had its css property 'display' set to 'none'. For each image there is a corosponding link which onmouseover should set the display of the div to 'block' while resetting all others to 'none'.

I wrote a little script which worked fine in Opera, Safari, IE Mac but when tested in FF 1.5 Mac nothing happened. After some testing I have found that FF won't re-trigger an onmouseover event (used a simple alert fuction and it will only trigger once, then locks up). Any advice on how to use onmouseovers correctly would be a great help as I have found tutorials don't go into enough depth.

My second problem concerns the coding of my function. As stated earlier, it seems to work, but I am sure it could be written better/more correctly, and then will hopefully work in all browsers (well most of them).

Any help on either of these issues whould be much apprecited.

This is what I have come up with so far:

function classChange(element1,newclass) {
var length = imageContainer.childNodes.length;
var i = 0;
while(i < length){
if(imageContainer.childNodes[i].className == 'DisplayBlock'){
imageContainer.childNodes[i].className = 'DisplayNone'
}
++i;
}
element1.className = newclass;
}


<div id='imageContainer'>
<div id='block1' class='DisplayBlock'>
<a href='#'><img src='xxx.jpg'></a>
</div>
</div>

<div>
<a href='#' onmouseover="classChange(block1,'DisplayBlock');">link</a>
</div>



Thanks for reading this.

screamingWeasel
07-19-2006, 05:33 PM
Surely someone can point me in the right direction.

Any help would be appreciated.

Logician
07-19-2006, 10:28 PM
FF won't re-trigger an onmouseover event
Yes it will, but it's probably aborting after an error.
<a href='#' onmouseover="classChange(block1,'DisplayBlock');">link</a>
Do not try to reference an element directly.

Try: classChange(document.getElementById('block1'), 'DisplayBlock');

screamingWeasel
07-19-2006, 11:20 PM
Thanks, you were on the money - got stage one working, now its time to see if I can get some opacity effects to work for me.