Перейти из форума на сайт.

НовостиФайловые архивы
ПоискАктивные темыТоп лист
ПравилаКто в on-line?
Вход Забыли пароль? Первый раз на этом сайте? Регистрация
Компьютерный форум Ru.Board » Интернет » В помощь вебмастеру » Изменение фона ячейки таблицы при наведении курсора

Модерирует : Cheery

 Версия для печати • ПодписатьсяДобавить в закладки

Открыть новую тему     Написать ответ в эту тему

Daiz13



Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Как можно сделать чтобы фон ячейки таблицы при наведении курсора менялся?

Всего записей: 257 | Зарегистр. 06-06-2001 | Отправлено: 17:50 12-03-2002
FED



Чертов Мембер
Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору
<head>
<script language="javascript">
function changecolor(cell, color){
cell.bgColor=color;
}
function redirect(url)
{
window.location = url;
}
</script>
</head>
 
[skip]
 
<td style="cursor: hand;" onclick="redirect('file.html')" onmouseover="changecolor(this, 0xE0EBF5);" onmouseout="changecolor(this, 0xEEF5FC);" bgcolor="#COLOR">
 
 
Вроде все Если без ссылки убери onclick

----------
[img]http://bf2s.com/player/57565384/sig.png[/img]
[img]http://bf2s.com/player/57565384/sig5.png[/img]

Всего записей: 3039 | Зарегистр. 13-08-2001 | Отправлено: 20:15 12-03-2002 | Исправлено: FED, 20:15 12-03-2002
Ausw



Moderator
Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору
О!  фича что надо, но вот то, что в статусной строке не пишется ничего и то, что в "новом окне" открыть неззя - печально. Может кто знает решение подобное? Буду признателен. (картинками делать тоже не фонтан)

Всего записей: 7371 | Зарегистр. 12-07-2001 | Отправлено: 16:44 05-12-2002
LelikV



Настоящий Джедай
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Код:
 
<script language="javascript">  
function SetBg(cell) { cell.style.backgroundImage="url('img/bg_color.gif')"; }
function ClearBg(cell) { cell.style.backgroundImage=''; }
</script>
 
<body>
 
<TD onMouseOver="SetBg(this);" onMouseOut="ClearBg(this)"><A href="#">ссылка, хоть в новом окне будет открываться, хоть в старом, таргет главное поставить </A></TD>
 

 
Добавлено
Аусвайсик, если цветом, то соответственно  
 
 
{ cell.style.backgroundColor="#FFFFFF"; }
 
Добавлено
или bgcolor
 
не помню

----------
ушел на рыбалку

Всего записей: 4182 | Зарегистр. 17-12-2001 | Отправлено: 17:01 05-12-2002 | Исправлено: LelikV, 17:04 05-12-2002
ColdFusion



Junior Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Chto bi otkrivalos v novom okne vmesto
 
window.location = url;  
 
Napishi
 
window.open(url,'MyNewWin','');
 

Всего записей: 139 | Зарегистр. 25-04-2002 | Отправлено: 19:15 05-12-2002
zavgar



бешенный
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
в css пишешь  
TD.test {
BORDER-RIGHT: white 0px; PADDING-RIGHT: 9px; BORDER-TOP: white 0px; PADDING-LEFT: 9px; BACKGROUND: #999999; PADDING-BOTTOM: 9px; BORDER-LEFT: white 0px; COLOR: black; PADDING-TOP: 9px; BORDER-BOTTOM: white 0px
}
TD.test2 {
BORDER-RIGHT: black 0px; PADDING-RIGHT: 9px; BORDER-TOP: black 0px; PADDING-LEFT: 9px; BACKGROUND: none transparent scroll repeat 0% 0%; PADDING-BOTTOM: 9px; BORDER-LEFT: black 0px; COLOR: #333333; PADDING-TOP: 9px; BORDER-BOTTOM: black 0px
}
 
Сама ячейка выглядит так:
<TD class=test onmouseover="this.className='test2'" onmouseout="this.className='test'" bgColor=cccccc >
 
вот и все.

----------
Женщина - друг человека (C) Конфуций (551 –479 г. до н. э.)

Всего записей: 338 | Зарегистр. 29-08-2001 | Отправлено: 20:10 05-12-2002 | Исправлено: zavgar, 20:11 05-12-2002
Ausw



Moderator
Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору
LelikV Вот, рулез что надо и про рисунок беграунда. Сенкс  
ну я еще добавил пару фич где FED написал курсор, а то линкуется только на ссылу
 
всем спасибо

Всего записей: 7371 | Зарегистр. 12-07-2001 | Отправлено: 23:06 06-12-2002
Ausw



Moderator
Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору
пусть полежит.
 
разные backgroundImage на ячейки
 

Код:
<td onmouseover="this.style.backgroundImage='url(select/sel_00.gif)';" onmouseout="this.style.backgroundImage='url(select/sel_01.gif)';"><a class=menu href=#>ссылка</a></td>

 
 
разные backgroundcolor на ячейки

Код:
<td onmouseover="style.backgroundColor='#AEB7D5'; style.cursor='hand'" onmouseout="style.backgroundColor='#DADDE7';" onclick="location.href='http://www.telka.ru'">Текст</td>

 

и это все.

----------
Be High.

