Lipstick Monkey Design
home - resources - help center - faqs - contact

Basic JavaScript Rollovers

Even if you don't know much about JavaScript or HTML, this article may help you learn how to make image rollover effects. This will not be a pure "step by step" tutorial, but we ask you to read everything carefully so that you can understand these concepts and thus be able to change them to fit your own needs.

Here's the basic concept: Using JavaScript, when a user mouses over an image, you can tell that image to switch to a different image. When the user mouses off the image, you can tell the image to switch back to the original image.

So, right off the bat, you know that you need two different images (the same height and width) - one for the "normal" state of the image and one for the "hovered" state of the image. In this example, we're going to use these two button images:

rollover-home.gif (normal state)
rollover-home-over.gif (hovered state)

Next, you need some way to identify which image will be changed. You can do this by adding the "name" attribute/property to the image. You will have to manually do this in the HTML. Click on the image and switch to HTML view. The HTML for the image will be highlighted, and will look something like this:

<img src="images/rollover-home.gif" width="49" height="21" border="0">

Add this code:

<img name="buttonhome" src="images/rollover-home.gif" width="49" height="21" border="0">

The "name" can be anything you want, as long as there are no spaces or special characters. It's probably best to keep to lower and uppercase letters. The name MUST be unique to each image. If you have two "home" buttons on the page, both with rollover effects, the names MUST be different (for example, name one "buttonhome1" and the other "buttonhome2").

Now, let's start to write the code that will actually change the image.

Where does the code go? JavaScript code can go inside each page, or in an external file. External files are helpful if you will be using the same effect on a lot of pages (for example, for menu/navigation bars). Putting code inside one page is useful if the code will only be used on that page.

  • To put code inside your page, switch to HTML view and scroll to the top. You should see some basic HTML "tags" that go somewhat in this order:

    <html>
    <head>
    <meta .....>
    [more stuff]
    </head>
    <body.... >

    The script will go INSIDE the <head> ... </head> area. You can start it out like this:

    <html>
    <head>
    <meta .....>
    [more stuff]
    <script language="JavaScript">
    <!--

    //-->
    </script>

    </head>
    <body.... >


    The <script ....> tells the browser that the next chunk of code is JavaScript, and </script> tells the browser where the code ends. The <!-- and //--> helps the code to be "hidden" from older browsers that may not understand JavaScript. When putting code inside the "head" of an HTML page, you will always want to start out with this format. At this point, you can insert your cursor in the blank line inside the <script> block to start inserting your code.
     
  • To put code in an external file, simply create a new page and call it something like "rollover.js." If you are using FrontPage and are starting with a new blank page, you will have to switch to HTML view, highlight all the HTML code, and delete it. You can also open a blank file in a text editor like NotePad and save it into your web site.

    We'll tell you what to put into that rollover.js file in a second, but for now, let's make sure that the web page knows how to find the external code. Open the page that will be using the rollover effect and switch to HTML view. At the top of the page, you should see some basic HTML "tags" that go somewhat in this order:

    <html>
    <head>
    <meta .....>
    [more stuff]
    </head>
    <body.... >


    In between the <head> and </head> area, on a new line, add another line of code:

    <html>
    <head>
    <meta .....>
    [more stuff]
    <script language="JavaScript" src="rollover.js"></script>
    </head>
    <body.... >


    This line of code tells the page to look for the external file and use it as necessary. You will need to make sure that the "src" property has the correct pathname to the rollover file. For example, if your page is inside a subfolder but the .js file is in your main root folder, the code will look more like: src="../rollover.js". After doing this, you can now go back to your blank .js file to add code.

Here's the actual code (you can copy and paste from the form box if you want). This code should go either 1) in the <script> block inside the page or 2) in the blank .js file.
*Note - there are MANY ways that you could set up this code. This is probably the most general way.

function newImage( imgSrc ){

 var imgName = new Image();
 imgName.src = imgSrc;

 return imgName;

}

function change( imgName, imgLocation )
{
 document[imgName].src = imgLocation ;
}

