Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Центр помощи > [HTML | JS] Изменение первой ячейки

Автор: Guedda 26.7.2007, 23:11

Есть таблица, приблизительно такого содержания:

Код


<table>
<tr>
  <td width="20" height="20"><img src="images/var_1.gif" /></td>
  <td width="100" height="20"><a href="http://mysite.com">Ссылка</a></td>
</tr>
</table>

Как мне при наведении на ссылку изменить картинку с var_1 на var_2? Возможно ли это именно в таблице, а не в блоке?

Заранее благодарен.

Автор: SelenIT 27.7.2007, 00:45

Guedda, конечно можно. Javascript-у не важно, в таблице картинка или нет. Вопрос лишь в том, как к ней обратиться. Вариантов масса:

Код


<script>
function ch_img(id, file) {
    document.getElementById(id).src = 'images/' + file + '.gif';
}
</script>
.....
  <td width="20" height="20"><img src="images/var_1.gif" id="img1" /></td>
  <td width="100" height="20"><a href="http://mysite.com" onmouseover="ch_img('img1', 'var_2')" onmouseout="ch_img('img1',  'var_1')">Ссылка</a></td>

или (напр., если нужен одинаковый эффект для многих строк и нет возможности генерировать уникальные id-ы для каждой картинки):

Код


<script>
function ch_img(link, file) {
    var img = link.parentNode.parentNode.getElementsByTagName('img')[0]; // первая картинка в TR-ке со ссылкой
    img.src = 'images/' + file + '.gif';
}
</script>
.....
  <td width="20" height="20"><img src="images/var_1.gif" /></td>
  <td width="100" height="20"><a href="http://mysite.com" onmouseover="ch_img(this, 'var_2')" onmouseout="ch_img(this,  'var_1')">Ссылка</a></td>

Но все-таки, неужели непременно необходима таблица? http://xpoint.ru/know-how/CSS/ProblemaZagruzkiFona?10 точно не подходит?

Автор: Guedda 27.7.2007, 08:51

Код


<script language="JavaScript">
function ch_img(id, file) {
    document.getElementById(id).src = 'images/' + file + '.gif';
}
</script>
.....
  <td width="20" height="20"><img src="images/var_1.gif" id="img1" /></td>
  <td width="100" height="20"><a href="http://mysite.com" onmouseover="ch_img('img1', 'var_2')" onmouseout="ch_img('img1',  'var_1')">Ссылка</a></td>

Везде работает, кроме IE :( Что делать?

Автор: Guedda 27.7.2007, 09:33

Извиняюсь, просто в IE была отключена JS.