Отображение с помощью таблицы галереи миниатюр
Отображение графики - неотъемлемая часть World Wide Web. Пусть, например, вы — владелец агентства по недвижимости, и вам нужно показать фотографии домов, выставленных на продажу. Вы хотите, чтобы у посетителей сайта была возможность выбирать полноразмерное изображение, сначала открыв Web-страницу, содержащую миниатюры (уменьшенные изображения) всех выставленных на продажу домов.
Рис. 2.19. Web-страница с миниатюрами для каждого полноразмерного изображения
ПРАКТИКУМ
Чтобы с помощью таблицы отобразить группу изображений-миниатюр, создайте таблицу с отдельной ячейкой под каждую миниатюру. Чтобы связать миниатюру с соответствующим ей полноразмерным изображением, вставьте дескриптор <а>с атрибутом href в каждую ячейку, содержащую изображение-миниатюру. Дескриптор <а> создает ссылку от миниатюры к полноразмерному изображению. Например, следующий код связывает изображение-миниатюру home_i.jpg с Web-страницей, содержащей полноразмерное изображение (page_i.htm):
<а href="page_1.htm"><img src="home__1.jpg"></a>
Когда посетитель сайта щелкает на миниатюре, Web-браузер загружает страницу, содержащую соответствующее полноразмерное изображение. Дескриптор<а> с атрибутом href в приведенном ниже коде связывает миниатюру (заданную атрибутом src в дескрипторе <img>) с соответствующим ей полноразмерным изображением и создает Web-страницу, немного похожую на показанную на рис. 2.19:
<table border="4" cellpadding="O" cellspacing="2"
width="137" bgcolor="#ffccff">
<tr><td align="center" valign="middle"><a href="page_1.htm">
<img src="home_1.jpg"></a></td>
<td align="center" valign="middle"><a href="page_2.htm">
<img src="home_2.jpg"></a></td>
<td align="center" valign="middle"><a href="page_3.htm">
<img src="home_3.jpg"></a></td>
<td align="center" valign="middle"><a href="page_4.htm">
<img src="home_4.jpg"></a></td></tr>
</table>
Как только Web-браузер отобразит страницу с миниатюрами, посетителю остается только щелкнуть на выбранной миниатюре, чтобы отобразить полноразмерное изображение. Например, при щелчке на "миниатюре в верхнем левом углу рисунка 2.19 Web-браузер отобразит полноразмерное изображение, которое показано на рис. 2.20.
Рис. 2.20. В результате щелчка на миниатюре загружается полноразмерное изображение
Поскольку миниатюра — это уменьшенная версия полноразмерного изображения, используйте правила именования, связывающие миниатюры с исходнымиизображениями. Если, например, вы создали и сохранили изображение с именем home__i.jpg, назовите соответствующую миниатюру home__is.jpg. Создание ассоциативных имен файлов помогает быстро идентифицировать файлы, поскольку в стандартном списке файлов имена будут отображаться в алфавитном порядке.