| ||
  |
| ||
|
|
Who among us couldn't use a little image building?
Java Script image rollovers offer an increasingly popular
method for adding a "we're cool" look to Web pages. Talk about image building!
This corner of the "Square" automatically
builds a ready-to-run Java Script, after you fill in the blanks, the script is e-mailed to you.
In addition, we will also help you understand the Java Script code if you're into programming
types of things.
If you're the type of person who reads instructions only after all else fails, go immediately to the Image Builder which automatically generates Java Script code based on your specifications.
The bad news is not all browser support the
image rollovers effect. The browsers support this
Java Script Version 1.1 enhancement are Netscape 3.0, Opera, and later and Microsoft's
Internet Explorer 4.0 and later. The good news is only the rollover effect will be lost with
Java Script 1.1 unaware browsers.
If a user's browser doesn't support Java Script's image objects, the original images are display
but there is no mouse over image replacement.
Java Script's rollovers treat images as objects accessible by name and possessing properties changeable when an event, such as passing a mouse over a specified area, is initiated by a user.
Let's use the table at the top of this page as an example to explain the creation of a Java Script rollover.
The first step in the script is image rollovers functionality detection. I prefer to detect once and set a variable to "true" or "false." For a detailed discussion of detection by function, rather than by browser type, see the Java Script Detection of Objects and Methods tutorial.
// Does browser support image objects?
AcceptableBrowser = document.images;
// Subsequent testing uses the variable,
if (AcceptableBrowser) {
} # End of if (AcceptableBrowser)
|
Rollovers treat images as objects accessible by name and with properties that can be changed on the fly. The first step in the script's creation (in the head section of the HTML document) is preloading required images. First, a little Object Oriented Programming (OOP) speak. Images are preloaded and defined using a series of Image() objects. There are two images, and two Image() objects, for each displayed image. One is the image normally displayed and the other is the images that appears when the mouse is passed over the original image. The replaces image does not have to be in the same area as the original image.
Now, a little more OOP speak. The new constructor sets the image objects using src properties for the on and off versions of the image. To illustrate, the left rollover images in the table at the top of the page is called "Build" and will be explained shortly. Things get real hairy real fast if you don't use some type of naming conventions. The "Image Builder" generator uses a Name in the HTML section that describes the action. I prefer to use paired graphics with a file name suffixed by "-up" and "-dn" to indicate up for the normal state and down when the mouse is over the graphics. Here is what the JS codes is for the first graphic.
Height = 18; Width = 240; // Image dimensions
if (AcceptableBrowser) {
BuildDn = new Image(Height, Width);
BuildDn.src = "build-dn.gif"; // mouse over graphic location
BuildUp = new Image(Height, Width);
BuildUp.src = "build-up.gif"; // mouse out graphic location
// Additional image declarations
} # End of if (AcceptableBrowser)
|
This code assumes all images are the same size, if not, hard code the image dimensions in the Image() deceleration. If you are going to use the "Image Builder" generator, it is assumed you have selected two suffixes for the rollover image pair.
In this example, the value of the BuildDn object's src property is set to build-dn.gif which is the image appearing on a mouseover event. (More OOP speak.) The value of the BuildUp object's source property, the mouse out event, is set to build-up.gif. If the graphics are not in the same directory as the JS codes, use a relative path preceding the file name.
Let's skip ahead to the code appearing in the ≶BODY> section. The main code determines the original placement of the image and the name of the object. Additionally, Java Script function calls are specified for the mouse over (onMouseOver) and mouse off (onMouseOut) events. Specify the graphic in the HTML of the page using the same source as the ----Up.src because the normal position for the mouse is "off" he image.
Let's look at the actual code and then pick it apart:
<A HREF="condition.html"
onMouseOver="ReplaceImage('BuildDn','Build',
'Inhance my image now!');return true"
onMouseOut="ReplaceImage('BuildUp','Build',' ');
return true">
<IMG SRC="build-up.gif" ALT="Build" BORDER="0" WIDTH="240"
HEIGHT="18" NAME="Build"></A>
|
First, a URL Notice that is activated if the image is click. Next, there is only one function -- ReplaceImage -- that performs all the work. Lastly, the actual <IMG> code for the normal image. The only new attribute is the NAME parameter.
The ReplaceImage function requires three parameters. From left to right, the variable specified` in the Image() object, the name from the NAME attribute in the <IMG> tag. Lastly, the text to appear in the status bar. This last parameter is not required, it's an added feature.
The use of the first two parameters simplifies the overall construction of the scripts. I believe simpler is always better since it's easier to code and much easier to understand. Many JS rollovers use a different function for each function, or, one function for onMouseOver and another for onMouseOut events.
Finally, here is the code for the image replacements:
function ReplaceImage(ImageObject, Subscript, StatusMessage) {
if (AcceptableBrowser){
Graphic = eval(ImageObject + ".src");
document.images[Subscript].src = Graphic;
} //end if (AcceptableBrowser)
if (StatusMessage) { // if status bar message was passed
window.defaultStatus = StatusMessage;
} // end if (StuatusMessage)
return true;
} // end function ReplaceImage(ImageObject,Subscript,StatusMessage)
|
When the onMouseOver or onMouseOut event handlers calls ReplaceImage(), the function executes -- provided the user's browser support JS rollovers.
The statements:
Graphic = eval(ImageObject + ".src");
document.images[Subscript].src = Graphic;
|
starts by assigning the first passed parameter, suffixed with ".src" to the variable Graphic. Next the second passed parameter -- the variable assigned in the NAME parameter -- is used as a subscript in the images array and the value assigned to the bariable Graphic is used to replace the existing image.
If you're not used to dot notation the above may seem strange. If you're not used to programming, the entire thing may seenm strange!
I've tried to make the code as simple as possible and it is, hopefully, fairly straightforward. Just remember, the code in the HEAD section defines and preloades the images. The function ReplaceImage() is also defined in the HEAD section. The BODY section has the actual placement of the initial image and the code that is executed when events happen.
One last point. If you want images to appear side-by-side, with no space, there must be nothing between the closing </A> tag and the next <A HREF tag.
 | up to date with our "free stuff", special offers, and other goodies. |
 | Please sign our
self-updating guestbook How about some free stuff from ATS? |
Please send our
crotchety Webmaster some mail.
Copyright ©1996-98 America's Town Square
15 Hunter Drive
Tuckerton, NJ 08087
(609) 294-0320
