IMHO.WS - Как менять фон ячеек таблицы

IMHO.WS (http://www.imho.ws/index.php)

- Веб-программирование (http://www.imho.ws/forumdisplay.php?f=29)

- - Как менять фон ячеек таблицы (http://www.imho.ws/showthread.php?t=44023)

Как менять фон ячеек таблицы

1. Как динамически менять фон ячейки таблицы при наведении на нее мышкой?
2. Как менять стиль бордюра (цвет, толщину), и работает ли это в Internet Explorer 5x?

Спасибочки. 5 баллов твои :-).

Можно дешевше... Через CSS

medved2002
Болтаем, шоб набрать публикации? Это уже флейм... Мой вопрос состоял не в том через что это сделать, а КАК это сделать через CSS

Цитата:

Первоначальное сообщение от Neo
Болтаем, шоб набрать публикации? Это уже флейм...

Не угадал. Мне публикации как-то не вперлись.

Цитата:

Первоначальное сообщение от Neo
а КАК это сделать через CSS

Да ну? хоть написал бы тогда что черехз CSS

Цитата:

Первоначальное сообщение от Neo
Мой вопрос состоял не в том через что это сделать,

Просто то что написал Razer рабочее, посему я только сказал что есть еще один путь, без JavaScripta только средствами CSS.

<style>
td.i{height:20px;width:30px;}
td.i a{display:block;height:100%;background-color: #ddd;}
td.i a:hover{background-color: #eee;}
</style>
<table>
<tr>
<td class="i"><a href=""></a></td>
<td class="i"><a href=""></a></td>
<td class="i"><a href=""></a></td>
<td class="i"><a href=""></a></td>
</tr>
</table>

Цитата:

td.i{height:20px;width:30px;}

Зачем здесь указывать размер?

Цитата:

td.i a{display:block;height:100%;background-color: #ddd;}

А что такое display:block? и что дает "a"?

Цитата:

td.i a:hover{background-color: #eee;}

Опять непонятно - что такое А?

Добавлено через 3 минуты:
Я попробовал пример - неплохо, но есть одно но: Мне нужно, чтобы стиль ячейки и ссылки менялся раздельно. И мне совсем не нужно, чтобы ячейка являлась ссылкой.

Добавлено через 8 минут:
Почему вот это не меняет цвет ячеек?

<style>
td.i {display:block; height:20px; width:40px; background-color: #ddd;}
td:hover {background-color: black}
a:hover {text-decoration: none}
</style>
<table border=0>
<tr>
<td class="i"><a href="">1</a></td>
<td class="i"><a href="">2</a></td>
<td class="i"><a href="">3</a></td>
<td class="i"><a href="">4</a></td>
</tr>
</table>

Цитата:

Первоначальное сообщение от Neo
Зачем здесь указывать размер?

А мне влом было забивать его инфой. и чтоб он был виден - указал размер.

Цитата:

Первоначальное сообщение от Neo
А что такое display:block?

display указвает как будет отображаться элемент. Два основных варианта:
inline(значение по умолчанию как у тега <span>) - линия
block(значение по умолчанию как у тега <div>) - блок.
Остальное кури в www.w3.org

Цитата:

Первоначальное сообщение от Neo
и что дает "a"?
Добавлено через 8 минут:
Почему вот это не меняет цвет ячеек?

Конструкция td.i{} a говорит IE что всеги теги вложенные в тег td класса i
будут иметь следующие параметры отображения. И не работает это у тебя потому
что у тега td нет насколько мне известно псевдоселектора hover

Цитата:

Первоначальное сообщение от Neo
Добавлено через 3 минуты:
Я попробовал пример - неплохо, но есть одно но: Мне нужно, чтобы стиль ячейки
и ссылки менялся раздельно. [/B]

насколько раздельно? что бы и бек у ссылки менялся тоже? и в цвет отличный от td? Тогда лучше вариант Razera. или вписывать в тег <a> вписывать что-нибудь еще (типа span) и
извращаться над конструкциями css рода a:hover span. Я тут уже давал ссылки по css читай там

Цитата:

Первоначальное сообщение от Neo
И мне совсем не нужно, чтобы ячейка являлась ссылкой.

См. выше

Добавлено через 2 минуты:
ошибочка
Конструкция td.i a{} говорит IE что всеги теги <а> вложенные в тег td класса i будут иметь следующие параметры отображения.

Спасибо. А почему CSS предпочтительней чем JavaScript?

Не всегда лучше.
А когда лучше, читай про безтабличную верстку. ссылки уже давал в форуме

Цитата:

А когда лучше, читай про безтабличную верстку

Ну так и чем все-таки лучше :biggrin: ?

А ты таки прочитал?

Что прочитал ?

Ссылки про безтабличную верстку.

А лучше ну например в этом случае:

Javascript:

Код:

<table cellpadding="0" cellspacing="0" border="0" width="100px">

        <tr>

                <td bgcolor="#dddddd" onmouseover="this.style.backgroundColor = '#ffffff';document.getElementById('i1').style.visibility='visible';" onmouseout="this.style.backgroundColor = '#ddd';document.getElementById('i1').style.visibility='hidden';">

<a href=""><img src="http://www.imho.ws/images/vb_bullet.gif" align="middle" style="visibility:hidden;" id="i1">aaaaa</a>

</td>

        </tr>

        <tr>

                <td bgcolor="#dddddd" onmouseover="this.style.backgroundColor = '#ffffff';document.getElementById('i2').style.visibility='visible';" onmouseout="this.style.backgroundColor = '#ddd';document.getElementById('i2').style.visibility='hidden';">

<a href=""><img src="http://www.imho.ws/images/vb_bullet.gif" align="middle" style="visibility:hidden;" id="i2">bbbbb</a>

</td>

        </tr>

        <tr>

                <td bgcolor="#dddddd"  onmouseover="this.style.backgroundColor = '#ffffff';document.getElementById('i3').style.visibility='visible';" onmouseout="this.style.backgroundColor = '#ddd';document.getElementById('i3').style.visibility='hidden';">

<a href=""><img src="http://www.imho.ws/images/vb_bullet.gif" align="middle" style="visibility:hidden;" id="i3">ccccc</a>

</td>

        </tr>

        <tr>

                <td bgcolor="#dddddd" onmouseover="this.style.backgroundColor = '#ffffff';document.getElementById('i4').style.visibility='visible';" onmouseout="this.style.backgroundColor = '#ddd';document.getElementById('i4').style.visibility='hidden';">

<a href=""><img src="http://www.imho.ws/images/vb_bullet.gif" align="middle" style="visibility:hidden;" id="i4">ddddd</a>

</td>

        </tr>

</table>

CSS:

Код:

<style>

div.g{width:100px; float:left;}

div.g a{display:block;background-color: #ddd;padding-left:20px;}

div.g a:hover{background:#fff url(http://www.imho.ws/images/vb_bullet.gif) no-repeat 0% 50%;padding-left:20px;}

</style>

<div class="g">

<a href="">aaaa</a><a href="">bbbb</a><a href="">cccc</a><a href="">dddd</a>

</div>

Да только в случае с JS это было бы примерно так:

Код:

<a href="" onmouseover="rollover(this,1);" onmouseout="rollover(this,0);">aaaa</a>

а не как ты расписал.

PS: Причем в отличии от CSS небыло бы необходимости использовать тег "a".

Э неееее.
Надо было бы уместить меню слева и и текст справа для этого я и вписал таблицу.
Насчет тега а согласен, но я тебе привел пример когда нужны ссылки.

Цитата:

Надо было бы уместить меню слева и и текст справа для этого я и вписал таблицу

:biggrin: ну-ну

Гмм? а чего смешного?

Твоя агрументация ...

PS: Ну или я не понял суть предпоследней фразы ввиду отсутствия знаков препинания.

Модератор - флеймит. хе хе... ну не важно...
А по сути никто так ничего и не говорит... Ведь не сможете вы выполнить на КСС то, как я сделал меню на своем сайте http://shabash.dreamsee.ru/ ?

Я в твоем меню не увидел ничего, что бы помешало сделать его на CSS.

RaZEr
Но ведь меню состоит из ячеек таблицы, в которую вставлены урлы.
Ячейки таблицы ":hover" не поддерживают.

Так каким же образом можно это сделать на CSS?

Смотри выше.

Угу. Тем более td здесь не обязательны

Каким образом они там не обязательны? У меня там одна таблица вложена в другую. А текст меняет цвет независимо от ячейки... Как же ты хочешь это осуществить без td?
Кстати, ни на www.w3.org, ни на www.w3schools.com я ничего путного не нашел

Цитата:

А текст меняет цвет независимо от ячейки...

А от чего он цвет меняет как не от ячейки ?

Цитата:

Первоначальное сообщение от Neo
Каким образом они там не обязательны?

Твой код

Код:

<tr>

<td class="single" onmouseover="this.style.background='#D8D8D8';" onmouseout="this.style.background='#F4F4F4';">

<a href="http://shabash.dreamsee.ru/pravila.html">Правила</a></td>

</tr>

<tr>

<td class="single2" onmouseover="this.style.background='#D8D8D8';" onmouseout="this.style.background='#F4F4F4';">

<a href="http://shabash.dreamsee.ru/xron.html">Бесшабашные<br>хроники</a></td>

</tr>

<tr>

<td class="single2" onmouseover="this.style.background='#D8D8D8';" onmouseout="this.style.background='#F4F4F4';">

<a href="http://shabash.dreamsee.ru/poetry.html">Поэзия</a></td>

</tr>

<tr>

<td class="single2" onmouseover="this.style.background='#D8D8D8';" onmouseout="this.style.background='#F4F4F4';">

<a href="http://shabash.dreamsee.ru/proza.html">Проза</a></td>

</tr>

<tr>

<td class="single2" onmouseover="this.style.background='#D8D8D8';" onmouseout="this.style.background='#F4F4F4';">

<a href="http://shabash.dreamsee.ru/critics.html">Критика</a></td>

</tr>

<tr>

<td class="single2" onmouseover="this.style.background='#D8D8D8';" onmouseout="this.style.background='#F4F4F4';">

<a href="http://shabash.dreamsee.ru/zelbook.html">Зеленая тетрадь</a></td>

</tr>

<tr>

<td class="single2" onmouseover="this.style.background='#D8D8D8';" onmouseout="this.style.background='#F4F4F4';">

<a href="http://shabash.dreamsee.ru/forum/">Форум</a></td>

</tr>

<tr>

<td class="single2" onmouseover="this.style.background='#D8D8D8';" onmouseout="this.style.background='#F4F4F4';">

<a href="http://shabash.dreamsee.ru/forum/forumdisplay.php?s=&forumid=10">Гостевая</a></td>

</tr>

<tr>

<td class="single2" onmouseover="this.style.background='#D8D8D8';" onmouseout="this.style.background='#F4F4F4';">

<a href="http://shabash.dreamsee.ru/redkoll.html">Редколлегия</a></td>

</tr>

<tr>

<td class="single2" onmouseover="this.style.background='#D8D8D8';" onmouseout="this.style.background='#F4F4F4';">

<a href="http://shabash.dreamsee.ru/links.html">Ссылки</a></td>

</tr>

Мой код:

Код:

<style>

td.menu a{background: #F4F4F4; color: #000020; display: block; text-align: center; text-decoration: none;}

td.menu a:hover{background: #D8D8D8; color: #770000;}

</style>

<table>

        <tr>

                <td class="menu">

                        <a href="http://shabash.dreamsee.ru/pravila.html">Правила</a>

                        <a href="http://shabash.dreamsee.ru/xron.html">Бесшабашные<br>хроники</a>

                        <a href="http://shabash.dreamsee.ru/poetry.html">Поэзия</a>

                        <a href="http://shabash.dreamsee.ru/proza.html">Проза</a>

                        <a href="http://shabash.dreamsee.ru/critics.html">Критика</a>

                        <a href="http://shabash.dreamsee.ru/zelbook.html">Зеленая тетрадь</a>

                        <a href="http://shabash.dreamsee.ru/forum/">Форум</a>

                        <a href="http://shabash.dreamsee.ru/forum/forumdisplay.php?s=&forumid=10">Гостевая</a>

                        <a href="http://shabash.dreamsee.ru/redkoll.html">Редколлегия</a>

                        <a href="http://shabash.dreamsee.ru/links.html">Ссылки</a>

                </td>

        </tr>

</table>

Цитата:

Первоначальное сообщение от Neo
Кстати, ни на www.w3.org, ни на www.w3schools.com я ничего путного не нашел

Либо хреново искал... либо не то

Цитата:

RaZEr:
А от чего он цвет меняет как не от ячейки ?

<TD> меняет цвет от onmouseover
<A> меняет цвет от CSS - a:hover...

Цитата:

medved2002:
Мой код:

Но здесь цвет ячейки И текста меняется как только я навожу мышку на ячейку

В принципе можно.. Но до конца отладить вот такю хрень меня ломает

Код:

<style>

a.td{background: #F4F4F4; color: #000020; text-align: center; width:130px;border:1px solid black;}

a.aa{margin-left:-6em; width:130px;color: #000020; text-decoration: none;}

a.aa:hover{color: #770000;}

a.td:hover{background: #D8D8D8;}

</style>

<table>

        <tr>

                <td class="menu">

                        <a class="td">&nbsp;</a>

                        <a class="aa" href="http://shabash.dreamsee.ru/pravila.html">Правила</a><br>

                        <a class="td">&nbsp;</a>

                        <a class="aa" href="http://shabash.dreamsee.ru/pravila.html">Правила</a>

                </td>

        </tr>

</table>