Image Hover bounce

I have run this locally, and the menu hovers are smooth. But when I run the exact same pages remotely, they bounce.... especially on the coffee version. (See the icons at the bottom of the page for the orange and blue versions. The Orange version is really bouncey.)
 
http://www.mysticalgraphics.com/default.aspx
 
Can you look at it and see if there is something that can be done to make it smooth like it is locally. You don't even notice an image bounce locally, but remotely, it disappears the image and then reappears, looking bouncy.
 
thanks!
LVL 2
Starr DuskkASP.NET VB.NET DeveloperAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Dave BaldwinFixer of ProblemsCommented:
I just checked your page in IE6/8 and Firefox and I'm not getting any hover effects on either icon.
0
Nenad RajsicCommented:
nothing happens in IE8 and Firefox 3.6.3
I also checked your code and you have no CSS styles applied on those 2 images apart from the border property

<center>
        <input type="image" name="ctl00$iBtnCoffee" id="ctl00_iBtnCoffee" src="images/coffeebutton.jpg" style="border-width:0px;" />
        <input type="image" name="ctl00$iBtnWater" id="ctl00_iBtnWater" src="images/waterbutton.jpg" style="border-width:0px;" />
    </center>
0
Starr DuskkASP.NET VB.NET DeveloperAuthor Commented:
you both misunderstood.
I said the MENU hovers.
The icons at the bottom of the page are to switch to the coffee version, where, again, you are checking the MENU hovers on the left.
 
0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Dave BaldwinFixer of ProblemsCommented:
The MENU hovers don't 'bounce' in Firefox 3.6.3 and IE8 after they are loaded the first time on either version.  There is a little 'bounce' in IE6.
0
Nenad RajsicCommented:
your comment in brackets confused me

right, what you need to do is preload your images. I see on your orange version when I hover a takes a bit before the image is replaced. if you preload them you won't have that issue anymore

let me know if you need any help with that
0
Starr DuskkASP.NET VB.NET DeveloperAuthor Commented:
How do I preload images?
0
Starr DuskkASP.NET VB.NET DeveloperAuthor Commented:
I see how to preload images in javascript, but they are using javascrpt to do the rollover. How do I preload an image, and use the CSS to do the rollover as I am now? how do I tie the preloaded images to the CSS hovers?
 
0
Nenad RajsicCommented:
Ok. Insert this code somewhere in between your <head> </head> tags and that should work.
It doesn't matter that you use css to roll them over because they will be preloaded so your rollover/hover will be instant


    <SCRIPT language="JavaScript">
    <!--

    if (document.images)
    {
      preload_image_object = new Image();
      // set image url
      image_url = new Array();
      image_url[0] = "http://www.mysticalgraphics.com/images/coffee_home_hover.jpg";
      image_url[1] = "http://www.mysticalgraphics.com/images/coffee_gal_hover.jpg";
      image_url[2] = "http://www.mysticalgraphics.com/images/coffee_con_hover.jpg";
      image_url[3] = "http://www.mysticalgraphics.com/images/coffee_about_hover.jpg";

       var i = 0;
       for(i=0; i<=3; i++) 
         preload_image_object.src = image_url[i];
    }

    //-->
    </SCRIPT> 

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Starr DuskkASP.NET VB.NET DeveloperAuthor Commented:
I added code to the header for the preload and it doesn't help the bounce. I am using IE8 as well, still bounces. Firefox doesn't. But firefox doesn't  have my nice colored scrollbars, so I want to demo on IE8.
Oh well, moving on I guess.
Thanks!
 
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.