Собираем картинку

Ну вот, картинка нарезана, и у нас оказалась целая куча фрагментов, которые нам нужно собрать воедино. Вот теперь мы и воспользуемся таблицей. Для начала мы должны написать каркас. Количество строк и столбцов в таблице должно точно соответствовать их количеству в сетке. Предположим, что мы разрезали изображение таким образом, что получилось 3 строки и 4 столбца. В этом случае каркас будет выглядеть так: <table cellpadding="0" cellspacing="0" > <tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr>

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

Неправильно <td> <a href="http://www.somewhere.com"> <img src="pic/somepic.gif" width="100" height="20" alt="" > </a> </td>

Правильно <td><a href="http://www.somewhere.com"><img src="somepic.gif" width="100" height="20" alt="" ></a></td>

Почему именно так? Все для той же совместимости с Netscape. Дело в том, что любой пробел между тэгами NN воспринимает как некое пространство, имеющее ширину. И как только мы помещаем в таблицу картинку, не соблюдая это правило, так моментально между фрагментами образуется зазор, сквозь который начинает просвечивать фон. Особенно хорошо это видно, если края фрагментов контрастирует с фоном страницы. В Internet Explorer все, разумеется, показывается нормально.

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

При помещении картинки в таблицы нужно обязательно прописывать высоту и ширину для каждого фрагмента, чтобы броузер мог начинать отрисовку страницы не дожидаясь, когда скачаются все фрагменты. Также обязательно прописывание атрибутов и alt. Пример правильного кода приведен ниже: ... <tr> <td><img src="pic/pic-1-1.gif" width="100" height="20" alt="фрагмент 1"></td> <td><img src="pic/pic-1-2.gif" width="100" height="20" alt="фрагмент 2"></td> <td><img src="pic/pic-1-3.gif" width="100" height="20" alt="фрагмент 3"></td> <td><img src="pic/pic-1-4.gif" width="100" height="20" alt="фрагмент 4"></td> </tr> ...

Если фрагмент должен одновременно служить ссылкой (например это пункт меню), то изображение нужно заключить в тэг <a>, не забывая, что между тэгами нельзя оставлять пробелов: <td><a href="http://www.somewhere.com"><img src="pic/somepic.gif" width="100" height="20" alt="" ></a></td>

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

Содержание раздела