Еловков, HTML, CSS, JavaScript, учебники, фото, проги, софт, полезно, бесплатно, дорог, ПОС, ППР, СНиП, ГОСТ, ВСН
разработка и дизайн сайта: Tur , особая благодарность сайту gostemilov.ru и его админитратору Gostemilov , GRAFу , и другим, При копировании материалов с настоящего сайта - ссылка на сайт обязательна Супер сайт - QWER.h15.ru - Все для вебмастера QWER.h15.ru - все для организации строительства дорог

...:   раздел: Главная / Статьи / Фотоальбом   :...
главная тема раздела:..
 
..:материалы раздела

как оформить фотоальбом

 

Вы видели, как на некоторых сайтах при нажатии на маленькое изображение фотографии открывается сама фотография в новом окне, но в браузере при этом нет ни полос прокрутки ни строки меню ни строки состояния? Теперь рассмотрим, как это сделать:

Эскиз рисунка:

ну тут все просто - или в фотошопе изменяете размер до нужного а потом на в меню "файл" выбираете "сохранить для web" , или в ASD See создание эскизов (по крайней мере в 5м есть а вот в 8м я что-то не нашел)

В итоге имеем:
- 5 фотографий (например 001.jpg ... 005.jpg)
- 5 маленьких изображений (например 001_sm.jpg ... 005_sm.jpg)

Код альбома:

сразу после тега <body> пишем скрипт:

<script language="JavaScript"><!--
function show(name)
{
open(name,'_blanc','left=80,top=100,
scrollbars=no,toolbar=no,menubar=no,
status=no,resizable=no,width=630,height=410');
}
// --></script>

 

!! то что заключено между { и } пишем без пробелов и переносов

а код каждой ссылки будет выглядеть так:

<a href="javascript:show('путь_ссылки/001.jpg')">
<img src="путь_к_малой_фотке/001_sm.jpg" alt="Увеличить" border="0" wight="ширина" height="высота"></a>

 

Внимание! Не забывайте про регистр имен и РАСШИРЕНИЙ!

   Теперь, что же мы написали:

left=80,top=100 - местоположение нового окна
scrollbars=no,toolbar=no,menubar=no,
status=no,resizable=no
- запрет всех полос прокрутки, панелей и т.п.
width=630,height=410 - размер нового окна

'путь_ссылки/001.jpg' - путь для открытия оригинала фотки
src="путь_к_малой_фотке/001_sm.jpg" - путь к эскизу (миниатюре)
alt="Увеличить" - надпись, появляющаяся при наведении курсора на эскиз
wight="ширина" height="высота" - размер эскиза

PS:

Все то же самое можно проделать и с текстовыми ссылками и вызывать можно не изображения а html страницы (например можно сделать тыкие странички для скачивания с сайта - тогда для каждого файла предлагаемого для скачки у вас будет своя страничка - РЕКОМЕНДУЮ для каждой из них прописывать свой подробный титул - поисковики на них хорошо реанируют)

 

!! ВНИМАНИЕ Убедительная просьба! прописывайте alt- ы к кнопкам! Многие ходят по сети с отключенными рисунками и когда нет альтов очень неудобно

 

 

©Tur 20-дек-05


 

 

 

 

 

 

  Яндекс цитирования     Rambler's Top100     Rambler's Top100     Рейтинг@Mail.ru


Сайт управляется системой uCoz