PDA

View Full Version : TD Mouseover problems.. help please!



hideto
Mar 16th, 2007, 12:21 PM
Can someone please help me with my TD Mouseover problem?

I made a menu in Table form, and had the following codes:

<style type="text/css">
td.normal{
background-image:url(images/m1.jpg);
}

td.normalon {
background-image: url(images/m1r.jpg);
} </style>

.......

(and for the menu in each cell)

<TR>
<TD class="normal" onmouseover="this.className='normalon'"
onmouseout="this.className='normal'" height="22" valign="top">
<div class="style37" style="padding-top:3px; padding-left:34px "><a href="history.html" class="style3" span style="text-decoration: none;" ONMOUSEOVER="window.status= 'About Us' ; return true" ><strong>About Us</strong></a></div>
</TD>
</TR>

And so on. Basically the effect was I have this background image (m1.jpg) and when you click on a cell since it was a menu, the background uimage would change to m1r.jpg making it like sort of highlight.

You can view this at www.analytical-online.com/options and see the menu on the left

HOWEVER I received comments from some people that sometimes especially in INternet explorer, when they try to choose something on the menu.. so they will point the mouse on a cell and instead of having the desired highlight effect that I want to (from the mouseover)... the cell just goes BLANK.

It usually happens with IE but with Firefox it works fine.

Why does it go blank when you point to a cell/menu??? HELP!

dudeshouse
Mar 16th, 2007, 04:43 PM
***Just found out... if you're prepared to wait for the mouseover image to load once, then the site works fine in IE. Why don't you just preload the mouseover image instead, so that it doesn't go blank in IE?***

How about rather than using javascript to change the colour, using the :hover css function instead.

<style type="text/css">
td.normal{
background-image:url(images/m1.jpg);
}

td.normal:hover {
background-image: url(images/m1r.jpg);
} </style>

Haven't tested this... just an idea.


HTH.

Glenn

ahallicks
Mar 16th, 2007, 05:55 PM
IE6 does not support the :hover attribute on anything but anchor tags... so you'd have to use something like:

td.normal {
background-image:url(images/m1r.jpg);
}

td.normal a {
background-image: url(images/m1.jpg);
}

td.normal a:hover {
background-image: url(images/m1r.jpg);
} </style>

hideto
Mar 17th, 2007, 11:21 AM
Thanks everyone! Tried and the td hover works best although I had to do a few modifications to get to the desired height and width of the "highlight effect". im rewriting the code as of wrting.

thanks again!