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

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

Форум программистов > Вёрстка веб-сайтов > Изменение цвета области ссылки

Автор: Guedda 24.1.2006, 09:59

Есть ссылки:

Код


<tr><td width="150px"><a href="sample1.html">Sample 1</a></td></tr>
<tr><td width="150px"><a href="sample2.html">Sample 2</a></td></tr>
<tr><td width="150px"><a href="sample3.html">Sample 3</a></td></tr>
<tr><td width="150px"><a href="sample4.html">Sample 4</a></td></tr>

Существует ли возможность окрашивать всю область <td> в другой цвет при наведении мыши на ссылку?
Что мне нужно для этого сделать?

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

Автор: Illuminaty 24.1.2006, 10:09

Код


td:hover {background-color:#003399}

Добавлено @ 10:12
в IE не работает => нужно делать скриптами

Автор: aprok 24.1.2006, 10:32

Автор: Illuminaty 24.1.2006, 10:37

Можно так:

Код


<tr><td width="150px"><a href="sample1.html" onMouseOver="this.offsetParent.style.backgroundColor ='red';">Sample 1</a></td></tr>

Автор: o.s.a. 24.1.2006, 10:37

Код


<html>
<body>
<script type="text/javascript">
  function  hoverColor(elem) {
    elem.parentNode.style.backgroundColor = "red";
  }
  function  oldColor(elem) {
    elem.parentNode.style.backgroundColor = "green";
  }
</script>
<table>
<tr><td width="150px"><a href="sample1.html" onMouseOver="hoverColor(this);" onMouseOut="oldColor(this);">Sample 1</a></td></tr>
<tr><td width="150px"><a href="sample2.html" onMouseOver="hoverColor(this);" onMouseOut="oldColor(this);">Sample 2</a></td></tr>
<tr><td width="150px"><a href="sample3.html" onMouseOver="hoverColor(this);" onMouseOut="oldColor(this);">Sample 3</a></td></tr>
<tr><td width="150px"><a href="sample4.html" onMouseOver="hoverColor(this);" onMouseOut="oldColor(this);">Sample 4</a></td></tr>
</tr>
</table>
</body>
</html>

Автор: Illuminaty 24.1.2006, 10:39

aprok, нужно при наведении на ссылку, а у тебя при наведении на ячейку smile

Автор: Morch 24.1.2006, 14:08

o.s.a., я такой же код использовал для фонового рисунка, только я не знаю, как сделать так, чтобы финовый рисунок изначально был. Т.е. не просто прозрачная ячейка, а с фоновым рисунком. (background="pic.jpg" не предлагать - не катит, т.к. он не меняется)

Автор: Illuminaty 24.1.2006, 14:14

Код


td {background-image:url(fon.gif);}

Автор: Guedda 24.1.2006, 15:49

Всем спасибо. Все работает.

Автор: Morch 24.1.2006, 20:30

Illuminaty читаем внимательнее smile

Цитата

(background="pic.jpg" не предлагать - не катит, т.к. он не меняется)

не пашет. Я и ccs пробовал и также как выше указал smile

Автор: Morch 27.1.2006, 14:21

А что все замолчали-то? smile

Автор: o.s.a. 27.1.2006, 16:19

Morch, ну если очень нужно, тогда вот так можно извратиться

Код


  <script type="text/javascript">
      function tdOver(td) {
        td.removeAttribute("background");
        td.setAttribute("background", "");
      }
      function tdOut(td) {
        td.removeAttribute("background");
        td.setAttribute("background", "fon0.gif");
      }
  </script>
  <table>
    <tr>
      <td background="fon0.gif" onMouseOver="tdOver(this);" onMouseOut="tdOut(this);">osa</td>
      <td bgcolor="#32fafa">osa</td>
    </tr>
  </table>

Автор: Guedda 27.1.2006, 17:51

Цитата(Morch @ 27.1.2006, 14:21)

А что все замолчали-то? smile

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

Автор: Morch 27.1.2006, 18:45

o.s.a., спасибо! вариант, конечно, немного тормозной, но хотябы пашет.
Жаль :hover не пашет для таблиц smile

Автор: o.s.a. 27.1.2006, 19:58

Цитата(Morch @ 27.1.2006, 20:45

)

вариант, конечно, немного тормозной,

интересно чем же?

Автор: Morch 28.1.2006, 12:31

скорость смены рисунков маловата, но это малозаметно

Автор: Ciber SLasH 28.1.2006, 14:45

Цитата(Morch @ 28.1.2006, 12:31

)

скорость смены рисунков маловата, но это малозаметно

Дык рисунки нужно подгружать ещё до их показа.
Так конечно, при смене рисунка у тебя грузится новый рисунок.

Автор: o.s.a. 28.1.2006, 20:07

Morch

Цитата(Ciber SLasH @ 28.1.2006, 16:45

)

Дык рисунки нужно подгружать ещё до их показа.
Так конечно, при смене рисунка у тебя грузится новый рисунок.

Автор: Moses 22.3.2007, 23:28

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