|
|
|
|
Как открыть новое окно уменьшенного размера Автор: Андрей Краснокутский Дата: 2012-02-05 Открываем новое окно заданного размераВ практической деятельности web-мастера довольно часто возникает необходимость при клике по ссылке или картинке, открыть новое окно уменьшенного размера с заданными параметрами (шириной и высотой) с какой то дополнительной информацией. Допустим основная статья носит справочный характер, а в тексте Вы упоминаете например обучающий материал. Информацию об этом обучающем материале как раз и можно вынести в отдельное окно. Пример использования Вы видите ниже, кликните по ссылке: Узнать подробности: Обучающие Видео Курс: Сайт от А до Я: Узнать подробности
Или же Вам понадобилось в отдельном окне меньшего размера открыть увеличенную картинку (изображение). Кликните на изображение ниже:  Как видите, в результате клика по тексту или по картинке, открывается новое окно с заданными размерами, куда и подгружается новая web-страница. Реализуется такая возможность очень просто, с помощью JavaScript. А теперь как всегда разбираем код данного скрипта и практическую реализацию. Между тегами <head> и </head> прописываем код Листинга 1. Листинг 1.
Это стандартное подключение JavaScript к web-странице. В параметрахwidth=380, height=430указываем нужный размер нового окна, у меня здесь прописаны: ширина 380, высота 430 пикселей. Вы вписываете свои, нужные Вам размеры нового окна. Новое окно, которое будет открываться при клике на текст или картинку, это обычная html страничка. Конечно же такую страничку нужно подготовить и добавить в нее нужную информацию (текст или картинку, или и то и другое). И положить ее в любую из папок сайта. В данном случае у меня это файлы: opisanie.html (для текста) и kurs.html (для изображения). Для вызова этой новой страницы, прописываем код Листинга 2 или Листинга 3 между тегами <body> и </body>. Листинг 2 (открывает файл opisanie.html с текстовым описанием):
Листинг 3 (открывает файл kurs.html с увеличенным изображением):
В зависимости от того, что Вы хотите вывести в новом окне текст или изображение, выбираете Листинг 2 или Листинг 3. Не забудьте прописать реальный путь до нужных файлов, у меня это: files/20120205/kurs.htmlу Вас соотвественно будет свой путь. Здесь кстати можно прописать реальный URL адрес, например указать адрес на ресурс в интернете, вот так: http://sait.luksweb.ru Вот собственно говоря и все. Добавлю, что скрипт работает во всех распространенных браузерах. Всего Вам доброго.
Читайте так же другие наши материалы. Заработок в Интернете с помощью Почтовых Рассылок. Как зарегистрироваться в качестве индивидуального предпринимателя (ИП). Чего нельзя делать продвигая и раскручивая сайт. Как автоматизировать свой Интернет Бизнес? Подготовка графики (картинок) для публикации на сайте.
Просмотров: 20199 Поделитесь этой информацией со своими друзьями! Комментарии к этой статье (уроку): Комментарии добавил(а): Александр классно просто легко спасибо Комментарии добавил(а): Larisa Это очень удобная функция, нужно подумать, где ее применить у себя на блоге! Мне очень нравится! Комментарии добавил(а): валентина Замечательно!Всегда нужная и полезная информация.Буду обязательно применять Комментарии добавил(а): Виктор Мне понравилось! Комментарии добавил(а): Сергей Я рад. Благодарю. Комментарии добавил(а): Владимир Спасибо. Комментарии добавил(а): Solis Спасибо за скрипт и отдельно за инструкцию по установке. Всё понятно, очень толково. Сделал на нём радио онлайн. Благодаря кешированию врубается практически мгновенно. Радио не "спотыкаетя при переходах, продолжает работать даже после закрытия основного окна(-он). Анкор ссылки показыват по имени стр сайта на которой находимся. Комментарии добавил(а): Алексей Пробовал в приложении WebAsyst разместить этот скрипт - не выходит Комментарии добавил(а): Коля подскажите пожалуйста .. как сделать так чтобы ширина и высота фиксировались? чтобы нельзя было менять ширину и высоту окна! Комментарии добавил(а): АндрейК Коля обратите внимание на значения: width=380,height=430 в Листингах, они как раз и влияют на размер (ширина и высота в пикселях) нового окна, укажите нужные вам цифровые значения. Комментарии добавил(а): Stas ПОЛУЧИЛОСЬ ВОТ СМОТРИТЕ http://board.uastend.com Комментарии добавил(а): Олег Одного не понял как видео открыть отдельно от браузера. Надо значит написать в head> По отношению к чему выполнить команду?Чтото не доганю чуть-чуть. Если можно Напишите пожалуйста как это например Maxthon делает ,каким скриптом и как?Вот мне реально нужна токая возможность.С начала на странице браузера маленькое окно,а при нажатии на него,чтоб открылось окошко где то 200Х200 пикселов ,если не сложно то очень плиз. Комментарии добавил(а): Григорий Просто здорово! Добавить Ваш комментарий: |
Новости сайта Домены 
Google Adsense |
Навигация
Видео Курсы
Последние заметки
Новости сайта
Архив 2016 год: 2015 год: 2014 год: 2013 год: 2012 год: 2011 год: 2010 год: 2009 год: 2008 год: Сайты друзей Наши ссылки
Если Вам понравился  Наши Аттестаты
|
|
Разрешается полное или частичное копирование материалов сайта с обязательным |