|
автор: alik (06.12.2004 в 22:55) |
|
| Подскажите пожалуйста, как мне сделать чтоб при наведении курсора к ячейке таблицы менялся цвет ячейки! Спасибо. | |
|
|
|
|
|
|
|
для: 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>
|
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). | |
|
|
|
|
|
|
|
для: 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>
|
| |
|
|
|
|
|
|
|
для: 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>
|
Эффект тот же, кода меньше! | |
|
|
|
|
|
|
|
для: Terror
(13.12.2004 в 13:38)
| | >Эффект тот же, кода меньше!
Можно и так. Все зависит от задачи. Первый способ – универсальнее. | |
|
|
|