Таблицы-списки: добавление изображений

03.04.2015

Таблицы-списки: добавление изображений. Одним из существенных недостатков таблиц, сделанных из списков <SELECT>, является то, что в эти списки невозможно вставить картинки, в отличие от HTML-таблиц и более быстрых DIV-таблиц. Признаться, этот момент меня сильно расстраивал, так как не было возможности использовать таблицы-списки для отображения минифотографий товаров, что достаточно удобно для покупателей. Однако, недавно меня посетило вдохновение и частично данная проблема была решена.

Итак, задача состоит в том, чтобы можно было при работе со списком отображать как-то и минифотографии товаров.

Рис. 1. Исходный список.

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

Увеличить высоту строки списка до высоты изображения
Произвести синхронизацию прокрутки элементов так, чтобы каждая строка в списка всегда находилась напротие соответствующей ей картинки

Попробуем изменить высоту строки в списке. Последние версии FireFox, Opera, Яндекс и Chrom позволяют это сделать легко, а вот Internet Explorer не поддерживает эту возможность, что нас - пользователей адекватных браузеров - совершенно не касается.

Рис. 2. Список с увеличенной высотой первой записи.

Рядом со списком размещаем слой с картинками.

Нет картинки

Рис. 3. Список и слой с картинками.

Осталось написать немного кода на javascript и... сталкиваемся в очередной раз с чудесами браузеров. В FireFox всё исключительно чудесно, а в браузерах Opera, Chrom и Яндекс наблюдается смещение.

FireFox, как правильный браузер, четко выставляет высоту строки списка заданному значению, а вот остальные по недостижимым для разума обстоятельствам делают высоту строки на один пиксель больше! Например, вместо прописанной в стилях высоты строки 72 px выставляют 73px! Придётся прописывать высоту в зависимости от используемого браузера.

Оглавление ←→