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