Не меняется фон по событию onMouseover

@ElvenDragon · Регистрация: 12.07.2009

Студворк — интернет-сервис помощи студентам

Вот код при наведении на объект синий должен стать красный и рамка должна стать зеленой, но они такими не становятся что тут не так? Код JavaScript находится в теге контейнере <SCRIPT>.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<HTML>
<HEAD>
<SCRIPT>
function Event1() {
  window.event.srcElement.bgcolor="#FF0000";
  window.event.srcElement.bordercolor="#00FF00";
}
</SCRIPT>
</HEAD>
<BODY>
<H2 ALIGN=center> Заголовок 1 </H2>
<H2 ALIGN=center> Заголовок 2 </H2>
<H2 ALIGN=center> Заголовок 3 </H2>
<TABLE ALIGN=center WIDTH=250px HEIGHT=40px BORDER=5px BORDERCOLOR=#000000>
<TR BGCOLOR=#0000FF BORDERCOLOR=#FF0000 onDblclick="Event1()">
<TH></TH>
</TR>
</TABLE>
</BODY>
</HTML>

@and_y87 · 31.08.2012, 11:48

ElvenDragon, onDblclick = при Двойном Клике по объекту
onMouseOver = при Наведении на объект

Добавлено через 21 секунду
<TR BGCOLOR=#0000FF BORDERCOLOR=#FF0000 onDblclick="Event1()">

Добавлено через 3 минуты
с jQuery ваш код выглядел бы так:

JavaScript
1
2
3
$('#id_td').click( function(){
    $(this).css({'background':'F00','border-color':'0F0'});
})

оно и интерейсней и понятней глазу )

Добавлено через 1 минуту
+++ Указывайте значения атрибутов в кавычках...

неправильно:

HTML5
1
2
<H2 ALIGN=center> Заголовок 1 </H2>
<TABLE ALIGN=center WIDTH=250px HEIGHT=40px BORDER=5px BORDERCOLOR=#000000>

Правильно:
<H2 ALIGN="center"> Заголовок 1 </H2>
<TABLE ALIGN="center" WIDTH="250px" HEIGHT="40px" BORDER="5px" BORDERCOLOR="#000000">

@kalabuni · 31.08.2012, 13:00

ElvenDragon, у вас куча ошибок:

1) надо onmouseover, а не ondblclick

2) нужные вам свойства в JS пишутся иначе: bgColor и borderColor

3) ваш скрипт "заточен" под браузер MSIE, остальные браузеры его не понимают и, соответственно, не исполняют.

Кроссбраузерно будет так:

JavaScript
1
2
3
4
5
function Event1 (evt)
{
var evt = window.event || evt, obj = evt.srcElement || evt.target;
with (obj) bgColor = '#FF0000', borderColor = '#00FF00';
}

@ElvenDragon · 31.08.2012, 14:03 **[ТС]**

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<HTML>
<HEAD>
<SCRIPT>
function Event1() {
  window.event.srcElement.bgColor="#FF0000";
  window.event.srcElement.borderColor="#0000FF";
}
</SCRIPT>
</HEAD>
<BODY>
<H2 ALIGN=center> Заголовок 1 </H2>
<H2 ALIGN=center> Заголовок 2 </H2>
<H2 ALIGN=center> Заголовок 3 </H2>
<TABLE ALIGN=center WIDTH=250px HEIGHT=40px BORDER=5px BORDERCOLOR=#000000>
<TR BGCOLOR=#0000FF BORDERCOLOR=#00FF00 onMouseover="Event1()">
<TH></TH>
</TR>
</TABLE>
</BODY>
</HTML>

Цвет рамки что то менятся не хочет borderColor. А вот фон уже поменялся. Так в чем опять проблема состоит?

@maksim32 · 31.08.2012, 16:06

JavaScript
1
2
3
4
function Event1() {
  window.event.srcElement.bgColor="#FF0000";
  window.event.srcElement.borderColor="#0000FF";
}

