Подскажите!

Наваял код.
В IE работает прекрасно, меню выпадают, ячейки меняют цвет, ссылки работают.
В FF меню выпадает, а все остальное не работает.

<SCRIPT language=Javascript>
<!--
function showSubMenu(subMenuId) {
  document.all[subMenuId].style.visibility = 'visible';
        return true;
}
function hideSubMenu(subMenuId) {
  document.all[subMenuId].style.visibility = 'hidden';
        return true;
}
//-->
</SCRIPT>

<STYLE type="text/css">
.subMenuStyle {
        POSITION: absolute; VISIBILITY: hidden; Z-INDEX: 20; MARGIN-TOP: -1px; MARGIN-LEFT: -1px;
		CURSOR: auto;
}
.subMenuStyle2 {
        POSITION: absolute; VISIBILITY: hidden; Z-INDEX: 20; MARGIN-TOP: -9px;  MARGIN-LEFT: -1px;
		CURSOR: auto;
}
.subMenuItemStyle_1 {
        COLOR: #ffffff; CURSOR: pointer; FONT-WEIGHT: bold; PADDING-BOTTOM: 3px; PADDING-LEFT: 3px; PADDING-RIGHT: 20px; PADDING-TOP: 3px; TEXT-DECORATION: none; FONT-SIZE: 11px; FONT-FAMILY: Tahoma; FONT-WEIGHT: bold; BACKGROUND-COLOR: #51A4D8;
}
.subMenuItemStyle_2 {
        COLOR: #ffffff; CURSOR: pointer; FONT-WEIGHT: bold; PADDING-BOTTOM: 3px; PADDING-LEFT: 3px; PADDING-RIGHT: 20px; PADDING-TOP: 3px; TEXT-DECORATION: none; FONT-SIZE: 11px; FONT-FAMILY: Tahoma; FONT-WEIGHT: bold; BACKGROUND-COLOR: #A1C448;
}
.menu_1 {
         COLOR: #ffffff; FONT-SIZE: 12px; FONT-FAMILY: Arial; TEXT-ALIGN: center; FONT-WEIGHT: bold; PADDING-TOP: 35px; 
		 CURSOR: default;
		 BACKGROUND-COLOR: #51A4D8;
}
.menu_2 {
         COLOR: #ffffff; FONT-SIZE: 12px; FONT-FAMILY: Arial; TEXT-ALIGN: center; FONT-WEIGHT: bold; PADDING-TOP: 35px; 
		 CURSOR: default;
		 BACKGROUND-COLOR: #A1C448;
}
</STYLE>

 <table cellspacing="1" cellpadding="0" border="0">
   <tr align="center">
     <a Href="#" onmouseover="main_menu_1.className='menu_2'" 
       onmouseout="main_menu_1.className='menu_1'">
     <td class=menu_1 onmouseout="hideSubMenu('subMenu1'); "onmouseover="showSubMenu('subMenu1');"
       width="57" height="64" name="main_menu_1" id="main_menu_1" bgColor=#51A4D8>
       About</td></a>
    </tr>
	   
    <TR>
     <TD>
      <TABLE bgColor=#ffffff border=0 cellPadding=0 cellSpacing=1
        class=subMenuStyle id=subMenu1 onmouseout="hideSubMenu('subMenu1');"
        onmouseover="showSubMenu('subMenu1');">
       <TBODY>
              
        <TR>
         <A href="#" onmouseover="menu1_1.className='subMenuItemStyle_2'" 
           onmouseout="menu1_1.className='subMenuItemStyle_1'">
         <TD bgColor=#51A4D8 class="subMenuItemStyle_1" name="menu1_1" id="menu1_1" noWrap>News</TD>
         </A></TR>
              
        <TR>
         <A href="arhiv.html" onmouseover="menu1_2.className='subMenuItemStyle_2'" 
           onmouseout="menu1_2.className='subMenuItemStyle_1'">
         <TD bgColor=#51A4D8 class="subMenuItemStyle_1" name="menu1_2" id="menu1_2" noWrap>Personal</TD>
         </A></TR>

       <TR>
        <A href="press/" onmouseover="menu1_3.className='subMenuItemStyle_2'" 
          onmouseout="menu1_3.className='subMenuItemStyle_1'">
        <TD bgColor=#51A4D8 class="subMenuItemStyle_1" name="menu1_3" id="menu1_3" noWrap>History</TD>
        </A></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>

