Розміщення зображення в таблиці

І ось тоді ми можемо скористатися другим, більш складним способом, вільним від усіх цих недоліків. Ми розрізаємо картинку таким чином, щоб області, при натисканні на які буде здійснено перехід, були б представлені у вигляді окремої картинки (або декількох картинок).

Як правильно різати?

Ну ось, навіщо різати картинку ми з'ясували, тепер перейдемо до питання - як правильно різати?

Після того, як ми виберемо картинку, призначену для нарізки, потрібно уважно її проаналізувати і подумки виділити ті області, які бажано представити окремими фрагментами. Такими областями можуть бути наступні:

• одноколірні області;
• області з повторюваним малюнком і невеликою кількістю квітів;
• невеликі фотографічні області, для яких може виявитися оптимальним стиск методом JPEG;
• графічні посилання (типовий приклад - меню);
• області, для яких буде здійснена підміна зображення за допомогою скрипта. Типове застосування - зміна частини картинки при наведенні на меню. Окремий випадок - зміна виду кнопки меню.

Другим кроком потрібно буде намалювати сітку майбутньої таблиці таким чином, щоб подумки виділені області потрапили в окремі осередки. Причому, не обов'язково робити так, щоб кожен фрагмент картинки потрапив в окрему клітинку. Досить зробити таким чином, щоб в одній комірці можна було розмістити кілька картинок - або все в ряд, або все в стовпчик.

Після того, як ми визначили фрагменти, можна приступати безпосередньо до нарізки. Найзручніше це робити, розставивши напрямні в PhotoShop (або ImageReady) і скориставшись інструментом "Crop". Але, почекайте ще хвилинку, важливе застереження - якщо ви збираєтеся різати складну композиційну картинку, то перед початком бажано перевести все зображення до однієї палітрі, інакше може виявитися так, що фрагменти зображення матимуть не збігаються на краях відтінки кольорів.

Після нарізки (а краще це робити в процесі) потрібно проаналізувати кожен фрагмент на предмет потрібного для нього методу стиску (GIF або JPEG) і кількості необхідних квітів. Одноколірні області можна відразу відкидати, замінивши їх згодом одноколірним однопіксельні GIF-му.

Ну ось, картинка нарізана, і у нас виявилася ціла купа фрагментів, які нам потрібно зібрати воєдино. Ось тепер ми і скористаємося таблицею. Для початку ми повинні написати каркас. Кількість рядків і стовпців в таблиці повинно точно відповідати їх кількості в сітці. Припустимо, що ми розрізали зображення таким чином, що вийшло 3 рядка і 4 шпальти. У цьому випадку каркас буде виглядати так:

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

Чому саме так? Все для тієї ж сумісності з Netscape. Справа в тому, що будь-який пробіл між тегами NN сприймає як якийсь простір, що має ширину. І, як тільки ми поміщаємо в таблицю картинку, не дотримуючись цього правила, так моментально між фрагментами утворюється зазор, крізь який починає просвічувати фон. Особливо добре це видно, якщо краю фрагментів контрастують з фоном сторінки. В Internet Explorer все, зрозуміло, показується нормально.

В ідеалі бажано писати весь код усередині осередку в один рядок, і в цьому випадку ніколи не виникне проблем. Але рядок може виявитися занадто довгою, і це позначиться на зручності читання коду. В цьому випадку можна переносити рядки, розриваючи їх усередині тегів. Саме так я і вчинив у вищенаведеному прикладі.

При приміщенні картинки в таблиці потрібно обов'язково прописувати висоту і ширину для кожного фрагмента, щоб броузер міг починати отрисовку сторінки, не чекаючи, коли завантажить всі фрагменти. Також обов'язково прописування атрибутів border = "0" і alt. Приклад правильного коду наведений нижче:

Якщо фрагмент повинен одночасно служити посиланням (наприклад, це пункт меню), то зображення потрібно укласти в тег . не забуваючи, що між тегами не можна залишати пробілів: