HTML - Ignore Onmouseout?

I have a table on my page in which I have overridden the onmouseover and onmouseout event handlers. Those event handlers get called just fine when the mouse enters or leaves any of the objects contained within the table, but they do not get called when entering or leaving the table itself.

Is that the expected behavior? I would have thought that those handlers would also get called for the table itself.

Do I need to attach those event handlers to a higher level object (containing the table) in order for them to get called upon entry and exit of the table?

Interestingly, the event handlers get called when entering or leaving a cell (a td item) of the table, but they do not get called when entering or leaving a row (a tr item) of the table. I would be happy if I could make it call the event handlers for the row as well, but so far have had no luck doing that.

Hi,
I'm trying to make a portfolio website where when you hover your mouse over a "thumbnail A", "image A" appears in a separate div and when you move your mouse off the "thumbnail A", "image A" goes away. I made it do that with "onmouseover" and "onmouseout" codes, but now i want to make it so when you click on "thumbnail A", "Image A" stays visible even when you move your mouse away using an "onclick" behavior code. But the code is getting confused by the "onclick" conflicting with the "onmouseout" behavior code, so "image A" still dissapears when you move your mouse off the thumbnail.

Is there a way to fix this or a better way to do this???
Thanks!!

At the moment I have a color fade on the left side of our website behind the links. I am using the onmouseover and onmouseout commands to change the color when someone puts their cursor over the link. I have no problem changing the background color when the mouse is over the link, but I can't find a way to return it to the color fade background after someone removes their mouse. Any ideas as to what I should put in the onmouseout spot to get it to return to the original fading background?

<tr>
<td width="200" valign="top" style="filter:progidXImageTransform.Microsoft.Gradient(endColorstr='#F5F5F5', startColorstr='#CAF0F7', gradientType='1'" ><table width="87" height="155" border="0">
<tr>
<td><table width="200" height="229" border="0" cellpadding="0" cellspacing="0" bordercolor="#F5F5F5" id="navigation">
<tr>
<td width="200"><div align="center"><a href="Homepage.html" class="navText style3" onmouseover="style.backgroundColor='#CAF0F7';" onmouseout="????????" ><font color="#5A434A"><span class="style5">Home</a></div></td>
</tr>

thanks

Hello, so basically this summer I took the liberty of making a personal website for myself. I wanted to get to know XHTML and CSS a little bit more over the summer. Getting to my question though, I made a rollover menubar (using photoshop) and everything was going swell until I wanted to get it up and running in my html file.

I made a table inserting the non and rollover images and instead of using the massive javascript code block Dreamweaver gave me I decided to use simple "onmouseover/onmouseout" code snippets. When I view it in Firefox it is fully functional but for some reason the rollover images are a little shifted, correct size, but shifted, so there is white space in between the non rollover images.

Here's what is looks like:



Here is the code for the table/banner (3 rows and 9 columns):

Code:

--------------------------------------------------------------------------------------------------------

banner_01: large blue block (3 rows merged) left of home
banner_02: blue rectangle above home
banner_03: vertical blue in between home/blog (3 rows merged)
banner_04: blue rectangle above blog
banner_05: vertical blue in between blog/misc (3 rows merged)
banner_06: blue rectangle above misc
banner_07: vertical blue in between misc/contact (3 rows merged)
banner_08: blue rectangle above contact
banner_09: vertical blue right of contact (3 rows merged)
banner_10/banner1_10: home (regular)/home (hover)
banner_11/banner1_11: blog (regular)/blog (hover)
banner_12/banner1_12: misc (regular)/misc (hover)
banner_13/banner1_13: contact (regular)/contact (hover)
banner_14: blue rectangle under home
banner_15: blue rectangle under blog
banner_16: blue rectangle under misc
banner_17: blue rectangle under contact

--------------------------------------------------------------------------------------------------------

<table align="center" width="925" height="140" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td width="283" rowspan="3"><img border="0" src="banner_01.gif" width="283" height="140"></td>
      <td width="134"><img border="0" src="banner_02.gif" width="134" height="16"></td>
      <td width="23" rowspan="3"><img border="0" src="banner_03.gif" width="23" height="140"></td>
      <td width="134"><img border="0" src="banner_04.gif" width="134" height="16"></td>
      <td width="23" rowspan="3"><img border="0" src="banner_05.gif" width="23" height="140"></td>
      <td width="134"><img border="0" src="banner_06.gif" width="134" height="16"></td>
      <td width="23" rowspan="3"><img border="0" src="banner_07.gif" width="23" height="140"></td>
      <td width="134"><img border="0" src="banner_08.gif" width="134" height="16"></td>
      <td width="37" rowspan="3"><img border="0" src="banner_09.gif" width="37" height="140"></td>
    </tr>
    <tr>
      <td><!---HOME BUTTON--->
	    <a href="home.html"><img border="0" width="134" height="112" src="banner_10.gif" 
		onmouseover="this.src='banner1_10.gif';" 
		onmouseout="this.src='banner_10.gif';"/>
            </a>
      </td>
      <td><!---BLOG BUTTON--->
	    <a href="blog.html"><img border="0" width="134" height="112" src="banner_11.gif" 
		onmouseover="this.src='banner1_11.gif';" 
		onmouseout="this.src='banner_11.gif';"/>
            </a>
      </td>
      <td><!---MISC BUTTON--->
	    <a href="misc.html"><img border="0" width="134" height="112" src="banner_12.gif" 
		onmouseover="this.src='banner1_12.gif';" 
		onmouseout="this.src='banner_12.gif';"/>
            </a>
      </td>
      <td><!---CONTACT BUTTON--->
	    <a href="contact.html"><img border="0" width="134" height="112" src="banner_13.gif" 
		onmouseover="this.src='banner1_13.gif';" 
		onmouseout="this.src='banner_13.gif';"/>
            </a>
      </td>
    </tr>
    <tr>
      <td><img border="0" src="banner_14.gif" width="134" height="12"></td>
      <td><img border="0" src="banner_15.gif" width="134" height="12"></td>
      <td><img border="0" src="banner_16.gif" width="134" height="12"></td>
      <td><img border="0" src="banner_17.gif" width="134" height="12"></td>
    </tr>
  </table>

I hope that the content didn't frazzle anyone, I would just like to fix the display of the menubar as it is fully functional.

Thank you very much,
JP

EDIT: I would also like to make the banner the whole width of the browser but it breaks up the images when I try to do so, just wondering if anyone can figure that out too. Thanks!

Can anyone give me a list of css props that IE doesn't like... so that I know what not to use... and the code you but in before the prop so that IE does't read it BUT ff does. i know that the second prop always over rights the 1st one...

Thanks before hand...