Почитал на сайте, оказывается document.all не канает.
Поменял.

function showSubMenu() {
  document.getElementById('subMenu1').style.visibility = "visible";
        return true;
}
function hideSubMenu() {
  document.getElementById('subMenu1').style.visibility = "hidden";
        return true;
}

Работает также.
Правда FF больше не ругается.

Господа подскажите!

У меня мысль такая, что обработчики событий в FF должны быть другие.

onmouseover="main_menu_1.className='menu_2'" 
onmouseout="main_menu_1.className='menu_1'"

Данное событие в IE меняет цвет ячейки.
В FF ноль эмоций.

Ссылки также не работают.

Добавлено Срд 08 Ноя 2006 06:53:34 :
Да и еще вопрос.
Как пральна сделать.
У меня 5 менюшек
Каждая под своим номером.

document.getElementById('subMenu' + num).style.visibility = "visible";

Так не работает

Нашел на каком-то сайте.
Верно ли это?
Первый раз такое вижу

Попробуем.

Ну хоть кто нибудь подскажет.
Все просматривают, но никто не поможет

Честно говоря, просто надоедает объяснять одно и тоже. По этому поводу в инете есть уйма текста.
http://www.google.com/search?q=css+drop+down+menu
http://pepelsbey.net/webdev/2006/04/26/inogda-oni-vyipadayut-snova/

Добавлено Срд 08 Ноя 2006 16:06:28 :

А ваш код надо просто выкинуть. Весь.

Уважаемый Lynn c таким раскладом нада всех преподавателей уволить,
ведь они каждый год объясняют одно и то же.

Наличие уймы текста в интернете не значит что все становится понятно.

Чем код Вам не угодил.

За ссылки спасибо.

Все оказалось намного проще.

onmouseout="this.style.backgroundColor = '#51A4D8';"
onmouseover="this.style.backgroundColor = '#a1c448';"

Данное действо меняет цвет ячейки во всех броузерах.

Добавлено Чтв 09 Ноя 2006 05:53:06 :
Господа!
Как сделать, чтобы ячейка работала как ссылка.

В смысле так

<A href="arhiv.html">
<TD>Архив</TD>
</A>

В IE работает.
FF  и Opera отдыхают.

Vega

Правильно. Именно так и надо поступить. Они изначально вводят студентов в заблуждение потому что сами неквалифицированы. И это касается не только JavaScript & DOM Model.

Этот код

<A href="arhiv.html">
<TD>Архив</TD>
</A>

просто не правильный. А IE не правильно его понимает. Точнее допускает его использование.
Достаточно посмотреть DTD HTML/XHTML чтобы понять почему он не верный.

<td onclick="document.location='http://где-то/там/лежала/страничка'">

Мне на самом деле по рукам надо настучать что потакаю Вам в неправильном коде.
На самом деле даже таблицы я не советовал бы использовать. Не говоря уже об document.location.
Потом Вам захочется изменять курсор над ячейкой таблицы, чтобы был "ручкой", Вы используете стиль cursor для разных браузеров и полезут ошибки в консоли JavaScript Это я так, предвосхищаю дальнейшие вопросы

Самый лучший способ сделать ссылку, это написать:
<a href="где-то там">что-то там</a>
Лучше еще никто не придумал

Azathoth спасибо +1

Добавлено Чтв 09 Ноя 2006 07:08:40 :
Да и еще вопрос.
Как пральна сделать.
У меня 5 менюшек
Каждая под своим номером.

document.getElementById('subMenu' + num).style.visibility = "visible";

Так не работает

Круто! Строковое значение прибавить число!! Это прямо из серии: «Что получится если к двум метрам прибавить два литра?».

Vega

А что конкретно не работает? Если они должны пропадать, то вместо visibility следует использовать display. visibility просто скрывает элемент, но он остается в потоке и занимает место.

Infant

На самом деле тут работает автоматическое приведение типов. Перед сложением num приводится к строке и  сложение происходит верно.
var a = "" + 234;
Будет считаться строкой "234". Это можно найти в разделе 11.6.1 ECMAScript-262. Полагаю в иных спецификациях (например JavaScriprt) будет то же самое.

