Mouseovers at Ricci Street's Gizmos, Inc. Toolkit: PC Workshop

I have a question: how do you get mouseovers to work?

I am trying to have an effect where the left-hand side navigation bar icons change color when the mouse goes over it. I think I understand how to do that but I also want it so that the main logo in the center of the page changes color to match the left hand navigation bar icon.

For example if I mouseover the "contact us" button and it changes to purple, I want the logo in the center to also turn purple. Can you help? Do I need the logo to be in different colors to attach in the html code (1 in red, 1 in purple, etc?) or can I change the image color in Frontpage?

You use JavaScript for mouseovers, aka roll-overs. As the word script implies, there is an event and a response or reaction. What you're looking for is an event called a mouseOver and a response or an image switch elsewhere on the page. (I capitalize and indent to make reading easier.)

For example, on Leslie's page, you run your mouse over one of the four circular buttons in the corners and the message in the center changes. The easiest way to do this is to have two images, the one that is displayed by default when the page loads and the other that is displayed when the event (the mouseOver) occurs. Leslie has five images available for display in the middle space: the default Happy Holidays and each of the other four.

Part of the trick here is naming the "objects" on the page. That's different from the file names of the images you want to appear. The object in Leslie's case is the space between the tag pairs that the middle image occupies. It's probably a centered table cell tag, but it could be a p tag or one of the h tags. The object can have a name and address separate from the content (text or images) that occupy that object.

If you don't understand what I'm saying here, learn a little bit about objects, specifically, how a document is made up of them. The rules for making it work are based on the document object model, or DOM.

If you understand what I'm saying here, it gets pretty easy. JavaScript gives you a syntax for addressing those objects and creating if / then responses. Example: "If the mouse passes over object A, then swap the two images displaying in object B elsewhere on this page."

Jasc, the company that makes PaintShop Pro, has a tutorial called Rollover Effects. After you figure it out once, you can keep reusing your own code.

You should be able to adapt Leslie's JavaScript to your situation. Do a view source on her page. You're looking for the second script. The first does the trailing cursor.

Note | In JavaScript, the lines beginning with double slashes // are an optional courtesy that describes the code that follows. The braces { }, brackets [ ], and parentheses ( ) are always paired and may be nested.

if(document.images) {

   img1middle = new Image();
   img1middle.src = "images/middleprivacy.gif";

   img2middle = new Image();
   img2middle.src = "images/middlepharmacy.gif";

   img3middle = new Image();
   img3middle.src = "images/middlemerchant.gif";

   img4middle = new Image();
   img4middle.src = "images/middleresume.gif";
}

//Function to 'activate' images

function imgOn(imgName) {

if (document.images) {

document["default"].src = eval(imgName + "middle.src");}
}

//Function to 'deactivate' images

function imgOff(imgName) {

if (document.images) {

document["default"].src = "images/middledefault.gif";}
}

You have a 4-part if / then relationship and two functions, one for the image to change when the mouseOver event occurs and the other for the image to change when the mouseOff event occurs. If you wanted the change to happen once and stay that way, you'd need only the first function.

Then look at Leslie's HTML almost at the bottom.

The td is the table cell. You'll see four bits of code that look just like that with different values between the quotation marks.

Between them is one more table cell:

It specifies the path to the image that should display when the page loads: middledefault.gif. It also names the image object. In this case, the name is default, but it can be any name you want.

Now go back and look at one of the four table cells that are so similar. The image source:

specifies the image that displays when the page load. This is the white-on-red Privacy Presentation.

Because you want these images to be links, too, here's how the a tag reads:

The first part is the page it links to. The second part says what function (from the script above) to perform when the mouse passes over the hot object (the white-on-red Privacy Presentation image). "Do function imgOn for img1." The third part says what function (from the script) to perform when the mouse passes off the hot object. "Do function imgOff for img1."

At this point, you should be able to use Leslie's script as a model. If you want a greater or fewer number of image swaps, add or delete the appropriate lines. If you want some arrangement different from Leslie's four-corners-and-center, just be sure to give the objects the same name in the script and the code.

Learn more

To learn more about Leslie's script, take another look at it. First, you have to provide a path to the images you want swapped into the object in response to the mouseOver event.

if(document.images) {
img1middle = new Image();
img1middle.src = "images/middleprivacy.gif";

Note that there are four of these and the only differences are img1, 2, 3, and 4, the file name that gets swapped in, and the path to it if applicable. In this case, Leslie wants the image middleprivacy.gif swapped in and it's in the image/ subdirectory.

The tricky part to reading this bit of code is the DOM or document object model. The idea here is that just as the document can have a file name and thus a location (or address) in a directory structure, so each object within that document can have an address as well as a name or HTML tag.

So the first line:

is the beginning of an if / then statement. It says, "If one of the images in this document ...." That's all it says there. So the first two lines:

are the continuation of the if / then statement. They say, "If one of the images in this document is named img1middle, then perform the function called new Image ().

[ unfinished December 7, 2000 ]

Rollovers are seemingly everywhere on the Web these days. Originally created using JavaScript and multiple images, rollovers have become more sophisticated as CSS has become more popular. However you create them, rollovers give your users instant (hopefully) feedback when they hover over a link, increasing usability.

As browsers have evolved from version 3 through version 6 we've seen rollovers evolve also, albeit at a slower pace. Most improvements in rollovers use fewer images, or none at all. The newest ones use only CSS and an optional dash of JavaScript. This saves bandwidth and HTTP requests and increases accessibility.

We chronicle the development of rollover creation techniques used on the Web over time.

Microsoft's animate.js

If you are going to change Microsoft's animate.js file, make the following changes so that FrontPage does not overwrite your modified script.

In the script tag, change type="dynamicanimation" to type="mydynamicanimation".

In the first script statement, change all instances of "dynamicanimation" to "mydynamicanimation".

Throughout the HTML content, change all instances of dynamicanimation= to mydynamicanimation=.

Change function dynAnimation to function mydynAnimation.

In the body tag, change onload="dynAnimation()" to onload="mydynAnimation()".

other tools

Roller is THE mouseover generator you want to use. With Roller, you can generate code for unlimited buttons per session. Got buttons in DHTML layers? No problem! Roller's code can handle it with no extra coding on your part! With an easy to use interface and lots of features, Roller is a tool for beginning designers as well as the seasoned webmaster!

WM_imageSwap() changes the source of a given image so that it displays a new image.

JavaScript is commonly used to change the source of an image (for example, when a user clicks on or mouses over the image in question). The WM_imageSwap() function takes a reference to the original image and a URL for the new image as arguments and then changes the source of the original image to that of the new image.

The onMouseOver event handler isn't supported in older Netscape browsers. Try wrapping your images inside an anchor tag and link this to nothing. A visitor who clicks the link won't go
anywhere, but the onMouseOver should work.





Showroom information design	Playroom interactivity design	Research Lab usability design
Workbench web design applications	Kiln digital development process	Toolkit digital technology guide


search \| sitemap \| help
Ricci Green \| Digital Wares \| Gizmos, Inc. CyberSea Inn \| Port 80

modified: August 15, 2001 by Douglas Anderson http://RicciStreet.net/gizmos/toolkit/webmaking/mouseovers.htm

Mouseovers

The PC Workshop

Learn more

Microsoft's animate.js

other tools