VPF::изменение цвета при наведении мышкой

Донни

Дата 30.9.2004, 12:19 (ссылка)

(голосов: 0)

Загрузка ...

Unregistered

Привет,

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

Спасибо

<Spawn>

Дата 30.9.2004, 12:34 (ссылка)

(нет голосов)

Загрузка ...

Око кары:)

Профиль
Группа: Экс. модератор
Сообщений: 2776
Регистрация: 29.1.2003
Где: Екатеринбург

Репутация: нет
Всего: 64

Вот пример, но будет работать, по моему, только в IE. Для других браузеров нужы некоторые дополнения, а у меня не пока этих самых браузеров, чтобы проверить.

Код

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
  function CellOut()
  {
    if (event.srcElement.tagName == "TD")
      event.srcElement.style.backgroundColor = "";
  }
  
  function CellOver()
  {
    if (event.srcElement.tagName == "TD")
      event.srcElement.style.backgroundColor = "red";
  }
</script>
</head>

<body>
<table border="1px" onMouseOut="CellOut();" onMouseOver="CellOver();">
  <tr>
    <td>asdf</td>
    <td>jkdsgf</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>asdfs</td>
  </tr>
</table>
</body>
</html>

Это сообщение отредактировал(а) <Spawn> - 30.9.2004, 12:37

--------------------

"Для некоторых людей программирование является такой же внутренней потребностью, подобно тому, как коровы дают молоко, или писатели стремятся писать" - Николай Безруков.

Forza

Дата 30.9.2004, 12:44 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 137
Регистрация: 12.9.2004

Репутация: 1
Всего: 2

Можно даже покороче:

Код

<TABLE border>
<TR>
<TD onmouseover="this.style.backgroundColor='yellow'" onmouseout="this.style.backgroundColor='white'">td1</TD>
<TD>td2</TD>
</TR>
</TABLE>

<Spawn>

Дата 30.9.2004, 12:44 (ссылка)

(нет голосов)

Загрузка ...

Око кары:)

Профиль
Группа: Экс. модератор
Сообщений: 2776
Регистрация: 29.1.2003
Где: Екатеринбург

Репутация: нет
Всего: 64

Forza Таким макаром прийдется для всех ячеек прописывать.

--------------------

Forza

Дата 30.9.2004, 12:46 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 137
Регистрация: 12.9.2004

Репутация: 1
Всего: 2

<Spawn>, не спорю.

Просто показал альтернативный вариант. Может, и он когда-нибудь пригодится (когда не все ячейки надо выделять или ещё что-нибудь).

Gold Dragon

Дата 30.9.2004, 12:48 (ссылка)

(нет голосов)

Загрузка ...

Призрачный

Профиль
Группа: Экс. модератор
Сообщений: 6753
Регистрация: 1.3.2004
Где: Россия, Тамбов

Репутация: 1
Всего: 71

Так симпатичнее

Цитата

function CellOver()
{
if (event.srcElement.tagName == "TD")
event.srcElement.style.backgroundColor = "red";
event.srcElement.style.cursor = "hand";

}

Forza
как вариант. Чуть меня опередил

--------------------

Нельзя жить в прошлом, оно уже прошло.
Нельзя жить в будущем, оно ещё не наступило.
Нужно жить в настоящем, помня прошлое и думая о будущем!

Донни

Дата 30.9.2004, 13:54 (ссылка)

(голосов: 0)

Загрузка ...

Unregistered

Всем огромное спасибо за помощь!

Донни

Дата 30.9.2004, 14:33 (ссылка)

(голосов: 0)

Загрузка ...

Unregistered

А вот в продолжении этой темы.

Если я хочу, чтобы при наведении ещё и открывалась ссылка, такое возможно?

Gold Dragon

Дата 30.9.2004, 14:42 (ссылка)

(нет голосов)

Загрузка ...

Призрачный

Профиль
Группа: Экс. модератор
Сообщений: 6753
Регистрация: 1.3.2004
Где: Россия, Тамбов

Репутация: 1
Всего: 71

Цитата

чтобы при наведении ещё и открывалась ссылка

Это не есть хорошо, однозначно

вставляешь в function CellOver() функцию window.open...

--------------------

Forza

