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

lisichka

Дата 8.7.2007, 15:57 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 11
Регистрация: 8.7.2007

Репутация: нет
Всего: нет

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

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

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

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

Присоединённый файл ( Кол-во скачиваний: 8 )

rama.jpg 24,08 Kb

Mymik

Дата 8.7.2007, 22:49 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Участник Клуба
Сообщений: 1474
Регистрация: 12.5.2006
Где: Lamer-центер

Репутация: 7
Всего: 78

Цитата(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>

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

--------------------

ICQ ::            857-857
E-mail ::         mymik[at]inbox[dot]ru
HomaPage ::  http://localhost/

:to_become_senile  :this

lisichka

Дата 9.7.2007, 09:37 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 11
Регистрация: 8.7.2007

Репутация: нет
Всего: нет

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

lisichka

Дата 9.7.2007, 10:05 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 11
Регистрация: 8.7.2007

Репутация: нет
Всего: нет

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

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 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 440
Регистрация: 25.6.2006
Где: Челябинск

Репутация: нет
Всего: 13

Мне кажется ,что если таблица будет больше ,то мы будем передавать клиенту кучу однообразной информации.
Поэтому лучше сделать так:
При наведении курсора мышки на ячейку таблицы произойдет изменение ее цвета. (надписи выделенные зеленым необходимо откорректировать). Вставьте в тег <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>

--------------------

Цитата(smartov @ 16.1.2007, 13:26

)

Видел я PHP код, который пишут наСильники, никогда на php не писавшие :D То еще зрелище. Все пытаются сделать руками и через ж (как в С привыкли). Все пытаются память освобождать итд итп.

lisichka

Дата 9.7.2007, 10:41 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 11
Регистрация: 8.7.2007

Репутация: нет
Всего: нет

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

Mymik

Дата 9.7.2007, 15:52 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Участник Клуба
Сообщений: 1474
Регистрация: 12.5.2006
Где: Lamer-центер

Репутация: 7
Всего: 78

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 оно возвращает все ячейки из таблицы.

--------------------

ICQ ::            857-857
E-mail ::         mymik[at]inbox[dot]ru
HomaPage ::  http://localhost/

:to_become_senile  :this

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »