Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > цвет бордюра ячейки и фона

Автор: lisichka 8.7.2007, 15:57

Привет всем, это мое первое письмо на форуме!
Рада  видеть всех!

Я не могу разобраться с одной примочкой,  хочу сделать интерактивный бордюр ячейки у таблицы.
Хотелось бы, чтобы он изменял свой цвет  при наведении на него курсором.
Пробовала найти в пяти буквах (google) smile

, увы....
Кто-нибудь пробовал делать подобное намекните, где лучше найти урок на эту тему.

Заранее благодарна всем, кто ответит на мое письмо.

Автор: Mymik 8.7.2007, 22:49

Цитата(lisichka @ 8.7.2007, 15:57

)

Привет всем,

Привет.

Цитата(lisichka @ 8.7.2007, 15:57

)

хочу сделать интерактивный бордюр ячейки у таблицы.

Есть два способа... первый способ, как мне кажется, более рациональный(меньше кода писать), и он делает не ячейки таблицы изменяемыми, а непосредственно ссылки.
Второй же способ это как вы хотели (изменения непосредственно ячеек). Но это возможно сделать только через JS (так чтобы кроссбраузерно).

Код


<html>
<head>
<style type="text/css">
<!-- Первый спобом -->
.actionLinks td {width:10px;} <!-- Задание размера ячейки -->
.actionLinks td a {
    display:block; /* делаем ссылку блочным типом */
    width:20px; /* Задаем ширину */
    height:20px;  /* Задаем высоту */
    border:solid 1px white; /* делаем бордюр невидимым (надо указать цвет фона), если этого свойства не будет, то ссылки будут дергаться в FF */
    text-align:center; /* центрируем */
    color:green; /* Цвет */
    text-decoration:none; /* убираем подчеркивание */
}
.actionLinks td a:hover {
    border:solid 1px green; /* определяем другой цвет*/
    text-decoration:none; /* убираем подчеркивание */
}

.actionTable td {
    border:solid 1px white; /* Резервируем бордюр */
    width:20px; /*ширина ячейки */
    height:20px; /* Высота ячейки */
    text-align:center; /* центрирование */
}
.actionTable td a { 
    color:green; /* цвет */
    text-decoration:none; /* убираем подчеркивание */
}
</style>
</head>
<body>
<!-- Первый способ -->
<table class="actionLinks" collspacing="0" collpadding="0">
    <tr>
        <td><a href="#">1</a></td>
        <td><a href="#">2</a></td>
        <td><a href="#">3</a></td>
    </tr>
</table>
<!-- Конец первого способа -->
<!-- Второй способ -->
<table class="actionTable">
    <tr>
        <td onmouseover="this.style.borderColor='green'" onmouseout="this.style.borderColor='white'"><a href="#">1</a></td>
        <td onmouseover="this.style.borderColor='green'" onmouseout="this.style.borderColor='white'"><a href="#">2</a></td>
        <td onmouseover="this.style.borderColor='green'" onmouseout="this.style.borderColor='white'"><a href="#">3</a></td>
    </tr>
</table>
<!-- Конец второго способда -->
</body>
<html>