var preloadFlag = false;
function loadImages()
{
 if (document.images)
 {
 //****Edit this list to include rollover state images ****
 //****Example: aboutus_over = newImage( "images/aboutus-over.gif" );
 home_over = newImage("images/rollover-home-over.gif");

 preloadFlag = true;
 }
}

What's going on here?

  • Preloading images - concept
    The first function, newImage( imgSrc ), is "called" (used) by the third function, loadImages(). The loadImages() function is going to be called within the HTML page, and basically forces the browser to "load" all rollover-state images even though they don't actually show up on the page yet. This means that when a user first mouses over an image, they can see it almost immediately - they don't have to wait for the rollover image to load. So, the loadImages() function calls the newImage( imgSrc ) function, which creates JavaScript objects using the images, thus forcing the images to "pre-load."
  • Preloading images - practical
    If you will have lots of images with rollover effects (such as in your own navigation bar or perhaps a photo gallery), you should add more lines in the loadImages()  function following the example. As an example, the preload function for the JGT site looks something like this:

    function loadImages()
    {
     if (document.images)
     {

      default_over = newImage("images/menubar_home_over.gif");
      products_over = newImage("images/menubar_products_over.gif");
      learn_over = newImage("images/menubar_learn_over.gif");
      contact_over = newImage("images/menubar_contact_over.gif");
      more_over = newImage("images/menubar_more_over.gif");

      preloadFlag = true;

      changeImage();
     }
    }
  • Changing the image - concept
    The second function, change { imgName, imgLocation }, is called from within the HTML page as well. It accepts two parameters - the image "name" (that's the same name that you specified above) and the image "location" or "url." The change function looks for the image with the unique name specified, then swaps the image with the image specified by the new image location. As you can see, the function can be used for both "mouse-overs" and "mouse-outs" - you specify which image you want to change when.

    You will not have to do anything to this function or code - just leave it as is!

Now, let's make this work!

We'll first need to tell the page to preload the images. (The functions in the script by themselves do nothing - you have to "call" the functions in order for something to happen.)

Do this by switching to HTML view and looking (near the top of the page) for the <body ....> tag. Inside this tag, add this code:

<body .... onLoad="loadImages();">

The "onLoad" is a property of the <body> tag that tells the browser to do something when the page starts loading. In this case, we are telling the browser to call the loadImages() function and preload the images.

Finally, let's add the code that will make the image change. First, in Normal View, click on the image that you want the rollover effect to apply to (in this case, our "home" image) and turn the image into a hyperlink (go to Insert > Hyperlink while the image is selected). Link the image to the page that you want to go to when the user clicks on the image. If you don't want the link to go anywhere (for example, in a photo gallery), type "#top." (This will make a "bookmark" link that will keep you on the same page.)

Now, select the image to highlight it and switch to HTML view. Your code will look something like this:

<a href="page.htm"><img name="buttonhome" src="images/rollover-home.gif" ...></a>

Add this code inside the <a ...> tag:

<a href="page.htm"
 onMouseOver="change('buttonhome','images/rollover-home-over.gif');"
 onMouseOut="change('buttonhome','images/rollover-home.gif');"
><img name="buttonhome" src="images/rollover-home.gif" ...></a>

The "onMouseOver" and "onMouseOut" properties are similar to the "onLoad" property - they allow you to insert JavaScript commands. The "onMouseOver" commands occur, not surprisingly, when someone mouses over the link, while the "onMouseOut" commands occur when someone drags their mouse off the link.

So, as you've probably figured out by now, this particular "onMouseOver" calls the change  function and tells the browser to switch the "buttonhome" image with the "rollover-home-over.gif" image instead. The "onMouseOut" calls the same change function and tells the browser to switch the same "buttonhome" image with the original "rollover-home.gif" image.

The possibilities are endless.

It may not be immediately clear to you, but you can have someone mouse over one image, but cause a different image to swap! This is useful if you have, for example, a photo gallery similar to our "Photo Slide Show" component product. Instead of "buttonhome," refer to a different name (remember - you need to define these names so that they are UNIQUE).

We hope that this article has been helpful to you! (Article Provided by Pixel Mill.net)

home - contact - policies