ASP Shopping CartForum & BBS
  - all for $20 from CodeToad Plus!
  Home || ASP | ASP.Net | C++/C# | DHTML | HTML | Java | Javascript | Perl | VB | XML || CodeToad Plus! || RAM 
Search Site:

Home » Javascript » Article

Javascript Image Rollovers

Article by:  Jeff Anderson  ( 1362 ) (1/24/2002)
Bookmark us now! Add to Favourites
Email a friend!Tell a friend
Summary: A bit of code to swap to different images on the page. You often see this on sites to display a rollover on the navigation buttons.
Viewed: 101223 times Rating (6 votes): 
 3.2 out of 5
 Rate this Article  Read Comments  Post Comments

Javascript Image Rollovers

Pass your mouse over the similing face below.

What happens here is we use a bit of javascript to swap two different images on the page. You often see this on sites to display a rollover on the navigation buttons.

Let's look first at the code that will do the swapping :

Select All Code

The first four lines load in the images so that they rollover smoothly as soon as the mouse is pointed at them. Notice here we also specify the width and height (in that order) of the image. These are usually the same to create a seamless rollover, but there's nothing stopping you adding images of different sizes if you want a particular effect.

Next we have two javascript functions Frown and Smile. These reference the image and set its source to the appropriate image file.

The Image File

Before any of that will work however, we need the image in place in the HTML code. Here's the code :

Select All Code

Now you can see how the functions find the image. The image has a NAME attribute "imageflipper". The 2 functions find the correct image to flip by looking going through document.imageflipper and then finding the source of the image by using document.imageflipper.src (Note that if you had two images on the page with the same name it would not work.)

When the mouse rolls over the image, the onMouseOver event is called, which refers to the Frown() function. When then mouse moves out, the onMouseOut event is called, referencing the Smile function. Our image swaps, as simple as that!

As usual with javascript remember it's case sensitive, so you must use exactly the same letters and cases in the function name as when you call the function from the image.

Useful Links

CodeToad Experts

Can't find the answer?
Our Site experts are answering questions for free in the CodeToad forums
Rate this article:     Poor Excellent
View highlighted Comments
User Comments on 'Javascript Image Rollovers'
Javascript - Enable and Disable form elements
by Jeff Anderson
This is a relatively little known and under-used feature of javascript which can be very useful in guiding a user through a form. Using the disabled tag, you can switch on and off elements in a form.
Check IsNumeric Function
by Jeff Anderson
A javascript validation function to check whether the details entered by a user are numeric.
Javascript Onload Event
by Jeff Anderson
Sometimes you need to perform an action immediatley after the page has loaded. That's when the onLoad Event Handler comes in handy
Form Validation Function
by Jeff Anderson
A javascript validation function that you can use to validate all types of forms.
Javascript Get Selected Text
by Jeff Anderson
A cross-browser script to get text selected by the user
JavaScript Field Is Empty Form Validation
by Jeff Anderson
This javascript function allows you to check whether a form field has been completed or not.
Check Email Validation Function
by Jeff Anderson
A javascript validation function to check whether the user has entered a valid email address in a form.
Javascript onUnload Event Handler
by Jeff Anderson
The onUnload Event Handler allows you to perform an action as the user leaves the page.
Multiple submit buttons on a single form
by Kiran Pai
This script shows you how to submit the contents of a form to different programs depending on which Submit button you press. Additionally it also shows how to call two different functions when you press the Submit button.
Simple date validation
by Chris Hogben
function that takes a date in three parts, day, month and year - returns true if it's a valid date.

Recent Forum Threads
• Run a program both on windows and linux
• VERO.SurfCAM.v2014
• Schlumberger.Petrel.V2013.2
• Petrel.V2013.2
• Altair.HyperWorks.v12
• VoluMill.v6.1
• VoluMill.NEXION.6
• VERO.SurfCAM.v2014
• Schlumberger.Petrel.V2013.2

Recent Articles
ASP GetTempName
Decode and Encode UTF-8
ASP GetFile
ASP FolderExists
ASP FileExists
ASP OpenTextFile
ASP FilesystemObject
ASP CreateFolder
ASP CreateTextFile
Javascript Get Selected Text

© Copyright 2001-2015