question about <div> tag switching, browser conformity

Discussion in 'HTML' started by Julia Briggs, Jan 30, 2005.

  1. Julia Briggs

    Julia Briggs Guest

    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>
    Julia Briggs, Jan 30, 2005
    #1
    1. Advertising

  2. Julia Briggs

    Guest

    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
    , Jan 30, 2005
    #2
    1. Advertising

  3. Julia Briggs

    Guest

    or try to use style.display='block' or 'none' and see if it works
    , Jan 30, 2005
    #3
  4. Julia Briggs

    Richard Guest

    On 29 Jan 2005 22:29:26 -0800 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.
    Richard, Jan 30, 2005
    #4
  5. Julia Briggs

    rf Guest

    "Julia Briggs" <> 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...
    rf, Jan 30, 2005
    #5
  6. [ciwah not included in follow-ups]

    On Sun, 30 Jan 2005 00:42:30 -0600, Richard <Anonymous@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.
    Michael Winter, Jan 30, 2005
    #6
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. shruds
    Replies:
    1
    Views:
    757
    John C. Bollinger
    Jan 27, 2006
  2. Ollej Reemt

    Checking Ansi-c++ conformity

    Ollej Reemt, Apr 8, 2005, in forum: C++
    Replies:
    6
    Views:
    427
  3. Replies:
    6
    Views:
    291
    Bruno Desthuilliers
    Jun 19, 2008
  4. M Wells
    Replies:
    0
    Views:
    131
    M Wells
    Oct 6, 2004
  5. visu
    Replies:
    4
    Views:
    279
Loading...

Share This Page