Форум: Форум PHPФорум ApacheФорум Регулярные ВыраженияФорум MySQLHTML+CSS+JavaScriptФорум FlashРазное
Новые темы: 0000000
C++. Мастер-класс в задачах и примерах. Авторы: Кузнецов М.В., Симдянов И.В. MySQL 5. В подлиннике. Авторы: Кузнецов М.В., Симдянов И.В. PHP. Практика создания Web-сайтов (второе издание). Авторы: Кузнецов М.В., Симдянов И.В. Самоучитель PHP 5 / 6 (3 издание). Авторы: Кузнецов М.В., Симдянов И.В. PHP на примерах (2 издание). Авторы: Кузнецов М.В., Симдянов И.В.
ВСЕ НАШИ КНИГИ
Консультационный центр SoftTime

HTML+CSS+JavaScript

Выбрать другой форум

 

Здравствуйте, Посетитель!

вид форума:
Линейный форум Структурный форум

тема: Изменение цвета ячейки при наведении курсора
 
 автор: alik   (06.12.2004 в 22:55)
 
 

Подскажите пожалуйста, как мне сделать чтоб при наведении курсора к ячейке таблицы менялся цвет ячейки! Спасибо.

   
 
 автор: glsv (Дизайнер)   (06.12.2004 в 23:15)   письмо автору
 
   для: alik   (06.12.2004 в 22:55)
 

А цвет какой назначать? В смысле откуда его брать? Он уже задан?
В любом случае, - вот один из способов.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title></title>
<script language='javascript1.3'>
  function color(item, r, g ,b)
  {
    str="item.style.backgroundColor=\"rgb("+r+","+g+","+b+")\"";
    eval(str);    
  }
</script>
</head>
<body>
<table border="1" summary="">
    <tr>
        <td onmouseover="color(this, 120,0,0)" onmouseout="color(this, 255,255,255)">111</td>
        <td onmouseover="color(this, 120,222,0)" onmouseout="color(this, 255,255,255)">222</td>        
    </tr>
</table>
</body>
</html>



color(this, 255,255,255)

this - это текущая ячейка
оставщаяся тройка чисел - это тройка значений RGB для назначаемого цвета

   
 
 автор: alik   (07.12.2004 в 00:40)
 
   для: glsv (Дизайнер)   (06.12.2004 в 23:15)
 

>А цвет какой назначать? В смысле откуда его брать? Он уже задан?
Ну в принципе цвет уже задан. Я использую это действие как ссылку, т.е. вытягиваю данные из БД через цикл и делаю эти данные ссылками(каждая ссылка в одной ячейке), но вместо изменения цвета ссылки я хочу использовать изменение цвета ячейки.
P.S. А при помощи CSS этот вопрос решить можно?

   
 
 автор: alik   (07.12.2004 в 01:30)
 
   для: alik   (07.12.2004 в 00:40)
 

И еще вопросик по поводу вышепредставленного скрипта как сделать чтоб при onmouseover цвет менялся, а при onmouseout цвет оставался таким же как и до изменения (т.е. не определять цвет при onmouseout).

   
 
 автор: glsv (Дизайнер)   (07.12.2004 в 02:02)   письмо автору
 
   для: alik   (07.12.2004 в 00:40)
 

Тогда можно вот так:
Создаем 2 стиля: для выделенной ячейки и для обычной.
По событиям onmouseover и onmouseout меняем эти стили у ячеек

<html> 
<head> 
<style>
.red{background-color: #FF0000;}
.white{background-color: #FFFFFF;}
</style>
<title></title> 
<script language='javascript1.3'> 
  function active(item) 
  { 
    str="item.className=\"red\""; 
    eval(str);     
  } 
  function inactive(item) 
  { 
    str="item.className=\"white\""; 
    eval(str);     
  } 
  
</script> 
</head> 
<body> 
<table border="1" summary=""> 
    <tr> 
        <td class=white onmouseover="active(this)" onmouseout="inactive(this)">111</td> 
        <td class=white onmouseover="active(this)" onmouseout="inactive(this)">222</td>         
    </tr> 
</table> 
</body> 
</html> 

   
 
 автор: Terror   (13.12.2004 в 13:38)   письмо автору
 
   для: glsv (Дизайнер)   (07.12.2004 в 02:02)
 

Это всё можно упростить. Получится примерно так:

<table width="16%" border="1" cellspacing="0">
  <tr >
    <td bgcolor='#99CC00' onmouseover="this.style.backgroundColor='#FFFF33';"onmouseout="this.style.backgroundColor='#99CC00' "><div align="center">111</div></td>
    <td bgcolor='#99CCCC' onmouseover="this.style.backgroundColor='#CC6633';"onmouseout="this.style.backgroundColor='#990000' "><div align="center">222</div></td>
  </tr>
</table>

Эффект тот же, кода меньше!

   
 
 автор: glsv (Дизайнер)   (13.12.2004 в 14:11)   письмо автору
 
   для: Terror   (13.12.2004 в 13:38)
 

>Эффект тот же, кода меньше!
Можно и так. Все зависит от задачи. Первый способ – универсальнее.

   
Rambler's Top100
вверх

Rambler's Top100 Яндекс.Метрика Яндекс цитирования