:: Introduction
In this article I will be teaching you the various different rollover effects used in web design everywhere. Rollovers are a vital part of web design; they add simple flair to web sites without drastically increasing load times. This includes text rollovers, image rollovers, and cell background rollovers. There are many different ways to obtain all these effects, and many different reasons for using the different methods. However, I have decided to demonstrate the most useful and adaptable methods. First up, I will start with text rollovers, as it is the easiest of the three and is a good place to start.

:: Text Rollovers
Example: *link here*
To start off, you need to insert the following code into the HEAD of your page:
Code:
<style>
<!-- .rollover {color:#0099CC;}.off {color:#000000;} -->
</style>
Let's break this down a bit. We refer to the ".rollover" and ".off" sections in this code as classes, which is exactly what they are. This code says to the web browser "when the rollover class is specified change the color of the text to #0099CC". This may be hard to understand right now, but when we make the links, it will all become clear.
Now, to activate the events on the desired links, you must place the following just after "A HREF" in your link:
Code:
CLASS="off" onMouseOver="this.className='rollover';" onMouseOut="this.className='Off';"
The onMouseOver and onMouseOut are known as events. The browser will see this as "when the mouse floats above the specified text, do the rollover class". So by now you should be able to understand how this system works; classes are specified in the HEAD of the page, and are activated alongside events.
As well as being able to change the color of text, you can perform a myriad of other effects. Such as, overlining and underlining, disappearing text, highlighting, font changes, and more. Below is a small list of codes you can add to the classes, and their effect on the text:
Code:
text-decoration:none; *= *Removes the underline
text-decoration:overline; *= *Adds an overline
text-decoration:underline overline; *= *Adds both an overline and underline
visibility:hidden; *= *Makes text invisible
background-color:#XXXXXX; *= *Changes the background of the text to specified color
font-family:X; *= *Changes the font
font-style:X; *= *Changes font style
font-size:Xpt; *= *Changes font size
:: Text Rollovers
Example: *Link Here*
This effect is similar to the previous; it still uses events, but doesn't use classes as such. Instead it uses a slightly more complex script to make the changes. Once again, you will need to insert a code into the HEAD of your page:
Code:
<script LANGUAGE=Javascript>
<!--
function inCell(cell, newcolor) {
if (!cell.contains(event.fromElement)) {
cell.bgColor = newcolor;
}
} 
function outCell(cell, newcolor) {
if (!cell.contains(event.toElement)) {
cell.bgColor = newcolor;
}
}
//-->
</SCRIPT>
In essence, it works the same as the text rollover. Classes (functions) are specified, which in turn make the corresponding effects occur. For example, "inCell" is sort of like a class. This is where it gets a bit more confusing. For this effect to work, we need to tell the script what colors we want to use, and which cell to perform the actions on. In the text rollover, the script already knew what color to change, all we had to do was activate it. Below is code which must be inserted straight after "TD" in the cell tag:
Code:
onMouseOver="inCell(this, '#0099CC');" onMouseOut="outCell(this, '#FFFFFF');"
You should now be able to see how the script works. When the events take place, "what cell" and "what color" are sent to the script. The script then uses this information to accomplish the desired actions.

:: Image Rollovers
Example: *Link Here*
This rollover effect uses a far more complex script than what has been covered so far. An image rollover requires two pictures. When the mouse cursor is placed over the top image, the second image you choose will replace it. Remember, the two images must be the same size, or one of the images will be shrunk/enlarged to the size of the other image, which will lead to distortion. Once again it uses a script which needs the properties of the rollover to be specified. Paste the following script into the HEAD of your page:
Code:
<script TYPE="text/javascript">
var rollOverArr=new Array();
function setrollover(OverImgSrc,pageImageName)
{
if (! document.images)return;
if (pageImageName == null)
pageImageName = document.images[document.images.length-1].name;
rollOverArr[pageImageName]=new Object;
rollOverArr[pageImageName].overImg = new Image;
rollOverArr[pageImageName].overImg.src=OverImgSrc;
} 
function rollover(pageImageName)
{
if (! document.images)return;
if (! rollOverArr[pageImageName])return;
if (! rollOverArr[pageImageName].outImg)
{
rollOverArr[pageImageName].outImg = new Image;
rollOverArr[pageImageName].outImg.src = document.images[pageImageName].src;
}
document.images[pageImageName].src=rollOverArr[pageImageName].overImg.src;
}

function rollout(pageImageName)
{
if (! document.images)return;
if (! rollOverArr[pageImageName])return;
document.images[pageImageName].src=rollOverArr[pageImageName].outImg.src;
}
//-->
</SCRIPT>
No, you're not expected to memerize all that! I suggest pasting it into a text document and keep it for reference. The next part of this effect is the activation of the script. Paste the following in your page where you want the rollover, replace File1/File2 with the target for the first/second image, NameX with the name of the rollover (can be named anything other than functions in the script), and LinkX with the target url:
Code:
<a href="LinkX" onMouseOut="rollout('NameX')" onMouseOver="rollover('NameX')">
<img src="File1" name="NameX" border="0"></a>
<script TYPE="text/javascript"><!--
setrollover("File2");
//-->
</SCRIPT>
As you can see, it is a link, just like the text roll over, with specified events. On the MouseOut event, the script is told to rollout 'NameX', and on MouseOver, to rollover 'NameX'. The next section specifies what images to rollover/out. As you can see, the top image is inserted just like a normal image. However, the rollover image must be defined within a script with the 'setrollover' function.

:: Conclusion
With a little bit of luck, you might fully understand what has been discussed in this article. But for most of you, I wouldn't expect you to totally grasp everything. If some of this seems confusing, I wouldn't worry, after repeating these processes a few times, you'll know what you're doing! B)