IMHO.WS - Вопрос по JavaScript

IMHO.WS (http://www.imho.ws/index.php)

- Веб-программирование (http://www.imho.ws/forumdisplay.php?f=29)

- - Вопрос по JavaScript - меню.. (http://www.imho.ws/showthread.php?t=87633)

Вопрос по JavaScript - меню..

При наведении мышки на ячейку, бэк граунд должен измениться на определенную картинку, при отведении опять в исходное положение.

Есть мой код меню:

<table>
<tr>
<td onMouseOver="this.background='img/select.gif'" onMouseOut="this.background=''">Меню1</td>
<tr>
</table>
/////Данный вариант работает, НО ТОЛЬКО В IE, мне нужно чтобы работало и в других броузерах, как OPERA, MAZILA, NETSCAPE

Пытался сделать так, по логике должно работать, но не работет нигде :(

<table>
<tr>
<td onMouseOver="this.style='background-image:url(img/up2.jpg); background-repeat:repeat-x'" onMouseOut="this.style='background-image:url();'">Меню1</td>
<tr>
</table>

Хотелось бы чтобы можно было применить в этом CSS

Подскажите как решить проблему?

CSS:

Код:

.NAV                { ... }

A .NAV                { ... }

A:HOVER .NAV        { ... }

HTML:

Код HTML:

<DIV CLASS="NAV">...</DIV>

<A HREF="..."><DIV CLASS="NAV">...</DIV></A>

<A HREF="..."><DIV CLASS="NAV">...</DIV></A>

Цитата:

Сообщение от Ghost

CSS:

Код:

.NAV                { ... }

A .NAV                { ... }

A:HOVER .NAV        { ... }

HTML:

Код HTML:

<DIV CLASS="NAV">...</DIV>

<A HREF="..."><DIV CLASS="NAV">...</DIV></A>

<A HREF="..."><DIV CLASS="NAV">...</DIV></A>

Я чего-то не совсем понял как с этим работать..
Хотелось бы увидеть правки уже на моем примере! Пожалуйста!

Сделай стилями.
Типа так:

Код:

<style>

.someClass {

  background-image:url();

}

.someClassHover {

  background-image:url('someImage.gif');

  background-repeat:repeat-x'

}

</style>

<table>

<tr>

<td onMouseOver="this.className='someClassHover'" onMouseOut="this.className='someClass'">Меню1</td>

<tr>

</table>

Пожалуйста:

Код HTML:

<HTML><HEAD><STYLE>

.NAV {

        display:                block;

        width:                        100px;

        text-align:                center;

        background-color:        #C0C0C0;

}

A .NAV {

        background-color:        #808080;

}

A:HOVER .NAV {

        background-color:        #C0C0C0;

}

</STYLE></HEAD><BODY>

<TABLE CELLSPACING="0" CELLPADDING="1" BORDER="1" WIDTH="100%">

<TR>

<TD><DIV CLASS="NAV" ID="NAV1">1</DIV></TD>

<TD><A HREF="2"><DIV CLASS="NAV" ID="NAV2">2</DIV></A></TD>

<TD><A HREF="3"><DIV CLASS="NAV" ID="NAV3">3</DIV></A></TD>

</TR>

</TABLE>

</BODY><SCRIPT TYPE="text/javascript">

  var d;

  for (var i = 1; i <= 3; i++) {

    d = document.getElementById('NAV' + i);

    d.onmouseout  = function anonymous() { this.className = 'NAV'; }; 

    d.onmouseover = function anonymous() { this.className = 'NAV'; }; 

  }

</SCRIPT></HTML>

В Opera (ver 8) все показывает на ура, а вот в IE (ver 6+sp1) возникают грабли, из-за чего приходится добавлять обработчики onMouseOver и onMouseOut, обновляющие класс (см. js-скрипт в конце).

Ghost мне кажется ты тут наворотил.. смотри пример выше, у меня все прекрастно заработало, используя только Стили

UnOuter
Примеры практически идентичны, за исключением того, что у меня обработчики onMouse??? задаются в конце, а у него в каждом тэге. Плюс к этому, как я уже говорил, мой код работает прекрасно и без обработчиков в Opera и иже с ней, т.е. можно js-код выполнять только для одного типа браузера - IE, есессно предварительно проверив его.