Background information

Scripting conventions

Some useful scripts:

User Alerts

Page information

Pull-down menus

Random images

Mouseovers

Windows and remotes

Where to go from here

Javascript

Jeff Williamson
Northern Virginia Community College
www.nvcc.edu/home/nvwillj/html-graphics/
nvwillj@nvcc.edu

Mouseovers or rollovers

Why: I thought these were just cheesy "look-at-me" effects for a long while, until I started working with older Internet users, who have two frequent problems:

1. They have a really hard time clicking on single-spaced hyperlinks - it's hard to place the tiny fingertip of the pointer.
2. They don't recognize images as clickable links.

It seems to me that mouseovers give good feedback that (1) the user has properly placed the mouse over a link, and (2) the image is a clickable link. They would seem particularly useful to me in sites that have lots of closely spaced links.

Example: I used these on the NVCC Alexandria web site

How: I can't decide whether these are complicated or easy. You see them everywhere, and lots of programs can generate them, but solutions really vary. Following are my observations on ease of use and reliability of three solutions I've used myself.

1. FrontPage generated "hover buttons"

Easy to make? Very
Reliable? Yes, with all additional directories published

Hover buttons (MS terminology) are an active component of FrontPage.They do not seem to require the FrontPage server extensions, but you do have to "publish" your site, which essentially allows FP to write in lots of additional directories and files, including the two small Java .class files which activate the 7 hover effects.

The short of it is that these are pretty simple to make if you already have a FP site.

2. Dreamweaver (v1.2) generated Javascript

Easy to make? Pretty much
Reliable? Not in my experience

I won't claim much knowledge here, just that I followed the directions and had Dreamweaver whip up some Javascript mouseover stuff and yech! - the code was really long and hard to follow and the effects didn't work right, either.

I didn't stick around long enough to really evaluate what went wrong.

Note 7/19/99 - Dreamweaver 2's mouseover script capabilities are much improved - just select an image and go to the Behaviors palette (F8). Read the bottom of this page before you let DW preload your images, though - seems to me that doing this in HTML is a little sturdier (probably a minor difference, though).

3. Charity Khan's Mouseover Machine

Easy to make? Hardest of the 3, but still not too bad
Reliable? Yes

This web tool at Builder.com asks for complete information about the images you want to use, and then whips up an HTML page with javascript already embedded.

It takes a few minutes to type in the stuff, and then you have to transfer the codes by hand, but for me at least this worked best of the three solutions outlined here.

Be sure to check out the other Cool Tools in the SuperScripter column at Builder.com.

---

Note 1: If it's not clear yet, you do have to make two graphics of similar sizes for each mouseover effect - for the "on" and "off" states.

Note 2: You'll also want to preload your images, so there's no delay for the server to download the "on" image.

There are a lot of ways to preload but I was sold immediately on the simplest one of all: Put your images to be preloaded wherever you want - splash page, same page, whatever - but set the IMG tag height and width attributes to 1 pixel each. This works flawlessly in any browser.