- так Вы меняете у <TR> параметры, а цвет рамки относится не к <TR>, а к <TABLE>, в его параметрах менять надо. А в <TR> нету borderColor'a.

@newJS · 31.08.2012, 21:20

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

Куча ошибок. Надо валидатор использовать.
1 желательно теги и их атрибуты писать маленькими буквами
2 за кавычки уже сказали
3 в значениях атрибутов не нужны единицы измерения, кроме процентов

HTML5
1
<Table align="center" width="250" height="40" border="5" bordercolor="#000000" onmouseover="Event1(this)" cellpadding="7" cellspacing="0">

осел

JavaScript
1
2
3
4
function Event1(obj){
obj.bgColor="#FF0000";
obj.borderColor="#00FF00";
 };

все

JavaScript
1
2
3
4
function Event1(obj){
obj.style.background="#FF0000";
obj.style.border="5px solid #00FF00";
 };

@kalabuni · 31.08.2012, 21:33

newJS, ага... только объектом obj во всех случаях может быть какой-угодно тег, который находится между <table> и </table> (включая сам тег <table>, а также любые теги из innerHTML ячеек).

А далеко не у всех тегов имеются атрибуты BGCOLOR и BORDERCOLOR...

@__proto__ · 01.09.2012, 02:54

короче вот стили сами добавите какие нужно

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE HTML>
<html>
  <head> </head>
  <body>
 
<table id='tb'>
  <tr>
  <td>bla bla bla</td> 
  </tr>
  </table> 
    
    
    <script>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
     
 function hover (elem, over, out) {
    
 elem.onmouseover = ElemMouseAction;     
 elem.onmouseout = ElemMouseAction;
    
 function ElemMouseAction (evt) {
  var related, Call;
  var e = evt || event;  
 
    if(e.type == 'mouseover'){  
      Call = over; 
      related = e.relatedTarget || e.fromElement;
      
    } else {
      if (!out) return;
      Call = out; 
      related =  e.relatedTarget || e.toElement;
      
        }   
  
    while (related && related != this) {
        related = related.parentNode;
        } 
      
      if(related == this ) return;
     
  
      Call.call(this);
     
     }  
 
    
    }     
 
      function _(selector){//впадлу писать для поиска по ДОМ длинные имена функция
      return document.querySelectorAll(selector)[0];
      }      
      
      var table = _('#tb td');
 
      hover(table,over, out);  
      
      function over () {
     
      this.style.backgroundColor = 'red';
      
      }      
     
      function out () {
     
      this.style.backgroundColor = '';
      
      
      }

HTML5
1
2
3
4
    </script>
 
  </body>
</html>

http://learn.javascript.ru/play/MLVe0b

@and_y87 · 01.09.2012, 14:24

Пример выше на JS меня убивает... Стили для чего нам даны? На них же проще...

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

Цвет рамки что то менятся не хочет borderColor. А вот фон уже поменялся. Так в чем опять проблема состоит?

Вам бы вполне подошёл CSS...

CSS
1
2
3
4
5
6
7
8
#colored_table{
    border: 5px solid #000;
    background: #CCC;
}
#colored_table:hover{
    border: 5px dashed #F00;
    background:#666;
}

Пример работы тут

@__proto__ · 01.09.2012, 14:33

пример выше сделан в качестве примера как использовать mouseover,
может у автора по запросу еще 200 ajax запросов отправляется но об этом не сказал

а насчет :hover согласен на все 100%

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	31.08.2012, 21:33
	newJS, ага... только объектом obj во всех случаях может быть какой-угодно тег, который находится между <table> и </table> (включая сам тег <table>, а также любые теги из innerHTML ячеек). А далеко не у всех тегов имеются атрибуты BGCOLOR и BORDERCOLOR... 0

@__proto__ 5 / 5 / 2 Регистрация: 19.08.2012 Сообщений: 79
	01.09.2012, 14:33
	пример выше сделан в качестве примера как использовать mouseover, может у автора по запросу еще 200 ajax запросов отправляется но об этом не сказал а насчет :hover согласен на все 100% 0