|
FrontPage Intro
FrontPage Editing Basics
Make a FrontPage Template
FrontPage FAQ
Dynamic Web Templates (FP)
Swish Basics
Articles
Product-Specific
|
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! |