Как видишь, во втором способе слишком много писанины :о(... а следовательно и передаваемого пользователю трафика :о(.
Думаю что первый способ лучше.

Автор: lisichka 9.7.2007, 09:37

Mymik, ты мастер, это точно. Я восхищена!
Попробую поменять цвет ячейки сама.
Буду рада помочь тебе, чем смогу smile

Автор: lisichka 9.7.2007, 10:05

Вот посмотри, что получилось, по моему красиво.
Большое всем спасибо за участие!

smile

Код


<!-- Второй способ -->
<table class="actionTable">
    <tr>
        <td onmouseover="this.style.borderColor='green';this.style.backgroundColor='paleturquoise'" onmouseout="this.style.borderColor='white';this.style.backgroundColor='pink'"><a href="#">1</a></td>
        <td onmouseover="this.style.borderColor='green';this.style.backgroundColor='paleturquoise'" onmouseout="this.style.borderColor='white';this.style.backgroundColor='pink'"><a href="#">2</a></td>
       <td onmouseover="this.style.borderColor='green';this.style.backgroundColor='paleturquoise'" onmouseout="this.style.borderColor='white';this.style.backgroundColor='pink'"><a href="#">3</a></td>
    </tr>
</table>
<!-- Конец второго способда -->

Автор: Всемогущий 9.7.2007, 10:32

Мне кажется ,что если таблица будет больше ,то мы будем передавать клиенту кучу однообразной информации.
Поэтому лучше сделать так:
При наведении курсора мышки на ячейку таблицы произойдет изменение ее цвета. (надписи выделенные зеленым необходимо откорректировать). Вставьте в тег <body … onLoad="menu()">.

Код



  
Код.
    <script language="JavaScript">
<!--
function menu() {
if (document.getElementsByTagName) {var allCells = document.getElementsByTagName('td');
for (var i = 0; i < allCells.length; i++) {
if (allCells.item(i).className == 'menu') {var currClass = allCells.item(i).className; eval('allCells.item(i).onmouseover = function()
{this.className = \'' + currClass + '-on\' }');
eval('allCells.item(i).onmouseout = function() {this.className = \'' + currClass + '\'}');}}}}
//-->
</script>

В файле каскадных таблиц стилей, вписывается:

<STYLE type="text/css"><!--
td.menu-on {background-color: #a5a5a5}
//-->
</STYLE>

В том месте, где необходимо вписывается:

<td class=menu bgcolor=000000><a href="index.htm">Текст</a></td>

Автор: lisichka 9.7.2007, 10:41

Еще раз спасибо за участие!
Да, с таким скриптом, как eval я работать побаиваюсь (не очень ли древняя штучка?)....
Или я ошибаюсь? Может быть есть вариант работы без eval?

Автор: Mymik 9.7.2007, 15:52

lisichka, eval это совсем не древняя штука :о) ты что, это преобразование текста в скрипт... в сфере ajax используется везде и повсеместно.
Всемогущий, но твой же ж код вообще для всех таблиц на сайте... а как я понял, человек довольно часто использует таблицы и ей не нужно будет во всех ячейках изменения цвета...

Добавлено через 9 минут и 56 секунд
lisichka, смотри, т.к. у тебя уже изменяется два CSS свойства, тогда тебе лучше уже вынести все в отдельные CSS классы, как предложил Всемогущий. И тогда получится что-то типа

Код


.td-act {border:solid 2px green; background:paleturquoise;}
.td-des {border:solid 2px white; background:pink;}

Код


<table class="actionTable">
    <tr>
        <td onmouseover="this.className='td-act'" onmouseout="this.className='td-dis'"><a href="#">1</a></td>
        <td onmouseover="this.className='td-act'" onmouseout="this.className='td-dis'"><a href="#">2</a></td>
        <td onmouseover="this.className='td-act'" onmouseout="this.className='td-dis'"><a href="#">3</a></td>
    </tr>
</table>

Всемогущий, а твой скрипт можно доработать путем отлова аргументов в функции, туда мы будем передавать строковые id таблиц

Код


function menu() 
{
    if (document.getElementsByTagName) 
    {
        for(i = 0; i < arguments.length; i++)
        { 
            if(document.getElementById(arguments[i]))
            {
                var allCells = document.getElementById(arguments[i]).cells;
                for (var i = 0; i < allCells.length; i++) 
                {
                    if (allCells.item(i).className == 'menu') 
                    {
                        var currClass = allCells.item(i).className; 
                        eval('allCells.item(i).onmouseover = function(){this.className = \'' + currClass + '-on\' }');
                        eval('allCells.item(i).onmouseout = function() {this.className = \'' + currClass + '\'}');
                    }
                }
            }
        }
    }
}

И вместо getElementsByTagName() использовать готовое свойство из dom cells оно возвращает все ячейки из таблицы.