Если вы веб-мастер, который имеет дело с галереями изображений, запишите этот умный сценарий. Это дает вам решение очень распространенной проблемы — как изменить размер всплывающего окна, чтобы оно соответствовало размерам изображения, отображаемым в нем. Скрипт работает в NS 4/5/6/7 и IE 4/5/6.
Прежде всего вам понадобится одна главная HTML-страница, которая будет содержать ссылки на полноразмерные изображения в вашей галерее:
<HTML> <HEAD> <TITLE>The Image Gallery</TITLE> <script language="Javascript"> function PopupPic(sPicURL) { window.open( "popup.htm?"+sPicURL, "", "resizable=1,HEIGHT=200,WIDTH=200"); } </script> </HEAD> <BODY bgcolor="#FFFFFF"> <a href="javascript:PopupPic('Image1.gif')">Image 1</a><br> <a href="javascript:PopupPic('Image2.gif')">Image 2</a><br> <a href="javascript:PopupPic('Image3.gif')">Image 3</a><br> </BODY> </HTML> Давайте немного изучим приведенный выше код. У нас есть простая HTML-страница, которая содержит пару ссылок и определяет простую функцию Javascript: PopupPic() . Нажав на любую из ссылок на этой странице, вы PopupPic() функцию PopupPic() . Эта функция действительно проста: единственное, что она делает, это создает всплывающее окно браузера и загружает в него страницу popup.htm.
Хитрость заключается в том, что мы передаем URL-адрес изображения (относительно расположения веб-страницы галереи изображений) в строке запроса при создании всплывающего окна:
window.open( "popup.htm?"+sPicURL, "", "resizable=1,HEIGHT=200,WIDTH=200");
Теперь взгляните на код страницы popup.htm:
<HTML> <HEAD> <TITLE>Fit the Pic Script</TITLE> <script language='javascript'> var arrTemp=self.location.href.split("?"); var picUrl = (arrTemp.length>0)?arrTemp[1]:""; var NS = (navigator.appName=="Netscape")?true:false; function FitPic() { iWidth = (NS)?window.innerWidth:document.body.clientWidth; iHeight = (NS)?window.innerHeight:document.body.clientHeight; iWidth = document.images[0].width - iWidth; iHeight = document.images[0].height - iHeight; window.resizeBy(iWidth, iHeight); self.focus(); }; </script> </HEAD> <BODY bgcolor="#000000" onload='FitPic();' topmargin="0" marginheight="0" leftmargin="0" marginwidth="0"> <script language='javascript'> document.write( "<img src='" + picUrl + "' border=0>" ); </script> </BODY> </HTML>
Первое, что должно привлечь наше внимание, это то, что мы используем код Javascript, который выполняется непосредственно при загрузке страницы:
var arrTemp=self.location.href.split("?"); var picUrl = (arrTemp[1].length>0)?arrTemp[1]:""; var NS = (navigator.appName=="Netscape")?true:false;
Сначала мы получаем строку URL-адреса страницы и разделяем ее символом « ? ». Результат этого разделения хранится в переменной массива arrTemp .
Во второй строке мы проверяем, имеет ли второй элемент нашего временного массива — arrTemp[1] — длину больше 0, и если это правда, мы присваиваем значение этого второго элемента picURL переменной picURL .
В третьей строке мы присваиваем true переменной NS, если браузер Netscape, в противном случае мы присваиваем false. Как вы, возможно, уже догадались, переменная PicURL содержит относительный URL-адрес изображения, которое будет отображаться на странице popup.htm.
После того, как у нас есть переменная PicURL , мы можем легко записать изображение в тело document.write используя document.write :
document.write( "<img src='" + picUrl + "' border=0>" );
После полной загрузки страницы в браузер запускается событие Load , и поскольку мы используем обработчик события onLoad, FitPic() функция FitPic() . Первые 2 строки этой функции определяют ширину и высоту окна браузера (в зависимости от браузера). Следующие 3 строки, однако, являются наиболее важными в этой функции. Давайте хорошо посмотрим на них:
iWidth = document.images[0].width - iWidth; iHeight = document.images[0].height - iHeight; window.resizeBy(iWidth, iHeight);
После полной загрузки страницы мы можем получить доступ к коллекции изображений документа, таким образом получая доступ к свойствам изображения. Поскольку у нас есть только одно изображение на нашей странице, и поскольку коллекция изображений начинается с нуля, изображение доступно с document.images[0] — таким образом, мы можем получить ширину и высоту изображения.
Затем мы вычитаем начальную ширину браузера из фактической ширины изображения — в результате получаем число, на которое необходимо изменить ширину браузера. Мы делаем то же самое с начальной высотой браузера и фактической высотой изображения, чтобы определить количество пикселей, на которое мы должны изменить размер браузера, чтобы соответствовать изображению.
Третья строка — это фактическое изменение размера, выполненное встроенной в resizeBy() функцией resizeBy() . Если вы не знакомы с resizeBy() , вот краткое объяснение.
По определению, эта функция изменяет размер текущего окна браузера на определенную величину. Требуется 2 параметра: window.resizeBy(X, Y):
- X — количество пикселей для увеличения окна по горизонтали
- Y — количество пикселей для увеличения окна по вертикали
Следующая строка уменьшает ширину окна на 10 пикселей и увеличивает его высоту на 13 пикселей:
window.resizeBy(-10, +13);
Последняя строка в нашей функции FitPic() фокусируется на всплывающем окне.
Итак, чтобы подвести итог, как работает скрипт, мы передаем URL-адрес с изображением в popup.htm (popup.htm? Images / Image1.gif), затем записываем тег image в тело страницы с помощью document.write, и когда страница загружается, мы вызываем FitPic() , который изменяет размер окна браузера до размера изображения.
Чтобы увидеть наш скрипт в действии, нажмите здесь .