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.
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.