PDA

View Full Version : Table cell Mouseover swap image/background color



salparadi
Feb 7th, 2005, 05:53 PM
Ok. this is for a webcam page.

this is the URL for the current iteration that i'm going to try to describe.

http://kuhnn.bc.edu:8080/publications/atbc/webcams/

here are the three functions i have.




THIS LOADS THE DEFAULT IMAGE AND CAPTION

function loadvars() {
currentImage = document.thumb.src;
currentCaption = document.getElementById("thumbcaption").innerHTML;
return;
}

THIS SWAPS THE IMAGE

function swapImage(objectName, caption) {
document.thumb.src='/publications/atbc/webcams/thumbs/' + objectName + '.jpg';
document.getElementById("thumbcaption").innerHTML = caption;
return;
}

THIS REPLACES THE IMAGE WITH THE DEFAULT ON MOUSE OUT

function replaceImage() {
document.thumb.src= currentImage;
document.getElementById("thumbcaption").innerHTML = currentCaption;
return;
}

I have a six row table, each row corresponds to a location where there is a webcam. When you are on a particular page, that row is highlighted and that image/caption is set as the default.

Each row has a mouseover function that change the background color of the row as well as calls an image/text swap so that when you're on a particular cell, it is highlighted AND you're seeing the associated image/caption for that option. On mouse out, it reverts back to the default image/caption for that page.

Within each cell there are two links, one to go to the live webcam page for the highlighted location, and one to go to a static view.

My problem arises in Mozilla based browsers. When I mouseover the table row and mouseover one of the links and then roll back into that same row, it considers that a mouseout from that table row and quickly runs that script and flashes the default image.

This all works in IE/safari/opera, but dies in Netscape/Firefox. I just need to figure out a way to somehow tweak my code to remove the mozilla flash.

Any help or ideas of other ways to solve this problem would be greatly appreciated.

Best,

Noah

shlagish
Feb 8th, 2005, 03:21 AM
Hello, I think I may have the solution.
On the Still Image link and the Live Action link, you apply only an onmouseover. On the whole box, you apply an onmouseout as well as an onmouseover.
So:
Image is default.
You hover the box, image becomes img1.
You hover the Still image link, image becomes imgStill.
You go off the Still image link but stay in the box, nothing happens, so image is still imgStill.
You hover the Live Action link, image becomes imgLive.
You go off the Live Action link but stay in the box, nothing happens, so image is still imgLive.
You go off the box, image returns to default.

Make any sence?

salparadi
Feb 8th, 2005, 03:25 PM
That does make sense, but however, Mozilla browsers don't take kindly to that either.

The problem is that even though it would make sense that

"You go off the Still image link but stay in the box, nothing happens, so image is still imgStill."

The image flashes back to the like you mouseout'd from the entire cell. It seems almost as if there is a 1 px border around the <a> that triggers the mouseout before you go back into the table cell

Anyone else have any ideas? I know this is a bit of a strange method of doing this, but I'm trying to avoid using flash as it's for a university and we tend to steer away. There must be someone out there who has seen this problem before!

I was thinking perhaps there is something with using z-index, but it doesn't work out in my head.

Any help would be appreciated! Thanks shlagish

shlagish
Feb 9th, 2005, 02:43 AM
Hmm, strange.
Even stranger, last time I went to visit your site, I could see the problem. Now, the problem is gone. There is no flashing. Have you solved it?

salparadi
Feb 9th, 2005, 03:16 PM
fyi

this is solved.

i had to use a timeout which can even be set as zero, and it nulls the flash effect. this was very weird. thanks for your help shlagish




TO=null

function Change(objectName,caption) {
clearTimeout(TO);

document.getElementById(objectName).style.backgroundColor='#E1DCB8';

if (document.getElementById('thumbcaption').innerHTML!=caption) {
document.thumb.src='/publications/atbc/webcams/thumbs/' + objectName + '.jpg';
document.getElementById('thumbcaption').innerHTML=caption;
}

document.getElementById(objectName).onmouseout=function() {
document.getElementById(objectName).style.backgroundColor='#F0EDD6';
TO=setTimeout('Delay()',0);


}
}


function Delay(){
** document.thumb.src= currentImage;
document.getElementById("thumbcaption").innerHTML = currentCaption;
}

shlagish
Feb 9th, 2005, 10:37 PM
very strange.
Very strange indeed.
Well, I'm happy it's solved..