use Notepad or any HTML/CSS Editor
Introduction:
In this tutorial, I will introduce table rollovers in CSS, the kind that you see on everyone of our pages where you hover over a latest tutorial, and it changes colors. This effect is achieved using some simple CSS code, and a little HTML process. You can use this effect anywhere in your website, whether it be navigation or just for plain fun.
Step 1
First thing that I want you to do is create a new CSS file that you will link too in your main HTML page that uses the rollover effect. I name all my CSS files for websites "core.css" for the main CSS file. Now, in your CSS file we will create 1 new class. It will be navCellOn.
Now, as you should already know having some basic knowledge of CSS, I have just created 1 new CSS class, and put in its opening and closing tags.
Step 2
Now, you have set your core.css file, and you can now set up your HTML file. You can use a div or a table (we will use a div in this example) and you will see how we use the rollovers. So go ahead and create your table, you can include all your widths and heights within the div html code or in a CSS file, we will put it in an external CSS file (core.css)
Rollover.html
As can see, we have called upon a class called tableRoll, you will see the code for this class in a second. The other thing you will notice is that we have called upon our other class navCellOn, under "onmouseover" this means, when the mouse goes over our DIV that the class will change and you will have your rollover effect. Below is the code for our normal tableRoll class
In this table we have set the font type,color,size of the font within the div, plus we have also added the width,height, and float position of the DIV. Now, we can set the class that you see when your mouse rolls over the DIV, navCellOn.
As you can see, we have set the color of the font to #000000 (black) and the background color to #FF9900 (orange) so when you hover over the DIV, the font will change to black, and the background will change to orange. Here are our final codes:
Core.css - Final
Rollover.html - Final
if need help, post
Introduction:
In this tutorial, I will introduce table rollovers in CSS, the kind that you see on everyone of our pages where you hover over a latest tutorial, and it changes colors. This effect is achieved using some simple CSS code, and a little HTML process. You can use this effect anywhere in your website, whether it be navigation or just for plain fun.
Step 1
First thing that I want you to do is create a new CSS file that you will link too in your main HTML page that uses the rollover effect. I name all my CSS files for websites "core.css" for the main CSS file. Now, in your CSS file we will create 1 new class. It will be navCellOn.
| Code: |
| Core.css
.navCellOn { } |
Now, as you should already know having some basic knowledge of CSS, I have just created 1 new CSS class, and put in its opening and closing tags.
Step 2
Now, you have set your core.css file, and you can now set up your HTML file. You can use a div or a table (we will use a div in this example) and you will see how we use the rollovers. So go ahead and create your table, you can include all your widths and heights within the div html code or in a CSS file, we will put it in an external CSS file (core.css)
Rollover.html
| Code: |
| <div class="tableRoll"
onmouseout="this.className='tableRoll';" onmouseover="this.className='navCellOn';"> </div> |
As can see, we have called upon a class called tableRoll, you will see the code for this class in a second. The other thing you will notice is that we have called upon our other class navCellOn, under "onmouseover" this means, when the mouse goes over our DIV that the class will change and you will have your rollover effect. Below is the code for our normal tableRoll class
| Code: |
|
Core.css - contd. .tableRoll { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #FFFFFF; height: 100px; width: 300px; float: left; } |
In this table we have set the font type,color,size of the font within the div, plus we have also added the width,height, and float position of the DIV. Now, we can set the class that you see when your mouse rolls over the DIV, navCellOn.
| Code: |
|
Core.css - contd. .navCellOn { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #000000; background-color: #FF9900; padding-top: 20px; } |
As you can see, we have set the color of the font to #000000 (black) and the background color to #FF9900 (orange) so when you hover over the DIV, the font will change to black, and the background will change to orange. Here are our final codes:
Core.css - Final
| Code: |
| .tableRoll {
font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #FFFFFF; height: 100px; width: 300px; float: left; padding-top: 20px; } .navCellOn { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #000000; background-color: #FF9900; } |
Rollover.html - Final
| Code: |
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html> <head> <title>Rollover File</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link href="core.css" rel="stylesheet" type="text/css"> </head> <body> <div class="tableRoll" onmouseout="this.className='tableRoll';" onmouseover="this.className='navCellOn';"> PixelFull Rules! </div> </body> </html> |
if need help, post
