Question about css

[NewComputer]

Can I use it to clean up the following image over code:

<a href="http://www.newcomputer.ca" onMouseOver="MM_swapImage('Image1','','/Images/home_over1.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="Images/Home.gif" alt="Return to the homepage of New Computer.ca with this button" name="Image1" width="91" height="31" border="0" id="Image1" ></a></td>
<td><a href="http://www.newcomputer.ca/about_us.htm" onMouseOver="MM_swapImage('Image40','','/Images/about_us_over.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="/Images/about_us.gif" name="Image40" width="97" height="31" border="0"></a></td>
<td><a href="http://www.newcomputer.ca/rates.htm" onMouseOver="MM_swapImage('Image4','','/Images/our_rates_over.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="Images/our_rates.gif" alt="Return to the rates page of New Computer.ca with this button" name="Image4" width="119" height="31" border="0"></a></td>
<td><a href="http://www.newcomputer.ca/specials.htm" onMouseOver="MM_swapImage('Image5','','/Images/our_specials_over.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="Images/our_specials.gif" name="Image5" width="125" height="31" border="0" id="Image5" ></a></td>
<td><a href="http://www.newcomputer.ca/upgrades.htm" onMouseOver="MM_swapImage('Image6','','/Images/pc_upgrades_over.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="Images/pc_upgrades.gif" name="Image6" width="139" height="31" border="0" id="Image6" ></a></td>
<td><a href="http://www.newcomputer.ca/purchases.htm" onMouseOver="MM_swapImage('Image7','','/Images/new_computer_purchase_over.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="Images/new_computer_purchase.gif" name="Image7" width="155" height="31" border="0" id="Image7" ></a>

I would like to clean this code up using css, just wondering if it possible.

[dazzlindonna]

Sure, just do a google search for "css image rollover" without the quotes. You'll find plenty of ways to do it.

[Severus Maximus]

A simple rollover effect in css could be constructed as follows:

link in the HTML:
<a id=eml href="/e.htm" title="Email this page"></a>

2 css rules:
a#eml{width:38;height:30;background-image: url(/i/e.gif);}
a:hover#eml{width:38;height:30;background-image: url(/i/eo.gif);

short explanation:
<a id=eml href="/e.htm" title="Email this page"></a>
anchor with id "eml" refers to the html page e.htm, no problem so far.

next you will need a css rule to show the email image without the mouseover
a#eml{width:38;height:30;background-image: url(/i/e.gif);}
this rule states thet all anchors with id "eml" reserve a space of 38 x 30 pixels and the image displayed in that space comes from the absolute url /i/e.gif (/i is the images folder and e is the image you wish to use.
You can also write this rule as #eml a{width:38;height:30;background-image: url(/i/e.gif);}

for the rollover
a:hover#eml{width:38;height:30;background-image: url(/i/eo.gif);
here all anchors with id "eml" in the "hover" state reserve a space of 38 x 30 pixels and the image displayed in that space comes from the absolute url /i/eo.gif (/i is the images folder and eo is the image you wish to use.
You can also write this rule as #eml a:hover{width:38;height:30;background-image: url(/i/eo.gif);}

NewComputer: one of your links :
<a id="mhome" href="http://www.newcomputer.ca" title="Return to the homepage of New Computer.ca with this button" ></a>

the external css would be:
a#mhome{width:91;height:31;background-image: url(/Images/Home.gif);}
a:hover#mhome{width:91;height:31;background-image: url(/Images/home_over1.gif);

For the id you can use whatever you like but use something descriptive, I used mhome (menu home button)
The width and height are obviously from the image and for the image url you should use the ABSOLUTE path to the image.

Hope this helps you out, otherwise post your problem here or PM me.

[Severus Maximus]

The above code has a typo.
Each css sentence should end with a }

a:hover#eml{width:38;height:30;background-image: url(/i/eo.gif);
Should be
a:hover#eml{width:38;height:30;background-image: url(/i/eo.gif);}

a:hover#mhome{width:91;height:31;background-image: url(/Images/home_over1.gif);
Should be
a:hover#mhome{width:91;height:31;background-image: url(/Images/home_over1.gif);}

Just another copy paste typo.

[NewComputer]

Thanks Sever,

picked that up pretty quickly ;)