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

[maximspb]

Всем привет. я хочу при наведении мыши на графический элемент менять его вид(формально это таблица 3 на 3 где крайние ячейки имеют фон-картинку а центральная ячейка содержит список с данными). типа hover. использую джаваскрипт. проблема в том что ИЕ безумно тормозит. сейчас на mouseover/out меняю класс ячеек таблицы. может есть идеи как можно быстрее background-image сменить? спасибо

[Great Rash]

А почему бы не менять background у всей таблицы, а не у каждой ячейки в отдельности?

[maximspb]

А почему бы не менять background у всей таблицы, а не у каждой ячейки в отдельности?

у меня каждая ячейка имеет специфический фон(что то вроде прямоугольника с закругленными краями), возможно сразу разом все поменять? типа меняешь класс таблицы а все ячейки сами фон поменяют?

[Саныч]

Конечно возможно... Пример кусочка css

table.class_one
{
...
}
table.class_one td.one{...}
table.class_one td.two{...}
...
table.class_one td.last{...}

table.class_two
{
...
}
table.class_two td.one{...}
table.class_two td.two{...}
...
table.class_two td.last{...}

Теперь достаточно поменять класс самой таблички...

Но мой вам совет, лучше использовать CSS3 свойство border-radius. Все нормальные браузеры его поймут, а в осле будут обычные ровные углы. И никаких лишних таблиц, никаких куч css, всего одно свойство

[mishka]

а почему не менять класс у таблички? Вместо того чтобы менять классы у кучи ячеек, можна поменять/добавить класс у таблички, и соответственно переписать стили. Это должно несколько ускорить работу.

Не прочитал пост выше... там человек уже предложил это сделать.

Edited August 26, 2010 by mishka2

[maximspb]

Саныч спасибо. Сделал как Вы сказали. Скорость не увеличилась к сожалению. В любом случае спасибо, будет меньше кода при таком подходе. Заметил что если вместо картинок задавать цвет то все работает гораздо быстрее. Видимо прорисовка картинок ИЕ так притормаживает, а мне от них не избавиться. эх

[Саныч]

Видимо прорисовка картинок ИЕ так притормаживает, а мне от них не избавиться.

осел сам по себе очень медленный браузер, да плюс вы еще картинки в него грузите...

И все-таки я б вам советовал отказаться от таблицы с картинками и преминить CSS3 свойство border-radius к блоку. На своем сайте я именно так и сделал. Но у этого метода есть "небольшой" недостаток, примерно у каждого четвертого пользователя будут обычные ровные углы. По статистике пользователей осла около 25%, но к счастью с каждым месяцем это число уменьшается.

[Great Rash]

Покажите скриншот ваших круглых углов. Есть мнение, что можно все-таки обойтись только бекграундом.

[maximspb]

ну как то так http://habreffect.ru/af0/5d2bf8855/htmlbook.png

при наведении мыши ячейка будет делаться темнее

Edited August 27, 2010 by maximspb

[Great Rash]

Мда, я ошибся. Думал, что у вас просто круглые углы, а там еще и тени...

[maximspb]

еще такой вопрос. я использовал картинки размера 1 на 8 пикселов для фона боковых ячеек и и задавал свойство repeat-x/y. так вот, если вместо размера 1*8 использовать к примеру 40*8 то вроде браузер быстрей прорисовывает. проблема в том что заранее не известна высота ширина ячейки и некоторые фоновые картинки браузеру надо будет отсекать. это нормально или все же лучше делать 1*8 и быть уверенным что браузер повторит фон нужное количество раз

[Searcher]

отсекать быстрее чем прорисовывать кучу маленьких

[maximspb]

отсекать быстрее чем прорисовывать кучу маленьких

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

[Searcher]

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

Ну это уже из разряда "волков бояться - в лес не ходить". На моей памяти с фоном подобного рода траблов ни у кого не было.

[maximspb]

слушайте какая то мистика с offsetHeight. если я делаю контент ячейки с помощью списка UL/LI то offsetHeight один, если с помощью TD то другой, причем внешне высота одинакова и фаирбаг говорит что высота одинакова. я что то пропустил, как такое может быть?

и второй вопрос, а верстать таблицами это совсем плохо? я так смотрю все с дивами мучаются а мне их не осилить

[maximspb]

обнаружил странное. я увеличил размер TD указав line-height: 150% но у меня складывается впечатление что offsetHeight не берет это в расчет. может такое быть?