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