Дата 30.9.2004, 14:42 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 137
Регистрация: 12.9.2004

Репутация: 1
Всего: 2

Донни, возможно, что угодно.

Что означит "открывалась ссылка"? В том же окне был выполнен переход на какой-то УРЛ?

Red Dragon, теперь ты меня опередил.

Это сообщение отредактировал(а) Forza - 30.9.2004, 14:43

Донни

Дата 30.9.2004, 14:53 (ссылка)

(голосов: 0)

Загрузка ...

Unregistered

Forza, Red Dragon: спасибо!

П.С. и не ругайтесб кто кого опередил, вы оба помогли, за это вам поклон

Sardar

Дата 1.10.2004, 00:56 (ссылка)

(нет голосов)

Загрузка ...

Бегун

Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 78
Всего: 317

<Spawn> руки бы поотрывал за такой код

Пишем правильно под все браузеры:

Код

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
 function CellOut(ev) {
  var tgt=window.event? window.event.srcElement: ev.target;
  if (tgt.tagName == "TD") tgt.style.backgroundColor = "";
 }
 
 function CellOver(ev) {
  var tgt=window.event? window.event.srcElement: ev.target;
  if (tgt.tagName == "TD") tgt.style.backgroundColor = "red";
 }
</script>
</head>

<body>
<table border="1px" id="test">
 <tr>
  <td>asdf</td>
  <td>jkdsgf</td>
 </tr>
 <tr>
  <td>&nbsp;</td>
  <td>asdfs</td>
 </tr>
</table>
<script language="Javascript" type="text/javascript">
<!--
document.getElementById("test").onmouseout=CellOut;
document.getElementById("test").onmouseover=CellOver;
//-->
</script>
</body>
</html>

--------------------

Опыт - сын ошибок трудных © А. С. Пушкин
Процесс написания своего велосипеда повышает профессиональный уровень программиста. © Opik
Оценить мои качества можно тут.

<Spawn>

Дата 1.10.2004, 04:51 (ссылка)

(нет голосов)

Загрузка ...

Око кары:)

Профиль
Группа: Экс. модератор
Сообщений: 2776
Регистрация: 29.1.2003
Где: Екатеринбург

Репутация: нет
Всего: 64

Цитата

<Spawn> руки бы поотрывал за такой код

Дак я же говорю, что нет у меня браузеров для создания и проверки браузеронезависимого кода. Я знаю, что нужно анализировать srcElement и target и то что обьект event есть только в IE DOM, а в W3C DOM его нужно передавать в виде параметра, но без проверки писать не стану, так как опыта в JS мало еще.

--------------------

Aliance

Дата 1.10.2004, 14:05 (ссылка)

(нет голосов)

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 55
Всего: 137

Цитата(Sardar @ 1.10.2004, 00:56)

var tgt=window.event? window.event.srcElement: ev.target

Лучше, имхо, так:

Код


// задание события
var evt = (evt) ? evt : ((window.event) ? event : null);
// проверка события
if (evt) {
   var tgt = (evt.target) ? evt.target : ((event.srcElement) ? evt.srcElement : null);
      if (tgt) {
         // тут выполняем функцию
     }
}

Этот код позволит совместить модели IE DOM и W3C DOM

--------------------

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

Sardar

Дата 1.10.2004, 23:02 (ссылка)

(нет голосов)

Загрузка ...

Бегун

Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 78
Всего: 317

Цитата(Aliance @ 1.10.2004, 13:05)

Лучше, имхо, так:

А я поспорю

Мой код короче и красивее. ИЕ 6 передает обьект event как аргуемент функции, подражая мозиле, но поля target у него нет. Впрочем это я мельком заметил, еще не тестил.

А вообще поля target, srcElement дают ссылку на обьект который клинкули, затем событие поднимается выше к корню документа. Это можно увидеть поместив в ячейку какой нибудь тег, например обернуть содержимое в <a></a>.

Если юзали сатрый стиль регистрации события: object.eventName=handler, то имеем внутри функции ссылку this - элемент, на которого зарегистрированно событие, так что без всяких проверок можно писать this.style.backgroundColor.

IE 5 и раняя Опера эту модель не поддерживают... вроде бы, негде постестить...

--------------------

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »