Gradual Image Resizing on Mouse Rollover

or, How To Do Google X Type Image Rollover Effects

Mouse over any of the graphics below (or the photo) to see an example of the images gradually getting larger or smaller, much like the GoogleX demo or the icons on the icon dock bar of a Mac OS X machine. An explanation of how this works is at the bottom of the page.

I never even thought of doing something like this until I saw a demo of the Google X page (which has since been pulled -- see this entry on ElliottBack.com for details and a look at what the page looked like). It's actually a pretty easy effect to pull off. See the JavaScript code on this page source for details.

Some notes about the implementation you see here:

• I had to put the line of buttons in a table, with the row set to valign="bottom" to make the buttons seem to grow upward without making the other buttons jump around too much. I also set the table height to the size of the largest rollover graphic, so the surrounding text wouldn't have to move.

• The resizeImg function that's called onMouseOver and onMouseOut doesn't require a separate rollover image. You can specify one as an optional third parameter, but if you leave it out the function will simply resize the existing image. For JPEG images this isn't too bad, but for GIFs the resized image will often be a little choppy. If you do use a separate rollover image (like I did for the round buttons), you'll want to calculate so that the size of the original image multiplied by the percentage that you're increasing it by is equal to the size of the rollover image.

  For example, on my round buttons, the buttons are 80 pixels wide and high. Since I'm resizing them by 150% (the second parameter in the resizeImg function), the rollover images for the buttons should be 80 * 1.5 = 120 pixels wide and high. Granted, they don't have to be that size -- they can be any size you want -- but if the final size is the same as the actual size of the image then you won't have any distortion.

• For larger images (like the photo), you might want to initially display the full image at a scaled down size, using the width and height attributes of the img tag. And then when you make a call to resizeImg, don't specify a different rollover image, just let the function enlarge the scaled down version.

• If you have large rollover graphics or users with slow connections, you might want to consider preloading the rollover images when the page loads. There are several different methods for doing this. Use your favorite search engine to look up "HTML preload images" or something similar to find examples.

• I've been asked if this was a "Google X Dissected" type of example -- in other words, did I take the original Google X mouseover code and just pretty it up? The answer is "no". I took a look at the original page (Elliott Back has a copy of it if you want to see), but the JavaScript was obfuscated enough that I just started from scratch and wrote my own version of the grow/shrink code. I don't think there are many similarities between the code on this page and the original GoogleX code. Other than the fact that the final effect is the same.