Rollover image not consistent

[jonathan]

I'm working on a project that's dealing with struts(some server-side programming, not familiar myself) and I have occurances where users can click on a tab(image/image map) and it stays selected untill they click on another tab. It works fine if you're not pulling the page from the server, but when you do, who knows what will go on. It seems like the images will randomly work and not work on. I have three functions that effect the images; one for mouseout, mouseover, and click. It seems too, that only the click one messes up. The funny thing is that it would work if I put "#" in the href, but I can't do that since the page is generated the information would be erased so I put "javascript:void(0);" instead. Oh yea, this only messes up in Explorer 6.(haven't tested on previous versions). Here's the function that I use to set the "Hot"image.

function hotimage(ImageName,event)
{
if(document.images){
if(event) goodtogo = keyDown(event,1,13,0)
else goodtogo = true;
if (goodtogo){
document[HotImageName].src = HotImageName+"Off.src";
document[ImageName].src = ImageName+"Hot.src";
HotImageName = ImageName; //global var that hold the current "Hot" image
}
}
}

Any suggestions or you need any more information just let me know.

[Roy Sinclair]

You need to return a value from your function and have your function return that value to the onclick handler. A return value of "true" will cause the link to be activated and the page referenced the the href parameter will load but a return value of "false" will cancel the processing of the click and no navigation will occur unless it was done in your onclick event processing function.

IE:


<script type="text/javascript">
function clickedIt()
{
... your code here
return false
}
</script>

...

<a href="Any text you want to show on the status line" onclick="return clickedIt();">Click This</a>

[jonathan]

Thanks for that suggestion, I never really thought about doing that for links. I tried it out but it still didn't help, but I'll have to try that on some other pages. I put out a page so that you can see what is going on with the rollovers. All I want to do is change the image (consistantly) and not have the page redirect anywhere.

[Roy Sinclair]

I put out a page so that you can see what is going on with the rollovers.

Uh, where?

[jonathan]

Link to example
Sorry, forgot to put the link to the page. Sample Page (http://uxsuse1a.kwe.com:8080/ufstest/html/test/rollover.jsp)
Again I'm not to sure if it is from the type of server it's running off of. I'm running with Struts in a Apache-tomcat server.

[Roy Sinclair]

The Proxy Server I'm running through refuses to acknowledge that link. Can anyone else see it?

[jonathan]

Well I put another page out so that you maybe able to see it. Though the servers aren't the same and I get a different type of problem. Now the "hot"images are consistently not showing so I'm guessing that it is probably my codeing. The link is http://zoinkmd.com/jon/test/rollover.html The image paths are hard coded so that you can play around if you want.

[Roy Sinclair]

I found the page and noted that if I rapidly click between two of the tabs only the first one I clicked is changed even though I can see the focus moved to the second tab I clicked. Because I saw the focus changing I altered the function call for the onfocus event to be the same as for the onclick event and that seemed to clear up the problem.

[whammy]

Hmm, it is working ok for me, although the first time it didn't. I suspect that maybe the images were not being preloaded, and that may have caused the problem since I started clicking before the images were completely loaded.

Other than that, it's working fine, now that I have refreshed the page...

[jonathan]

Well I'm still not haveing any luck and I've been doing all sorts of stuff including delaying the function by useing setTimeout() to call a function. :D Well that doesn't seem to work. Another thing, I do need all those call events "onfocus, onblur, onmouseover, onmouseout,onclick" to get what I'm looking for. I pretty much agree with Roy that the onfocus, onclick, and maybe others do conflict with each other, or something like that. I'm up for new suggestion or maybe another way to work around this. Also it seems to work fine in Netscape, not explorer.

[jonathan]

Well thanks again for the help and hints. I never really thought about the onclick and onfocus causing problems but it seemed to be it. Well I finally found a way around it for now, or atleast I haven't seen any of the images disapear yet. What I went about doing was to create another global variable that held the recent HotImageName, and I guess the most important is I put a setTimeout() on the functions on the onclick events. This really confuses me because I can put "0" for how long to wait and it still works. I just thought that "hotimage('step1tab');" and "setTimeout('hotimage(\'step1tab\')', 0);" would be the same thing. If you can think of a better way to do this I would really like it. Here's what I changed.

var tmpHotImage = "step1tab";

function actImage(ImageName)
{

if((ImageName != HotImageName) && (tmpHotImage != HotImageName))
{
document[ImageName].src = eval(ImageName+"On.src");
}
}

function hotimage(ImageName)
{

document[ImageName].src = eval(ImageName+"Hot.src");
if (ImageName != HotImageName)
{
tmpHotImage = HotImageName;
document[HotImageName].src = eval(HotImageName+"Off.src");
}
HotImageName = ImageName
}

function inactImage(ImageName)
{

if((ImageName != HotImageName) && (tmpHotImage != HotImageName))
{
document[ImageName].src = eval(ImageName+"Off.src");
}
}

and then I put onclick="setTimeout('hotimage(\'step1tab\')', 0);" for each image. Thanks again.