question about <div> tag switching, browser conformity

[Julia Briggs]

Is there a <a href="javasc... approach to switch between two images
inside a div tag so it doesn't slightly flicker when clicked on, and
transitions between images smoothly in Netscape? I can get something to
work in IE, but in Netscape there is a slight but obvious flicker. Is
there some other way to do this or some solution to making this work?
Try my Google referenced images below in IE and Netscape/Firefox and
see what I am talking about!




<script>
function image1()
{
document.getElementById("image_display").innerHTML = "<img
src=http://www.google.com/images/logo.gif>"
}

function image2()
{
document.getElementById("image_display").innerHTML = "<img
src=http://www.google.com/intl/en_ALL/images/images_hp.gif>"
}
</script>

<br><a href="javascript:image1();">Image One</a><br>
<a href="javascript:image2();">Image Two</a>
<div id=image_display></div>

 

[xiaozheng.ma]

an idea:
if the flickering bothers you so much, you may consider add a quick
fade out effect on image1 and a quick fade in effect for image2

 

[xiaozheng.ma]

or try to use style.display='block' or 'none' and see if it works

 

[Richard]

or try to use style.display='block' or 'none' and see if it works

The flickering problem seems to be a trait of firefox.
When ever you do onmouseover or onclick, the flickering happens.
Even with a "block" or "none". Makes no difference.

 

[rf]

Is there a <a href="javasc... approach to switch between two images
inside a div tag so it doesn't slightly flicker when clicked on, and
transitions between images smoothly in Netscape? I can get something to
work in IE, but in Netscape there is a slight but obvious flicker. Is
there some other way to do this or some solution to making this work?

<snip code>

What an odd way to "swap images". You are not, in fact, swapping between two
images, you are swapping between two different "contents" for the div. The
browser can only assume that the entire bit of the DOM inside that div has
changed and so does a complet re-layout of the entire document. FF seems to
do a couple of extra viewport paints, hence the flicker.

Why not simply change the src attribute of an image?

http://users.bigpond.net.au/rf/temp/image.html

No flicker on my firefox.

BTW the code in that example is based directly on yours. You should not be
using href="javascript...

 

[Michael Winter]

[ciwah not included in follow-ups]


[snip]

The flickering problem seems to be a trait of firefox.

The flickering is a result of page reflow. For a brief moment, both
elements are shown before the previously shown element is hidden. I'm sure
I told you that when you asked why it happens with your "experiment".

No reflow, no flicker. Simple.

[snip]

The OP should see rf's post for a sensible solution, though with two
suggestions (he already mentions avoiding the javascript: pseudo-scheme).

1) The URL for the src attribute must be quoted.
2) The images collection, rather than the getElementById method,
should be used to access the image:

document.images['image'].src = '...';

Mike