Автор Тема: Смена цвета строки средствами CSS?  (Прочитано 4543 раз)

0 Пользователей и 1 Гость просматривают эту тему.

Оффлайн C++

  • Фанат форума
  • Постоялец
  • ***
  • Сообщений: 221
  • +0/-0
  • 0
    • Просмотр профиля
    • http://
Есть таблица с большим количеством строк, в каждой строке таблицы есть вызов функции на события onMouseOver и onMouseOut. Функция меняет цвет строки.
TEXT
Можно ли как либо занести это свойство в CSS, чтобы не печатать эту конструкцию ( onMouseOver=tron(this,\'#FFFFFF\'); onMouseOut=change(this,\'#000000\'); [\\B] ) в каждой строке, а напечатать только ...?
Спасибо!

Оффлайн Nickii

  • Фанат форума
  • Постоялец
  • ***
  • Сообщений: 218
  • +0/-0
  • 0
    • Просмотр профиля
    • http://www.srccode.spb.ru
Смена цвета строки средствами CSS?
« Ответ #1 : 01 Июля 2003, 00:07:17 »
C++
Слушай меня внимательно:

Не знаю как насчет CSS (посмотри на http://loc.stack.ru/projects/CSS2/cover.html), а в JavaScript\' это можно организовать следующим образом.

1. Вариант.
 Можно взять свойство
  var text = document.body.innerHTML;
  затем в цикле при помощи функций indexOf(\'
2. Вариант.

 на события document.onmouseover и document.onmouseout, повесь следующую функцию.

document.onmouseover = eventHandler;
document.onmouseout  = eventHandler;

 // Для начала определи браузер (для совместимости)
  agent=navigator.userAgent.toLowerCase()
  // Установка флагов браузеров
  op=agent.indexOf("opera")>-1 && window.opera
  ie = (agent.indexOf("msie")>-1 && !op)
  mz=(agent.indexOf("gecko")>-1 || window.sidebar)

/* function eventHandler()
   Функция вещается на нужные нам обработчики событий и в соответствии с типом
   события передает его тому или иному объекту */

 function eventHandler(e)
 {
   // В IE обратится к объекту событие надо так e = window.event,
   // а в MZ,OP этот объект передается в функцию в виде аргумента.

   if(ie) e = event;

  // объект на котором произошло событие тебе надо определить строку, верно?

  var obj = (ie?e.srcElement:e.target);

  // В MZ быстрее всего элемент на котором произойдет событие будет #text поэтому нам нужен его родитель

  if(obj.nodeName=="#text") obj = obj.parentNode;

  // Но и это не все, т.к. быстрее всего таким образом ты достучишся до ячейки, а нужна строка, значит нам опять нужен родитель
 if(obj.nodeName=="TD") obj = obj.parentNode;

 // Если это строка
 if(obj.nodeName == "TR")
 {
    if(e.type =\'mouseout\') obj.style.background-color = \'#000\';
    if(e.type =\'mouseover\') obj.style.background-color = \'#FFF\';

   }
 }

// Установка обработчиков событий

 window.onresize = eventHandler;



Во я тут дочитал вопрос до конца. Посмотри в документацию по CSS смотри ссылку вверху, я там что-то подобное видел.

в любом случае удачи в нелегком труде програмиста :)

Nickii

Оффлайн Nickii

  • Фанат форума
  • Постоялец
  • ***
  • Сообщений: 218
  • +0/-0
  • 0
    • Просмотр профиля
    • http://www.srccode.spb.ru
Смена цвета строки средствами CSS?
« Ответ #2 : 01 Июля 2003, 00:08:44 »
Просмотри

5.11.3 Динамические псевдоклассы: :hover, :active и :focus

http://loc.stack.ru/projects/CSS2/selector.html#dynamic-pseudo-classes

Возможно это то чего тебе нужно.

Nickii

Оффлайн Alexandr

  • Фанат форума
  • Ветеран
  • *****
  • Сообщений: 865
  • +0/-0
  • 0
    • Просмотр профиля
    • http://gtp.hobi.ru
Смена цвета строки средствами CSS?
« Ответ #3 : 01 Июля 2003, 13:50:39 »


   


   


   


   

1
2
3
4

Kiss my CSS
Pусские gtp gp3 ( midi + tab ) -   - Все для Авто.

Оффлайн Nickii

  • Фанат форума
  • Постоялец
  • ***
  • Сообщений: 218
  • +0/-0
  • 0
    • Просмотр профиля
    • http://www.srccode.spb.ru
Смена цвета строки средствами CSS?
« Ответ #4 : 01 Июля 2003, 14:44:49 »
Alexandr
Абсолютно то-же, к тому же не совсем корректно. Работать будет только под IE и не для строк, а для ячеек.

Оффлайн C++

  • Фанат форума
  • Постоялец
  • ***
  • Сообщений: 221
  • +0/-0
  • 0
    • Просмотр профиля
    • http://
Смена цвета строки средствами CSS?
« Ответ #5 : 02 Июля 2003, 10:26:58 »
Привет.
Сделал как написано в первом посте, но все равно не работает:(
При ресайзе окна выдает ошибку (14,2) - требуется объект.
Вот код, который я тестировал.

<html>
<
head>
<
script language="JavaScript">
document.onmouseover eventHandler;
document.onmouseout eventHandler;
agent=navigator.userAgent.toLowerCase()
op=agent.indexOf("opera")>-&& window.opera 
ie 
= (agent.indexOf("msie")>-&& !op)
mz=(agent.indexOf("gecko")>-|| window.sidebar)
function 
eventHandler(e)
{
	
if(
ieevent;
	
var 
obj = (ie?e.srcElement:e.target);
	
if(
obj.nodeName=="#text"obj obj.parentNode;
	
if(
obj.nodeName=="td"obj obj.parentNode;
	
if(
obj.nodeName == "tr")
	
	
{
	
	
	
if(
e.type =\'mouseout\') obj.style.backgroundColor = \'#000000\';
	
	
	
if(e.type =\'mouseover\') obj.style.backgroundColor = \'#FFFFFF\';
	
	
}
}
window.onresize = eventHandler;
</script>
</head>
<body text="#FFFF00">


<table width="700" border="0" align="center" cellpadding="1" cellspacing="1" bgcolor="#000000">
  <tr align="center" bgcolor="#999999"> 
    <td><b>stroka</b></td>
    <td><b>stroka</b></td>
  </tr>
  <tr align="center" bgcolor="#999999" id="str"> 
    <td><b>stroka</b></td>
    <td><b>stroka</b></td>
  </tr>
</table>
</body>
</html>

А можно скрипт как-нибудь модифцировать, чтобы он реагировал не только на тег TR, а на любой тег с id=change?
Что-то вроде вот этого, но тоже не работает.

<script language="JavaScript">
document.onmouseover eventHandler;
document.onmouseout eventHandler;
ie = (agent.indexOf("msie")>-&& !op)
function 
eventHandler(e)
{
	
event;
	
var 
obj = (ie?e.srcElement:e.target);
	
if(
obj.id == "change")
	
	
{
	
	
	
if(
e.type =\'mouseout\') obj.style.backgroundColor = \'#000000\';
	
	
	
if(e.type =\'mouseover\') obj.style.backgroundColor = \'#FFFFFF\';
	
	
}
}
window.onresize = eventHandler;
</script>

В принципе мне не обязательно, чтобы он работал во всех броузерах, достаточно и IE.
Спасибо

Оффлайн C++

  • Фанат форума
  • Постоялец
  • ***
  • Сообщений: 221
  • +0/-0
  • 0
    • Просмотр профиля
    • http://
Смена цвета строки средствами CSS?
« Ответ #6 : 02 Июля 2003, 14:19:02 »
Спасибо всем, кто откликнулся!
Вот собрал полностью готовый вариант!

<html>
<
head>
<
SCRIPT LANGUAGE=JavaScript TYPE=text/javascript>
function 
on(color)
{
  if (
event.srcElement.tagName==\'TD\')
  {
    if(event.srcElement.parentNode.id==\'overYes\')
      event.srcElement.parentNode.bgColor=color;
  }
}
</SCRIPT>
</head>
<body bgcolor=#E8F1F7 text=#000066 onmouseover=on(\'#999999\') onmouseout=on(\'#9999CC\')>
<table width=100% border=0 cellpadding=1 cellspacing=1 bgcolor=#000000>
  <tr id=t> 
    <td colspan=2 align=center bgcolor=#3366CC>TABLE HEAD</td>
  </tr>
  <tr align=center id=overYes bgcolor=#9999CC> 
    <td>TR1</td>
    <td>TR1</td>
  </tr>
  <tr align=center id=overYes bgcolor=#9999CC> 
    <td>TR2</td>
    <td>TR1</td>
  </tr>
  <tr align=center id=overYes bgcolor=#9999CC> 
    <td> TR3</td>
    <td>TR1</td>
  </tr>
</table>
</body>
</html>

С удовольствием выслушаб критику по поводу совместимости с другими броузерами, кроме IE. Просто нет возможности проверить.

Оффлайн Xander

  • санитар леса
  • Глобальный модератор
  • Ветеран
  • *****
  • Сообщений: 1780
  • +0/-0
  • 2
    • Просмотр профиля
Смена цвета строки средствами CSS?
« Ответ #7 : 02 Июля 2003, 14:39:22 »
не используй id, используй классы: по правилам одинаковые id не допускаются
а лучше используй два класса, отличающихся только параметров color - тогда меньше придется мучатся, если захочешь цвета поменять
•••Jah\'d never let us down!•••

Оффлайн C++

  • Фанат форума
  • Постоялец
  • ***
  • Сообщений: 221
  • +0/-0
  • 0
    • Просмотр профиля
    • http://
Смена цвета строки средствами CSS?
« Ответ #8 : 02 Июля 2003, 15:08:48 »
Xander
А как до свойства class добраться?
Мне в принципе так и надо сделать....
Но, только когда я делаю так:

<html>
<
head>
<
SCRIPT LANGUAGE=JavaScript TYPE=text/javascript>
function 
on(style)
{
  if (
event.srcElement.tagName==\'TD\')
  {
    if(event.srcElement.parentNode.class==\'t\'||event.srcElement.parentNode.class==\'t_over\')
      event.srcElement.parentNode.class=style;
  }
}
</SCRIPT>
<style type="text/css">
<!--
.t {
	
background-color: #9999CC;
}
.t_over {
	
background-color: #999999;
}
-->
</style>
</head>
<body bgcolor=#E8F1F7 text=#000066 onmouseover=on(\'t_over\') onmouseout=on(\'t\')>
<table width=100% border=0 cellpadding=1 cellspacing=1 bgcolor=#000000>
  <tr id=t> 
    <td colspan=2 align=center bgcolor=#3366CC>TABLE HEAD</td>
  </tr>
  <tr align=center class=t> 
    <td>TR1</td>
    <td>TR1</td>
  </tr>
  <tr align=center class=t> 
    <td>TR2</td>
    <td>TR1</td>
  </tr>
  <tr align=center class=t> 
    <td> TR3</td>
    <td>TR1</td>
  </tr>
</table>
</body>
</html>

Браузер пишет: Предполагается наличие объекта указывает на строку

Оффлайн C++

  • Фанат форума
  • Постоялец
  • ***
  • Сообщений: 221
  • +0/-0
  • 0
    • Просмотр профиля
    • http://
Смена цвета строки средствами CSS?
« Ответ #9 : 02 Июля 2003, 16:37:07 »
Вопрос снят.
Пошел учить JavaScript! :)
Надо так:

<html>
<
head>
<
SCRIPT LANGUAGE=JavaScript TYPE=text/javascript>
function 
on(style)
{
  if (
event.srcElement.tagName==\'TD\')
  {
    if(event.srcElement.parentNode.className==\'t\'||event.srcElement.parentNode.className==\'t_over\')
      event.srcElement.parentNode.className=style;
  }
}
</SCRIPT>
<style type="text/css">
<!--
.t {
	
background-color: #9999CC;
}
.t_over {
	
background-color: #999999;
}
-->
</style>
</head>
<body bgcolor=#E8F1F7 text=#000066 onmouseover=on(\'t_over\') onmouseout=on(\'t\')>
<table width=100% border=0 cellpadding=1 cellspacing=1 bgcolor=#000000>
  <tr id=t> 
    <td colspan=2 align=center bgcolor=#3366CC>TABLE HEAD</td>
  </tr>
  <tr align=center class=t> 
    <td>TR1</td>
    <td>TR1</td>
  </tr>
  <tr align=center class=t> 
    <td>TR2</td>
    <td>TR1</td>
  </tr>
  <tr align=center class=t> 
    <td> TR3</td>
    <td>TR1</td>
  </tr>
</table>
</body>
</html>

 

Sitemap 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