Azathoth вопрос в том, что у меня 5 менюшек, которые имеют подменю (которые появляются при наведении мыши).
Эти пять меню пронумерованы:
subMenu1
subMenu2
subMenu3
subMenu4
subMenu5

Как пральна записать.

document.getElementById('subMenu').style.visibility = "visible";

document.getElementById('subMenu' + num).style.display = "block";

Error: num is not defined

Я каждому меню присвоил Id
id="subMenu1"
id="subMenu2"
id="subMenu3"

Вопчем FF ругается

Vega

А это откуда в таком случае?

Я в это деле чайник!!!
Этот вариант нашел на каком-то сайте.
Обсуждался вопрос выпадающих менюшек.

document.getElementById('subMenu' + num).style.visibility = "visible";

Кстати данная композиция 100% работает
Правда FF ругается

document.all[subMenuId].style.visibility = 'visible';

Vega, а откуда берется subMenuId?

Это некорректная конструкция, потому что Вы обращаетесь по Id, не указывая ссылку на объект. Корректно - через document.getElementById('main_menu_1').className='menu_2'
Через this работает, потому что правильная конструкция.

Это абсолютно некорректный код, и не только с точки зрения стандартов. Внутри таблицы вообще могут находиться только строки (ну и tbody, col, colgroup и другие табличные элементы), в строках - только ячейки, и уже в ячейках - другие элементы.

Azathoth

Не понял вопроса.

document.all[subMenuId]
функция проверяет наличие в документе значения id="submenu"

Я каждому меню присвоил Id
id="subMenu1"
id="subMenu2"
id="subMenu3"

Al_H Спасибо за комментарий.
Я уже все исправил. Остался вопрос

document.all[subMenuId].style.visibility = 'visible';

Данная конструкция работает во всех броузерах.
Но она не корректна, так как document.all уже не применяется.

Vega

Это все потому что вопрос был наводящим, а ответ предназначался не мне, а Вам. Просто нужно было чуток подумать.
Вы сказали что:

И я предполагал что Вы передаете функции showSubMenu номер элемента подменю. Иными словами функция должна была принимать вид:
showSubMenu(num) {
...
document.getElementById('subMenu' + num).style.visibility = "visible";
...
}
(IMHO лучше конечно использовать display вместо visibility)
Вот тогда num была бы определена. И вызов функции бы поменялся на onmouseout="hideSubMenu(1)".
Но раз num оказалась неопределена, я понял что Вы вернулись к изначальному определению функции:
showSubMenu(subMenuId) {
...
}

Тогда про num забываем и используем такую форму записи:
showSubMenu(subMenuId) {
...
document.getElementById(subMenuId).style.visibility = "visible";
...
}
И вызов функии становится: onmouseout="hideSubMenu('subMenu1')", т.е. возвращается к исходному состоянию.

Ответ на вопрос:

очевиден. Эта переменная, равно как и предполагаемый num, берется из определения функции showSubMenu и является ее аргументом. Вот и всего-лишь навсего...

Добавлено Птн 10 Ноя 2006 04:56:54 :
Al_H

Отвечаю на выделенное. Я сказал то же самое, но другими словами
DTD явно описывает что:

<!ELEMENT TABLE - -
     (CAPTION?, (COL*|COLGROUP*), THEAD?, TFOOT?, TBODY+)>
<!ELEMENT CAPTION  - - (%inline;)*     -- table caption -->
<!ELEMENT THEAD    - O (TR)+           -- table header -->
<!ELEMENT TFOOT    - O (TR)+           -- table footer -->
<!ELEMENT TBODY    O O (TR)+           -- table body -->
<!ELEMENT COLGROUP - O (COL)*          -- table column group -->
<!ELEMENT COL      - O EMPTY           -- table column -->
<!ELEMENT TR       - O (TH|TD)+        -- table row -->
<!ELEMENT (TH|TD)  - O (%flow;)*       -- table header cell, table data cell-->

Т.е.:

Ну еще мы предполагаем что THEAD, TFOOT, TBODY обычно опускаются, но в модели DOM браузер их все же воспроизводит.

Azathoth

Большое спасибо
Все работает. Вы мне очень помогли. +1