Step 1
First we need to add CSS to the head tag of your site:
<STYLE type="text/css">
<!--
.over { background-color: #8CBA41; }
.out { }
-->
</STYLE>
Basically, .over is the CSS state of when you rollover something, for the Zymic menu I chose to change it's state so it adds a new background colour #8CBA41 to the table data background as you can see.
.out is the state once your mouse roll's off a certain object, for this case I chose nothing as I wanted the rollover to return to it's original state.
Step 2
We now need to apply some CSS code to the object's your wanting to include a rollover in.
I have done a quick example menu as shown below:
My Link 1
My Link 2
My Link 3
My Link 4
My Link 5
Code:
<table width="200" border="1" cellspacing="0" cellpadding="1" bordercolor="#AEAEAE">
<tr>
<td>My Link 1</td>
</tr>
<tr>
<td>My Link 2</td>
</tr>
<tr>
<td>My Link 3</td>
</tr>
<tr>
<td>My Link 4</td>
</tr>
<tr>
<td>My Link 5</td>
</tr>
</table>
Step 3
I am wanting to apply a rollover to each TD (table data) cell, so when someone roll's their cursor over a link it's TD background cell will change colour.
In order to do this, we need to apply some CSS code to each of the TD tag's.
The code for this is:
onMouseOver="this.className='over'" onMouseOut="this.className='out'"
Now let's add it to our menu's TD tags.
<table width="200" border="1" cellspacing="0" cellpadding="1" bordercolor="#AEAEAE">
<tr>
<td onMouseOver="this.className='over'" onMouseOut="this.className='out'">My Link 1</td>
</tr>
<tr>
<td onMouseOver="this.className='over'" onMouseOut="this.className='out'">My Link 2</td>
</tr>
<tr>
<td onMouseOver="this.className='over'" onMouseOut="this.className='out'">My Link 3</td>
</tr>
<tr>
<td onMouseOver="this.className='over'" onMouseOut="this.className='out'">My Link 4</td>
</tr>
<tr>
<td onMouseOver="this.className='over'" onMouseOut="this.className='out'">My Link 5</td>
</tr>
</table>
Step 4
Our menu will now how css rollovers like below, just roll your cursor on any link:
My Link 1
My Link 2
My Link 3
My Link 4
My Link 5
Final HTML/CSS Result Code:
<head>
<title>Menu</title>
<STYLE type="text/css">
<!--
.over { background-color: #8CBA41; }
.out { }
-->
</STYLE>
</head>
<table width="200" border="1" cellspacing="0" cellpadding="1" bordercolor="#AEAEAE">
<tr>
<td onMouseOver="this.className='over'" onMouseOut="this.className='out'">My
Link 1</td>
</tr>
<tr>
<td onMouseOver="this.className='over'" onMouseOut="this.className='out'">My
Link 2</td>
</tr>
<tr>
<td onMouseOver="this.className='over'" onMouseOut="this.className='out'">My
Link 3</td>
</tr>
<tr>
<td onMouseOver="this.className='over'" onMouseOut="this.className='out'">My
Link 4</td>
</tr>
<tr>
<td onMouseOver="this.className='over'" onMouseOut="this.className='out'">My
Link 5</td>
</tr>
</table>
Thats as easy as it get's, and is much, much better than using javascript!
Step 5
Taking Things Further
Ok, that was a bit too easy wasn't it? As we are playing with CSS, we can apply much more advanced effect's to rollovers.
If your familiar with CSS you will have noticed that when we did the CSS code which goes in the "head" tag can be added too, to create more effect's, wether it be changing a background to a new image, or changing the border of a cell once on rollover etc etc.
So, i'v decided to create a menu, which once you rollover each link's background it changes the TD cell bg to an image and even changes your cursor!
First you will need to save the below image into the same directory where the menu will be, this will be our rollover image:
Step 6
Ok, let's first add the below CSS code to our head tags:
<STYLE type="text/css">
<!--
.over {background-image: url(cssrolloverimgbg.gif);; cursor: help }
.out { }
-->
</STYLE>
Please note, change cssrolloverimgbg.gif to the path of the above rollover image you saved.
Step 7
Roll your mouse over each link below, your bg image will apear and a help cursor will show!
Link 1
Link 2
Link 3
Link 4
Link 5
Final HTML/CSS Result Code:
<head>
<title>my menu</title>
<STYLE type="text/css">
<!--
.over {background-image: url(cssrolloverimgbg.gif);; cursor: help }
.out { }
-->
</STYLE>
</head>
<table width="150" border="0" cellspacing="0" cellpadding="1" bgcolor="#9A9A9A">
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#E6E6E6" onMouseOver="this.className='csstutover'" onMouseOut="this.className='out'"><font size="2">Link
1</font></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#E6E6E6" onMouseOver="this.className='csstutover'" onMouseOut="this.className='out'"><font size="2">Link
2</font></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#E6E6E6" onMouseOver="this.className='csstutover'" onMouseOut="this.className='out'"><font size="2">Link
3</font></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#E6E6E6" onMouseOver="this.className='csstutover'" onMouseOut="this.className='out'"><font size="2">Link
4</font></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#E6E6E6" onMouseOver="this.className='csstutover'" onMouseOut="this.className='out'"><font size="2">Link
5</font></td>
</tr>
</table>
</td>
</tr>
</table>
First we need to add CSS to the head tag of your site:
<STYLE type="text/css">
<!--
.over { background-color: #8CBA41; }
.out { }
-->
</STYLE>
Basically, .over is the CSS state of when you rollover something, for the Zymic menu I chose to change it's state so it adds a new background colour #8CBA41 to the table data background as you can see.
.out is the state once your mouse roll's off a certain object, for this case I chose nothing as I wanted the rollover to return to it's original state.
Step 2
We now need to apply some CSS code to the object's your wanting to include a rollover in.
I have done a quick example menu as shown below:
My Link 1
My Link 2
My Link 3
My Link 4
My Link 5
Code:
<table width="200" border="1" cellspacing="0" cellpadding="1" bordercolor="#AEAEAE">
<tr>
<td>My Link 1</td>
</tr>
<tr>
<td>My Link 2</td>
</tr>
<tr>
<td>My Link 3</td>
</tr>
<tr>
<td>My Link 4</td>
</tr>
<tr>
<td>My Link 5</td>
</tr>
</table>
Step 3
I am wanting to apply a rollover to each TD (table data) cell, so when someone roll's their cursor over a link it's TD background cell will change colour.
In order to do this, we need to apply some CSS code to each of the TD tag's.
The code for this is:
onMouseOver="this.className='over'" onMouseOut="this.className='out'"
Now let's add it to our menu's TD tags.
<table width="200" border="1" cellspacing="0" cellpadding="1" bordercolor="#AEAEAE">
<tr>
<td onMouseOver="this.className='over'" onMouseOut="this.className='out'">My Link 1</td>
</tr>
<tr>
<td onMouseOver="this.className='over'" onMouseOut="this.className='out'">My Link 2</td>
</tr>
<tr>
<td onMouseOver="this.className='over'" onMouseOut="this.className='out'">My Link 3</td>
</tr>
<tr>
<td onMouseOver="this.className='over'" onMouseOut="this.className='out'">My Link 4</td>
</tr>
<tr>
<td onMouseOver="this.className='over'" onMouseOut="this.className='out'">My Link 5</td>
</tr>
</table>
Step 4
Our menu will now how css rollovers like below, just roll your cursor on any link:
My Link 1
My Link 2
My Link 3
My Link 4
My Link 5
Final HTML/CSS Result Code:
<head>
<title>Menu</title>
<STYLE type="text/css">
<!--
.over { background-color: #8CBA41; }
.out { }
-->
</STYLE>
</head>
<table width="200" border="1" cellspacing="0" cellpadding="1" bordercolor="#AEAEAE">
<tr>
<td onMouseOver="this.className='over'" onMouseOut="this.className='out'">My
Link 1</td>
</tr>
<tr>
<td onMouseOver="this.className='over'" onMouseOut="this.className='out'">My
Link 2</td>
</tr>
<tr>
<td onMouseOver="this.className='over'" onMouseOut="this.className='out'">My
Link 3</td>
</tr>
<tr>
<td onMouseOver="this.className='over'" onMouseOut="this.className='out'">My
Link 4</td>
</tr>
<tr>
<td onMouseOver="this.className='over'" onMouseOut="this.className='out'">My
Link 5</td>
</tr>
</table>
Thats as easy as it get's, and is much, much better than using javascript!
Step 5
Taking Things Further
Ok, that was a bit too easy wasn't it? As we are playing with CSS, we can apply much more advanced effect's to rollovers.
If your familiar with CSS you will have noticed that when we did the CSS code which goes in the "head" tag can be added too, to create more effect's, wether it be changing a background to a new image, or changing the border of a cell once on rollover etc etc.
So, i'v decided to create a menu, which once you rollover each link's background it changes the TD cell bg to an image and even changes your cursor!
First you will need to save the below image into the same directory where the menu will be, this will be our rollover image:
Step 6
Ok, let's first add the below CSS code to our head tags:
<STYLE type="text/css">
<!--
.over {background-image: url(cssrolloverimgbg.gif);; cursor: help }
.out { }
-->
</STYLE>
Please note, change cssrolloverimgbg.gif to the path of the above rollover image you saved.
Step 7
Roll your mouse over each link below, your bg image will apear and a help cursor will show!
Link 1
Link 2
Link 3
Link 4
Link 5
Final HTML/CSS Result Code:
<head>
<title>my menu</title>
<STYLE type="text/css">
<!--
.over {background-image: url(cssrolloverimgbg.gif);; cursor: help }
.out { }
-->
</STYLE>
</head>
<table width="150" border="0" cellspacing="0" cellpadding="1" bgcolor="#9A9A9A">
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#E6E6E6" onMouseOver="this.className='csstutover'" onMouseOut="this.className='out'"><font size="2">Link
1</font></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#E6E6E6" onMouseOver="this.className='csstutover'" onMouseOut="this.className='out'"><font size="2">Link
2</font></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#E6E6E6" onMouseOver="this.className='csstutover'" onMouseOut="this.className='out'"><font size="2">Link
3</font></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#E6E6E6" onMouseOver="this.className='csstutover'" onMouseOut="this.className='out'"><font size="2">Link
4</font></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#E6E6E6" onMouseOver="this.className='csstutover'" onMouseOut="this.className='out'"><font size="2">Link
5</font></td>
</tr>
</table>
</td>
</tr>
</table>
