• Skip to main content
  • Skip to primary sidebar
  • Skip to footer

Matt Doyle | Elated Communications

Web and WordPress Development

  • About Me
  • Blog
    • Design & Multimedia
      • Photoshop
      • Paint Shop Pro
      • Video & Audio
    • Online Marketing
      • E-Commerce
      • Social Media
    • Running a Website
      • WordPress
      • Apache
      • UNIX and Linux
      • Using FTP
    • Web Development
      • HTML
      • CSS
      • JavaScript
      • PHP
      • Perl and CGI Scripting
  • Portfolio
  • Contact Me
  • Hire Me
Home / Blog / Web Development / JavaScript / Rollover Buttons with JavaScript

Rollover Buttons with JavaScript

7 September 1998 / Leave a Comment

These days every man and his dog is using JavaScript to create “rollover”, or “mouse-sensitive” buttons on their site. If you’re not sure what I’m talking about, move your mouse over this baby:

Button

Get the idea?

Where to use ’em

Rollover images are great whenever you want to make it obvious that the user should click on them (for example, buttons and menus).

Where not to use ’em

In the bath.

OK wise guy – how’s it done?

Well it all hangs around JavaScript’s Image class. Let’s look at how we did the rollover button above, to help us understand this class.

The first thing we need to do is create two images – one for the “normal” button, and one for the “active” (rollover) button. We do this with the new Image() constructor, which creates the two Image objects:


eg_on = new Image ( );
eg_off = new Image ( );

We then link these two Image objects to their appropriate image files by using their src properties, like this:


eg_on.src = "images/eg_on.gif";
eg_off.src = "images/eg_off.gif";

Changing the images

Our example on this page only has one rollover button; however, often you’ll want several buttons on one page, as in a menu, for example. To make this easy to do, we’ve created a couple of functions to handle the actual image changing. That way, you can just call the same functions for each of your buttons, without having to duplicate lots of code.

Here are those functions, called button_on() and button_off():


function button_on ( imgId )
{
  if ( document.images )
  {
    butOn = eval ( imgId + "_on.src" );
    document.getElementById(imgId).src = butOn;
  }
}

function button_off ( imgId )
{
  if ( document.images )
  {
    butOff = eval ( imgId + "_off.src" );
    document.getElementById(imgId).src = butOff;
  }
}

Note that these functions rely on your Image object names ending in "_off" (for the normal image), and "_on" (for the rolled-over image). That’s just our convention; change it to something else if you like, but remember to change the Image object names in all parts of the script!

The two functions are nearly identical. Both take the Image object specified by imgId, which is the ID we will give the button in the img tag (in this case "eg"), and replace its source with the "_off" or the "_on" image’s source, as appropriate.

I’m confused! What are all these different images?

There are three Image objects at work here:

eg
The actual image in the HTML page (see below); initially it points to "images/eg_off.gif"
eg_off
The “off” version of the image (which also points to "images/eg_off.gif")
eg_on
The “on”, or rolled-over, version of the image, which points to "images/eg_on.gif"

The functions button_off() and button_on() simply replace the image pointed to by eg (via the .src property) with the images pointed to by eg_off and eg_on respectively. Easy!

Does the browser support rollovers?

Nearly all modern browsers support rollover images, but it’s wise to check this before trying to manipulate images. If we don’t do a check, then browsers that can’t do rollovers will throw an error.

We make this check in the code above using the line:


if ( document.images )

This checks for the existence of an images array in the browser’s document object. If it’s there, we know the browser supports image manipulation.

The HTML bit

The last piece of the puzzle is to make the call to our JavaScript functions from within the HTML itself. To do this, we need to have an active link (an <a> tag) around our rollover button. As our button doesn’t need to link anywhere, we link it to # (an empty anchor).


<a href="#"
onmouseout="button_off('eg'); return true"
onmouseover="button_on('eg'); return true"><img
src="images/eg_off.gif" style="width: 64px; height: 64px;
border: none;" alt="Button" id="eg"/></a>

The two attributes onmouseout and onmouseover tell the browser to execute the JavaScript within the quotes (" ") when the mouse moves out of or over the button respectively. Within the quotes, we make a call to the appropriate image-changing function – button_off() or button_on() – that we defined above. Notice that we include the ID of the image object that we want to change ('eg') in the function calls.

Last – but by no means least – the button image is given an ID using the attribute id="eg". This ID is very important, as it is used by the button_on() and button_off() functions to determine the right image object to change (in our case, "eg"). When using many rollovers in one page, make sure you use a different image ID for each button!

Go for it!

Now you should be able to take the above code and use it to make your own rollover images. You can make as many rollovers as you like in one page – just remember to give each one a unique id, and to call the functions button_off() and button_on() with that ID.

Filed Under: JavaScript Tagged With: development, hover, image swap, java script, javascript, mouseover, onmouseout, onmouseover, programming

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

To include a block of code in your comment, surround it with <pre> ... </pre> tags. You can include smaller code snippets inside some normal text by surrounding them with <code> ... </code> tags.

Allowed tags in comments: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre> .

Primary Sidebar

Hire Matt!

Matt Doyle headshot

Need a little help with your website? I have over 20 years of web development experience under my belt. Let’s chat!

Matt Doyle - Codeable Expert Certificate

Hire Me Today

Call Me: +61 2 8006 0622

Stay in Touch!

Subscribe to get a quick email whenever I add new articles, free goodies, or special offers. I won’t spam you.

Subscribe

Recent Posts

  • Make a Rotatable 3D Product Boxshot with Three.js
  • Speed Up Your WordPress Website: 11 Simple Steps to a Faster Site
  • Reboot!
  • Wordfence Tutorial: How to Keep Your WordPress Site Safe from Hackers
  • How to Make Awesome-Looking Images for Your Website

Footer

Contact Matt

  • Email Me
  • Call Me: +61 2 8006 0622

Follow Matt

  • E-mail
  • Facebook
  • GitHub
  • LinkedIn
  • Twitter

Copyright © 1996-2023 Elated Communications. All rights reserved.
Affiliate Disclaimer | Privacy Policy | Terms of Use | Service T&C | Credits