html, onMouseOut with tables

epimeth

does the onMouseOut event propagate through all of the subelements in a table? this doesn't seem to be working for me...


$pages = array('home' => 'Home', 'about' => 'About Us', 'suites' => 'Studio A',
			'reservation' => 'Reserve A Room', 'contact' => 'Contact');

if (isset($_POST['viewpage'])) $viewpage = $_POST['viewpage'];
else $viewpage = 'home';
if (isset($_POST['suiteview'])) $suiteview = $_POST['suiteview'];
else $suiteview = 'none';

$pagename = $pages["$viewpage"];
$submenu_visible = 'hidden';

if ($viewpage == 'suites'){
 $submenu_visible = 'visible';
 if ($suiteview == 'studioA') $pagename = 'Studio A';
 elseif ($suiteview == 'studioB') $pagename = 'Studio B';
 elseif ($suiteview == 'bedroom') $pagename = 'One Bedroom';
}

...
...
...
...

<table cellpadding="0" cellspacing="0" border="0" 
   onMouseOut="document.getElementById('submenu').style.visibility = '<?=$submenu_visible?>'">
	<tr align="center">
		<td>&nbsp;</td>
		<td width="120px"><span class="menuitem<?=($viewpage=='home')?'_dn':'';?>" 
             onClick="loadpage('home')" 
             onMouseOver="document.getElementById('submenu').style.visibility = '<?=$submenu_visible?>'">
             Home</span></td>
		<td width="120px"><span class="menuitem<?=($viewpage=='about')?'_dn':'';?>" 
              onClick="loadpage('about')"  

              onMouseOver="document.getElementById('submenu').style.visibility = '<?=$submenu_visible?>'">
              About Us</span></td>
		<td width="120px"><span class="menuitem<?=($viewpage=='suites')?'_dn':'';?>" style="cursor:default" 
               onMouseOver="document.getElementById('submenu').style.visibility = 'visible'">
               Suites</span></td>
		<td width="120px"><span class="menuitem<?=($viewpage=='reservation')?'_dn':'';?>" 
             onClick="loadpage('reservation')" 
             onMouseOver="document.getElementById('submenu').style.visibility = '<?=$submenu_visible?>'">
             Reservations</span></td>
		<td width="120px"><span class="menuitem<?=($viewpage=='contact')?'_dn':'';?>" 
              onClick="loadpage('contact')" 
              onMouseOver="document.getElementById('submenu').style.visibility = '<?=$submenu_visible?>'">
              Contact Us</span></td>
		<td>&nbsp;</td>
	</tr>
	<tr id="submenu" name="submenu" align="center" style="visibility:<?=$submenu_visible?>" >
		<td colspan="7">
			<table border="0" class="submenu" >
              <tr onMouseOut="document.getElementById('submenu').style.visibility = '<?=$submenu_visible?>'">
				<td><span class="menuitem<?=($suiteview=='studioA')?'_dn':'';?>" 
                              onClick="loadsuite('studioA')">Studio A</span></td>
				<td width="5" />
				<td><span class="menuitem<?=($suiteview=='studioB')?'_dn':'';?>" 
                              onClick="loadsuite('studioB')">Studio B</span></td>
				<!--<td width="5" />
				<td><span class="menuitem<?=($suiteview=='bedroom')?'_dn':'';?>"  

                               onClick="loadsuite('bedroom')">1-Bedroom</span></td>-->
			</tr></table>
		</td>
	</tr>
	<tr>
		<td colspan="2" />
		<td colspan="6" align="left"><span class="pagename"><?=$pagename?></span></td>
	</tr>
</table>

this way, the submenu table dissapears the moment I move the mouse away from the "Suites" cell,
but I want it to dissapear only once I go over a different menu item or leave the outer table (and go into the site content).
this also doesn't work when I put the onmouseout event in the submenu table or the tr element in the submenu table...

BuzzLY

Ouch... any chance you can fix the word wrapping?

Seems like it should work, huh? Try wrapping the table in a <div> tag and attaching the onMouseOut event to it.

Is it possible that onMouseOut only works if there is an onMouseOver? Shouldn't, but I suppose it's also worth a look. you could do onMouseOver = "", probably, just to check.

[edit] OK, I just tested a table with onMouseOut, and the div tag as well. Both work, exactly the same way, with one caveat: When you move your mouse from one cell to another, the onMouseOut even apparently gets triggered as you pass over the cell border. I don't know if that's a problem, but there you go.

Try putting a simple alert in your onMouseOut to see if it's getting triggered. If so, then it's probably a problem with the code you are trying to run, or even your PHP variable.[/edit]

epimeth

I fixed the word wrapping a bit, but any more and I'll have to split up statements that shouldn't be split up....

anyway, I'm sure that you are right about the cell border thing. thats the same conclusion I reached.

So does anybody here know a way around this, and if so how?
(ha! now nobody can answer with simply "yes")

BuzzLY

Yes. Very carefully.

Hah! back atcha!

BuzzLY

Seriously, though... any way to build the page without using tables? It would seem that cell borders are no-man's land, eh?

epimeth

curses! foiled again!!

I guess I can use javascript to build the menu, but as far as I know not all browsers are fully compliant with the whole "put this thing here and that thing there" thing...