Rollover/Hover Image Swap Help

[NeoDjinn]

Hi,
I'm using the below CSS to change the image of an image but when I test it on my localhost tester it works superb however when placed on the webserver (any webserver) the rollover/hover is soooo slow to apply the images that it looks sooo bad and unprofessional.

.side_menu
  {
	background: #283250 url('menu.jpg') no-repeat center;
	width:175px;
	height:22px;
	font-family: Engravers Gothic; 
	color : #558CFF;
        font-size: 10pt;
        padding-left:24px;
        padding-top:3px;
        text-decoration: none;
  }
.side_menu:hover
  {
	background: #283250 url('menu_over.jpg') no-repeat center;
	width:175px;
	height:22px;
	font-family: Engravers Gothic; 
	color : #ffffff;
        font-size: 10pt;
        padding-left:24px;
        padding-top:3px;
        text-decoration: none;
  }

Here's the application of it in the page...

<table border="0" cellpadding="0" cellspacing="0">
  <tr><td style="background:url('menu.jpg');"><a class="side_menu" href="./" target="BodyFrame">Home</a></td></tr>
  <tr><td style="background:url('menu.jpg');"><a class="side_menu" href="info.asp" target="BodyFrame">Business Info</a></td></tr>
  <tr><td style="background:url('menu.jpg');"><a class="side_menu" href="restore.asp" target="BodyFrame">Restorations</a></td></tr>
  <tr><td style="background:url('menu.jpg');"><a class="side_menu" href="products.asp" target="BodyFrame">Products</a></td></tr>
  <tr><td style="background:url('menu.jpg');"><a class="side_menu" href="custom.asp" target="BodyFrame">Custom Builds</a></td></tr>
  <tr><td style="background:url('menu.jpg');"><a class="side_menu" href="contacts.asp" target="BodyFrame">Contacts</a></td></tr>
</table>

Does someone know how to fix this or a better way of doing it?

Thanks in Advance.

[Medyman]

What's the size of the images you're using? First, I recommend that you optimize those images. The problem isn't with your coding, it's that the images have to be loaded.

Have a look at the following articles:
http://wellstyled.com/css-nopreload-rollovers.html
http://www.fivesevensix.com/studies/ie6flicker/

[NeoDjinn]

Thanks, I'll look at those. To answer your question the images are 853bytes and 856bytes respectively. Very tiny in size for the quality.

[NeoDjinn]

Out-Freaking-Standing!!!! The second link works perfectly 100%!!!


Here's the new CSS...

.side_menu
  {
	background: url('menu.jpg') no-repeat center;
	width:175px;
	height:22px;
	font-family: Engravers Gothic; 
	color : #558CFF;
        font-size: 10pt;
        padding-left:24px;
        padding-top:3px;
        text-decoration: none;
  }
.side_menu:hover
  {
	background-image: none;
	width:175px;
	height:22px;
	font-family: Engravers Gothic; 
	color : #ffffff;
        font-size: 10pt;
        padding-left:24px;
        padding-top:3px;
        text-decoration: none;
  }

Here's the new usage of it...

<table border="0" cellpadding="0" cellspacing="0">
  <tr><td background="menu_over.jpg"><a class="side_menu" href="./" target="BodyFrame">Home</a></td></tr>
  <tr><td background="menu_over.jpg"><a class="side_menu" href="info.asp" target="BodyFrame">Business Info</a></td></tr>
  <tr><td background="menu_over.jpg"><a class="side_menu" href="restore.asp" target="BodyFrame">Restorations</a></td></tr>
  <tr><td background="menu_over.jpg"><a class="side_menu" href="products.asp" target="BodyFrame">Products</a></td></tr>
  <tr><td background="menu_over.jpg"><a class="side_menu" href="custom.asp" target="BodyFrame">Custom Builds</a></td></tr>
  <tr><td background="menu_over.jpg"><a class="side_menu" href="contacts.asp" target="BodyFrame">Contacts</a></td></tr>
</table>

So to explain the fix; switch the order of when you use the images for rollover. Put your second state image in the upper container (in this case the background for the <td>) and then have the initial state image as the loaded CSS image. Next, on the Hover state simply clear the image from the prime element.

Thank You Soo Much for the Help! Now it reacts nicely as it should.

[Medyman]

Glad you got it working

[johnwboyd]

I'm actually trying to get a HORIZONTAL menu to work which will have a hover reversed for the active tab of page your on:


<style type="text/css">
.menu
{
background: url('images/active.jpg') repeat center;
width: 100%;
line-height: 20px;
font-family: Verdana;
padding: 0px;
color : #ffffff;
font-size: 10pt;
text-decoration: none;
text-align: middle;
}
.menu:hover
{
background: url('images/over.jpg') repeat center;
width:100%;
line-height: 20px;
padding: 0px;
font-family: Verdana;
color : #ffffff;
font-size: 10pt;
text-decoration: none;
text-align: middle;
}

.menu1
{
background: url('images/over.jpg') repeat center;
width: 100%;
line-height: 20px;
font-family: Verdana;
color : #ffffff;
font-size: 10pt;
padding: 2px;
text-decoration: none;
text-align: center;
}
.menu1:hover
{
background: url('images/active.jpg') repeat center;
width: 100%;
line-height: 20px;
font-family: Verdana;
color : #ffffff;
font-size: 10pt;
padding: 2px;
text-decoration: none;
text-align: center;
}

</style>

<table width="637" border="0" cellspacing="0" cellpadding="0">
<tr height="20">
<td width="57" height="20">
<center>
<a class="menu1" href="index.htm">Home</a></center>
</td>
<td width="86" height="20">
<center>
<a class="menu" href="about.htm">About Us</center>
</td>
<td width="86" height="20">
<center>
<a class="menu" href="newsroom.htm">Newsroom</center>
</td>
<td width="84" height="20">
<center>
<a class="menu" href="research.htm">Research</center>
</td>
<td width="148" height="20">
<center>
<a class="menu" href="investor_relations.htm">Investor Relations</center>
</td>
<td width="67" height="20">
<center>
<a class="menu" href="careers.htm">Careers</center>
</td>
<td width="110" height="20">
<center>
<a class="menu" href="contact.htm">Contact Us</center>
</td>
</tr>

[johnwboyd]

This is the CSS that works:

</style>
<style type="text/css">
.menu
{
background: url('images/active.jpg') repeat;
width: 100%;
line-height: 23px;
float:left;
display:inline;
font-family: Verdana;
color : #ffffff;
font-size: 10pt;
text-decoration: none;
text-align: center;
}
.menu:hover
{
background: url('images/over.jpg') repeat;
width: 100%;
line-height: 23px;
float:left;
display:inline;
font-family: Verdana;
color : #ffffff;
font-size: 10pt;
text-decoration: none;
text-align: center;
}

.menu1
{
background: url('images/over.jpg') repeat;
width: 100%;
line-height: 23px;
float:left;
display:inline;
font-family: Verdana;
color : #ffffff;
font-size: 10pt;
text-decoration: none;
text-align: center;
}
.menu1:hover
{
background: url('images/active.jpg') repeat;
width: 100%;
line-height: 23px;
float:left;
display:inline;
font-family: Verdana;
color : #ffffff;
font-size: 10pt;
text-decoration: none;
text-align: center;
}
</style>