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.)
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.
Starr DuskkASP.NET VB.NET DeveloperAsked:
Who is Participating?
Nenad RajsicConnect With a Mentor Commented:
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] = "";
      image_url[1] = "";
      image_url[2] = "";
      image_url[3] = "";

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


Open in new window

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.
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

        <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;" />
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

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.
Dave BaldwinConnect With a Mentor Fixer 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.
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
Starr DuskkASP.NET VB.NET DeveloperAuthor Commented:
How do I preload images?
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?
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.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.