ВОСЕМНАДЦАТЫЙ УРОК

...

Фотоальбом во фреймах

Знаете, друзья, сегодня мне хочется начать урок со слов благодарности. И эти слова направлены к Вам. Столько добрых отзывов и пожеланий я не слышала, наверное,¬и за всю свою долгую жизнь. Представляете, полезла сегодня в свой почтовый ящик, а там письма с добрыми словами. Иду в гостевую - и там меня ждут теплые слова. И ведь не только благодарят. Пишут и замечания, и ошибки находят. И я тоже им благодарна. Что не прошли мимо, не фыркнули, типа ну ламерша...

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

Вообще-то я страшно стеснительна, но тут вот... разговорилась. И получилось не вступление, а целое выступление. Ну, ладно, довольно лирики...

Для нашего фотоальбома достаточно будет двух фреймов. Левый фрейм будет содержать одну большую фотографию и размером он будет в три раза больше правого, а во втором (правом) фрейме будут находиться уменьшенные копии всех фотографий. По умолчанию в левый фрейм будет загружена фотография foto1.

Исходный файл назовем fotoalbom.html, и вот его код:

<FRAMESET cols="3*,*"> <FRAME src="foto1.jpg" name="big" scrolling="no"> <FRAME src="small.html"> </FRAMESET>

Видите, для большого фрейма я запретила полосу прокрутки (scrolling="no"), зато в маленьком фрейме эта полоса просто необходима! И мы можем добавлять и добавлять туда все новые и новые фотографии!

Надеюсь, у вас уже подготовлены для каждой фотографии большое и маленькое изображение? Чтобы не запутаться, я вот взяла и назвала большие фотографии foto1.jpg; foto2.jpg; foto3.jpg..., а их уменьшенные копии соответственно - foto1_small; foto2_small; foto3_small... И тогда файл small.html будет такой:

<html lang="ru"> <HEAD> </HEAD> <BODY> <h4>Мои фото</h4> <a href="foto1.jpg" target="big"><img src="foto1_small.jpg"></a><br> Первая фотка<br> <a href="foto2.jpg" target="big"><img src="foto2_small.jpg"></a><br> Вторая фотка<br> <a href="foto3.jpg" target="big"><img src="foto3_small.jpg"></a><br> Третья фотка<br> <a href="foto4.jpg" target="big"><img src="foto4_small.jpg"></a><br> Четвертая фотка<br> <a href="foto5.jpg" target="big"><img src="foto5_small.jpg"></a><br> Пятая фотка<br> <a href="foto6.jpg" target="big"><img src="foto6_small.jpg"></a><br> Шестая фотка<br> </BODY> </HTML>

Ну и проверю, что получится при загрузке файла fotoalbom.html (рис. 90):


Рис. 90. Это я много лет назад. И не такая уж я была тощая!

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

А вы, если будете не только стараться, но и действовать как профессионалы, обязательно укажете размеры фотографии с помощью атрибутов "width" и "height".

А я пошла обдумывать тему следующего урока!

К списку всех уроков

(В. Ахметзянова, 2005 г)