Всего записей: 7371 | Зарегистр. 12-07-2001 | Отправлено: 22:12 23-12-2002 | Исправлено: Ausw, 17:27 13-02-2003
LelikV



Настоящий Джедай
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
#Moderation Mode
<link rel="stylesheet" href="http://htmlcoder.visions.ru/coder.css" type="text/css" media="all" /><link rel="stylesheet" href="http://htmlcoder.visions.ru/standard.css" type="text/css" media="all" title="standard" /><link rel="alternate stylesheet" href="http://htmlcoder.visions.ru/grayscale.css" type="text/css" media="all" title="grayscale" /><link rel="stylesheet" href="http://htmlcoder.visions.ru/coder_p.css" type="text/css" media="print" /><p>Итак, вот, что необходимо для достижения нирваны в случаях с вертикальным и горизонтальным расположением ячеек (спасибо тов. <a href=mailto:dragster@nm.ru>dragster</a> за дельные замечания):</p><p><B>Вариант с вертикальными ячейками</B>:</p><p><code>a {<br />background-color:#CCCCCC;<br />border:2px dotted #000000;<br /><span class=high>display:block</span>;<br /><span class=high>line-height:100%</span>;<br />margin:3px;<br />padding:20px<br />}<br />a:hover {<br />background-color:#FFC0CB;<br />}</code></p><p>В итоге мы имеем следующее:</p><p><a href=/ class=clickable1>это у нас ссылка</a>
<a href=/ class=clickable1>это у нас ссылка нумер два</a></p><p><B>Вариант с горизонтальными ячейками</B>:</p><p><code>a {<br />background-color:#CCCCCC;<br />border:2px dotted #000000;<br /><span class=high>display:&quot;inline-block&quot;</span>; /* кавычки необходимы, чтобы NN6 нормально воспринимал (<nobr>т. е.</nobr> игнорировал) нестандартное, IE'шное значение inline-block, которое правильно вписывает тег A в layout страницы (для NN6 и Opera не нашлось подобного, правильно работающего значения display) */<br />margin:3px;<br />padding:20px<br />}<br />a:hover {<br />background-color:#FFC0CB;<br />}</code></p><p>Получаем следующее:</p><p><a href=/ class=clickable2>это у нас ссылка</a><a href=/ class=clickable2>это у нас ссылка нумер два</a></p><p>А можно поступить с горизонтальными ячейками <nobr>по-другому</nobr>, как любезно указал <nobr>г-н</nobr> <a href=mailto:theigel@mail.ru>Серега</a> (я <nobr>почему-то</nobr> забыл о замечательном свойстве <code>float</code>):</p><p><code>a {<br />background-color:#CCCCCC;<br />border:2px dotted #000000;<br /><span class=high>display:block;<br />float:left;</span><br />margin:3px;<br />padding:20px<br />}<br />a:hover {<br />background-color:#FFC0CB;<br />}</code></p><p>В итоге мы имеем следующее:</p><p><a href=/ class=clickable3>это у нас ссылка</a><a href=/ class=clickable3>это у нас ссылка нумер два</a></p><br clear=all /><p>Большим плюсом использования одного из указанных методов является тот факт, что они безоговорочно работают в IE5.5+ (в IE5.0 не работают варианты с горизонтальными ячейками) и в NN6+ и Opera5+ (иногда, правда, с некоторыми причудливыми глюками). Согласитесь, это неплохая совместимость.</p>
 
http://htmlcoder.visions.ru

----------
ушел на рыбалку

Всего записей: 4182 | Зарегистр. 17-12-2001 | Отправлено: 15:41 03-02-2003 | Исправлено: LelikV, 15:46 03-02-2003
nuToH



Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Код:
a:link,a:active,a:visited {  
background-color: blue;  
width: 100%;  
height: 100%  
}  
a:hover {  
background-color: red;  
width: 100%;  
height: 100%  
}  

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

----------
~ отец

Всего записей: 627 | Зарегистр. 28-06-2001 | Отправлено: 18:30 21-08-2003
Ze Bolacha



Junior Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
А как сделать, чтобы менялся только бордер?

Всего записей: 185 | Зарегистр. 21-07-2003 | Отправлено: 16:43 22-08-2003
nuToH



Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Ze Bolacha

Цитата:
А как сделать, чтобы менялся только бордер?

попробуй так:

Код:
a:link,a:active,a:visited {
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
}  
a:hover {
border-top: 1px solid #FF0000;
border-bottom: 1px solid #FF0000;
border-left: 1px solid #FF0000;
border-right: 1px solid #FF0000;
}

 
Добавлено
и вообще - эксперименты спасут мир
поставь себе TopStyle 3, и оттуда рули стайлами - помогает

----------
~ отец

Всего записей: 627 | Зарегистр. 28-06-2001 | Отправлено: 18:25 22-08-2003
Открыть новую тему     Написать ответ в эту тему

Компьютерный форум Ru.Board » Интернет » В помощь вебмастеру » Изменение фона ячейки таблицы при наведении курсора


Реклама на форуме Ru.Board.

Powered by Ikonboard "v2.1.7b" © 2000 Ikonboard.com
Modified by Ru.B0ard
© Ru.B0ard 2000-2024

BitCoin: 1NGG1chHtUvrtEqjeerQCKDMUi6S6CG4iC

Рейтинг.ru