|
JavaScript Home
JavaScript TutorialIntroductionHow to Enable JavaScript JavaScript Syntax JavaScript Popup Boxes JavaScript and HTML External JavaScript File JavaScript Operators JavaScript Variables JavaScript Functions JavaScript Events JavaScript If Statements JavaScript Switch Statements JavaScript While Loop JavaScript For Loop JavaScript Try Catch JavaScript Escape Characters JavaScript Void(0) JavaScript Cookies JavaScript Date and Time JavaScript Arrays Two Dimensional Arrays JavaScript innerHTML JavaScript Summary JavaScript ReferenceJavaScript Reserved WordsJavaScript Event Handlers JavaScript Date and Time Functions JavaScript ExamplesList of ExamplesJavaScript Dropdown Menu JavaScript Print JavaScript Alert Box JavaScript Confirm JavaScript Prompt JavaScript Status Bar Messages Image Rollovers Popup Windows JavaScript Redirect Timed JavaScript Redirect JavaScript Refresh Page
Sponsored Links
$1.99 Domain Names
With every new non-domain purchase thru ZappyHost, you get a domain name for only $1.99.
Create a website for free - uCoz
Build a website quickly and easily Customizable templates and graphics |
Image RolloversImage rollovers are a popular way of making a website appear more dynamic. Image rollovers are often used for highlighting buttons when users hover over them with using their mouse. Of course, there are plenty of other uses for image rollovers too, because the basic principal of image rollovers is that you simply swap one image with another image. Basic image rolloversYou code image rollovers by using the
There's only one problem with the above method for performing image rollovers, and that is, the browser doesn't load the second image until the user hovers over the first image. This image could take a second or two to load - which reduces the impact of the rollover. You really want the image to swap immediately - not after a few seconds. Better image rolloversTo prevent any delay in your second image appearing, you need to preload your images. This is not as tricky as it sounds - you simply load all your images into the browsers cache at the time the page loads. To preload your imagesPlace this code between the
The Your image rollover using your preloaded images
This part is similar to the basic image rollover, but it is now calling the preloaded images - so there shouldn't be any delay when you hover over them! Image rollovers and functionsYou could go a step further and stick your image rollover code into a function. This can be handy if you have multiple image rollovers because you only need to write the code in one place, then call the function whenever you perform an image rollover - you don't need to write lots of duplicate code. The image rollover function:
Calling the rollover function:
Using the above function, if a browser doesn't support the Have you met Jack's brothers? |
Sponsored Links
Need Website Content?
Get unique, quality digital content for your website.
|