УЧЕБНИК HTML для новичков - Фотоальбом во фреймах

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

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

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

Листинг 33. Файл fotoalbom.html

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

Надеюсь, у вас уже подготовлены для каждой фотографии большое и маленькое изображение? Чтобы не запутаться, я вот взяла и назвала большие фотографии

foto1.jpg,
foto2.jpg,
foto3.jpg,
foto4.jpg,

а их уменьшенные копии соответственно -

foto1_small.jpg,
foto2_small.jpg,
foto3_small.jpg,
foto4_small.jpg.

Обратите внимание, что все фотографии хранятся в папке foto. И тогда файл small.html будет такой:

Листинг 34. Файл small.html

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

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

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

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

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