|
|
|
|
Posted by Julia Briggs on January 29, 2005, 11:15 pm
Please log in for more thread options
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>
|
|
Posted by xiaozheng.ma on January 29, 2005, 11:25 pm
Please log in for more thread options
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
|
|
Posted by xiaozheng.ma on January 29, 2005, 11:29 pm
Please log in for more thread options or try to use style.display='block' or 'none' and see if it works
|
|
Posted by Richard on January 30, 2005, 1:42 am
Please log in for more thread options On 29 Jan 2005 22:29:26 -0800 xiaozheng.ma@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.
|
|
Posted by Michael Winter on January 30, 2005, 1:21 pm
Please log in for more thread options [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
--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.
|
| Similar Threads | Posted | | DOM CSS display:none/block switching hover problem | December 29, 2004, 5:08 pm |
| This work on your browser? | January 8, 2007, 1:27 am |
| XML browser support | April 13, 2007, 9:48 pm |
| Browser survey | June 28, 2008, 1:37 am |
| Re: Browser survey | July 3, 2008, 6:10 pm |
| XHTML rendering on browser | July 11, 2004, 10:40 pm |
| changes in HTML code are ignored by the browser (IE6) | October 7, 2004, 11:56 am |
| New browser window with no toolbars | January 10, 2005, 4:53 pm |
| web log identifies browser as SURF | January 13, 2005, 10:39 pm |
| Browser and standards comparisons | January 31, 2005, 2:46 pm |
|
|
|
|
XML Sitemap