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

03.04.2015
Таблицы-списки: добавление изображений. Одним из существенных недостатков таблиц, сделанных из списков <SELECT>, является то, что в эти списки невозможно вставить картинки, в отличие от HTML-таблиц и более быстрых DIV-таблиц. Признаться, этот момент меня сильно расстраивал, так как не было возможности использовать таблицы-списки для отображения минифотографий товаров, что достаточно удобно для покупателей. Однако, недавно меня посетило вдохновение и частично данная проблема была решена.
Итак, задача состоит в том, чтобы можно было при работе со списком отображать как-то и минифотографии товаров.
Рис. 1. Исходный список.
Список не поддерживает картинки, поэтому необходимо рядом с этим списком разместить что-то, что поддерживает изображения и синхронизировать эти два элемента управления. Для этого нужно:
  1. Увеличить высоту строки списка до высоты изображения
  2. Произвести синхронизацию прокрутки элементов так, чтобы каждая строка в списка всегда находилась напротие соответствующей ей картинки
Попробуем изменить высоту строки в списке. Последние версии FireFox, Opera, Яндекс и Chrom позволяют это сделать легко, а вот Internet Explorer не поддерживает эту возможность, что нас - пользователей адекватных браузеров - совершенно не касается.
Рис. 2. Список с увеличенной высотой первой записи.
Рядом со списком размещаем слой с картинками.
Нет картинки
Нет картинки
Нет картинки
Нет картинки
Нет картинки
Нет картинки
Нет картинки
Нет картинки
Нет картинки
Нет картинки
Рис. 3. Список и слой с картинками.
Осталось написать немного кода на javascript и... сталкиваемся в очередной раз с чудесами браузеров. В FireFox всё исключительно чудесно, а в браузерах Opera, Chrom и Яндекс наблюдается смещение.
FireFox, как правильный браузер, четко выставляет высоту строки списка заданному значению, а вот остальные по недостижимым для разума обстоятельствам делают высоту строки на один пиксель больше! Например, вместо прописанной в стилях высоты строки 72 px выставляют 73px! Придётся прописывать высоту в зависимости от используемого браузера.
Оглавление
Copyright © 2016