odd flicker problem in FF

[charIie]

Hey, I have been trying to sort out an issue in Firefox related to the useMap function. I have been able to get the images to switch, but it flicks on and off. It works how I want it to in IE. Let me know what you think is causing this.

Thanks

Here is the JAVASCRIPT:

<script type="text/javascript">
<!--
function openmenu(){document.menu.useMap="#contestsopen";
document.menu.src='images/contestsopen.GIF';}
function closemenu(){document.menu.useMap="";
document.menu.src='images/contests.GIF';}
//-->
</script>

Here is the link to the script:
<map id="contestsopen" name="contestsopen">
<area shape="rect" coords="24,26,92,41" href="videocontest.htm" title="" target="rside"/>
<area shape="default" nohref="nohref" alt=""/>
</map>
<span onMouseOver=openmenu()
onMouseOut=closemenu()>
<img border="0" src="images/contests.GIF" name="menu" width="100" height="46">
</span>

 

[BabyJeffy]

I have a question (based on this post and your previous thread thread216-1196911)...

Why are you using an image map for this? It is not required. There are plenty of ways to achieve what it appears you want to do.

I suggest you investigate other means of doing this. For instance... why won't a simple <a href> wrapped around the image work for you? What about putting an onclick event into the image directly?

Cheers,
Jeff

[tt]Jeff's Page @ Code Couch

http://www.codecouch.com/jeff/

http://www.codecouch.com/jeff/blog/

[/tt]

What is Javascript? FAQ216-6094

 

[charIie]

Well, for example on

http://www.hopfli.com,

I want only the bottom of the flipped image to be used as a link. That is why I have resorted to an image map. What other possiblities are there, so I can look into them? It seems to be working fine in IE, what is causing the error in Firefox?

Brian

 

[BillyRayPreachersSon]

I agree with Jeff. I've played around with your code locally, and I think it's to do with the onmouseover and onmouseout firing when doing the image / image map swap.

I'd either use onmouseover / onmouseout [!]or[/!] an image map, but not both.

Hope this helps,
Dan



[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[charIie]

Hmmm, I see what you mean. Is it possible to have a dropdown menu occur in a different way in JavaScript that would get me the same/similar results?

 

[BillyRayPreachersSon]

Yes - but if I were to be giving advice on changing your site, to be honest, I'd change the way you code the whole lot.

Without wanting to sound like a clown, I reckon that you definately do not need to be using frames, and I'd also say that you do [should!] not need to be using tables for layout.

The layout you have really can be done quite easily using minimal HTML and CSS, with JavaScript added on later for drop-down effects, etc.

Dan

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[theniteowl]

charIie, I suspect that you are testing your page locally on your own computer?
If you move the page to a web server and view it from your PC you might find IE is causing the flicker as well.

A lot of flicker problems are the result of the delay in loading the images. If your server is not caching the images then every time you swap an image it goes out to the server to retrieve a new copy which causes a slight delay which leads to flicker in the swap.
IE is especially known for this problem when using CSS to handle the mouseover/mouseoff effects.

You can try pre-loading your images so they are already in the browser ready for use or you could layer them on top of each other and toggle their position rather than replacing the images.
Another approach some use is to create both versions of the image as a single image side by side and alter the position of the image in it's own CSS window so that you see only the portion of the image needed at that time.


Stamp out, eliminate and abolish redundancy!