By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
449,196 Members | 1,654 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 449,196 IT Pros & Developers. It's quick & easy.

question about <div> tag switching, browser conformity

P: n/a
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>

Jul 23 '05 #1
Share this Question
Share on Google+
5 Replies


P: n/a
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

Jul 23 '05 #2

P: n/a
or try to use style.display='block' or 'none' and see if it works

Jul 23 '05 #3

P: n/a
On 29 Jan 2005 22:29:26 -0800 xi**********@gmail.com wrote:
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.
Jul 23 '05 #4

P: n/a
rf
"Julia Briggs" <ju*******@yahoo.com> wrote
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...

Jul 23 '05 #5

P: n/a
[ciwah not included in follow-ups]

On Sun, 30 Jan 2005 00:42:30 -0600, Richard <An*******@127.001> wrote:

[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

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.
Jul 23 '05 #6

This discussion thread is closed

Replies have been disabled for this discussion.