Знаете, друзья, сегодня мне хочется начать урок со слов благодарности. И эти слова направлены к Вам. Столько добрых отзывов и пожеланий я не слышала, наверное, и за всю свою долгую жизнь. Представляете, полезла сегодня в свой почтовый ящик, а там письма с добрыми словами. Иду в гостевую - и там меня ждут теплые слова. И ведь не только благодарят. Пишут и замечания, и ошибки находят. И я тоже им благодарна. Что не прошли мимо, не фыркнули, типа ну лузерерша...
А есть и такие, которые видят, что у меня что-то не получается, помогают своими советами, даже пишут где, в каком файле что исправить. Так что это уже не только мои уроки. Это народные уроки. И знаете, легче жить, легче работать и вообще легко очень на сердце становится.
Вообще-то я страшно стеснительна, но тут вот... разговорилась. И получилось не вступление, а целое выступление. Ну, ладно, довольно лирики...
Для нашего фотоальбома достаточно будет двух фреймов. Левый фрейм будет содержать одну большую фотографию и размером он будет в три раза больше правого, а во втором (правом) фрейме будут находиться уменьшенные копии всех фотографий. По умолчанию в левый фрейм будет загружена фотография 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>
<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:
Вот, я старалась и у меня получилось все правильно. При нажатии маленькой фотографии в правом фрейме, в левом фрейме загружается полноценное изображение, вытесняя собой предыдущее фото. Вот и все!
А вы, если будете не только стараться, но и действовать как профессионалы, обязательно укажете размеры фотографии с помощью атрибутов "width" и "height".
А я пошла обдумывать тему следующего урока!