Rollovers

In this section we will show how to make a rollover, and some of its relatives. A rollover is an image that changes when you put your mouse over it.

Here are some things to be aware of as we explore this:

There is an attribute of the tag, called "name." This lets us refer to specific images on the page, rather than all of them at once. For example: code format="html4strict"  code An image tag is really just a holder for a picture, not the picture itself. (Imagine it as an invisible frame.) Thinking this way lets us change which image is in a specific image tag "holder" on the fly -- we just change the source of the image tag to a different URL.

Link tags () have an attribute called "onmouseover" which lets us execute some javascript instructions. The value of this attribute is a list of commands, separated by semicolons (";"). In fact, you can also have a list of just one item. Suppose we had the tag shown above on a webpage; the following code would create a link elsewhere that would alter this image: code format="html4strict" Test Rollover code Notice that the quotes around the URL are single quotes - since they have to be nested inside the double quotes around the attribute's value (i.e., "document....;"), they need to be distinct from the outer quotes. So we can nest single quotes inside double quotes. (In fact, we can put singles inside doubles inside singles inside doubles, etc.)

Here's an example of what this might look like: media type="custom" key="2126659" Notice that if you put your mouse over the "Test Rollover" link, it changes the image. However, if you click on the link, it will reload this page. The other problem with this link is that if you take your mouse back out of it, the graphic doesn't go back to the way it was. To do that, you need to also write an "onmouseout" attribute for the link. Similar to the onmouseover attribute, the onmouseout attribute has a value that is a list of commands to do when the mouse leaves this link, separated by semicolons. code format="html4strict" Test Rollover

code For example: media type="custom" key="2126695" (Note: a small cheat... In order to put both of these graphics on this page, I had to call one of them "HomeImage" and the other one "HomeImage2" behind the scenes. I am going to continue to do this behind the scenes, but we will pretend to be talking about all the same image....)

This example works much better - taking your mouse out of the link will cause the graphic to revert to its unhighlighted version. However, if we click the link, it still causes the page to reload. We can short-circuit this, behavior however. Although it is tempting to leave the "href" attribute out of the  tag, this would cause the  tag to stop behaving like a link. There is another attribute of the  tag, however, that will help us out: the "onclick" attribute. The onclick attribute's value is, like onmouseover and onmouseout, a list of commands, separated by semicolons. However, the onclick commands will all be executed //before// the href URL is followed (otherwise, there wouldn't be much point to them). If you make the last command in the onclick attribute be "return false," the process will be interrupted. No more commands from either the onclick or the href will be followed after the "return false" is reached. In other words, the "return false" command makes the link stop behaving like a hyperlink to another page. code format="html4strict" Test Rollover code Here's how this one works: media type="custom" key="2126745" This should behave just like the last one, but now clicking on the "Test Rollover" link will not cause this page to reload. We don't have to have a separate link from the image, however. As you have learned earlier, you can make an image itself be the linking text. To do this, you nest the tag inside the  tag and give the tag an attribute of border = "0." code format="html4strict"  code media type="custom" key="2126771" Now the graphic itself activates the rollover.

So far in these examples, each of the attributes onmouseover, onmouseout, and onclick have each had one command; however, it is possible to have several command, each separated by semicolons (all within the same set of double quotes). This allows you to make several changes at once to graphics. For example, if you had two img tags with names "firstImg" and "secondImg," you could write a link that did the following: code format="html4strict" Reset Images</a> code This would cause both images to change at the same time when you clicked the words "Reset Images." (Actually, they would change one right after another, but the computer is so fast it would probably look simultaneous.) There are many cool effects you can do with rollovers!