Как создать свой сайт бесплатно? Как сделать сайт своими руками? Как заработать в Интернете? Создание сайтов на заказ.

Запрос должен быть не менее 4-х символов.

RSS-лента

Сегодня:        Добавить в Избранное       Написать Автору        Обмен валют        Оплата сервисов

Как открыть новое окно уменьшенного размера

Автор: Андрей Краснокутский

Дата: 2012-02-05

Открываем новое окно заданного размера

В практической деятельности web-мастера довольно часто возникает необходимость при клике по ссылке или картинке, открыть новое окно уменьшенного размера с заданными параметрами (шириной и высотой) с какой то дополнительной информацией.

Допустим основная статья носит справочный характер, а в тексте Вы упоминаете например обучающий материал. Информацию об этом обучающем материале как раз и можно вынести в отдельное окно. Пример использования Вы видите ниже, кликните по ссылке: Узнать подробности:

Обучающие Видео Курс: Сайт от А до Я: Узнать подробности

Или же Вам понадобилось в отдельном окне меньшего размера открыть увеличенную картинку (изображение). Кликните на изображение ниже:

Кликните, чтобы узнать подробности о Видео Курсе: Сайт от А до Я

Как видите, в результате клика по тексту или по картинке, открывается новое окно с заданными размерами, куда и подгружается новая web-страница. Реализуется такая возможность очень просто, с помощью JavaScript.

А теперь как всегда разбираем код данного скрипта и практическую реализацию.

Между тегами <head> и </head> прописываем код Листинга 1.

Листинг 1.

<script type="text/javascript">
function go(addr) {
window.open(addr,"MyWin", "menubar=yes,width=380,height=430");
}
</script>

Это стандартное подключение JavaScript к web-странице. В параметрахwidth=380, height=430указываем нужный размер нового окна, у меня здесь прописаны: ширина 380, высота 430 пикселей. Вы вписываете свои, нужные Вам размеры нового окна.

Новое окно, которое будет открываться при клике на текст или картинку, это обычная html страничка. Конечно же такую страничку нужно подготовить и добавить в нее нужную информацию (текст или картинку, или и то и другое). И положить ее в любую из папок сайта. В данном случае у меня это файлы: opisanie.html (для текста) и kurs.html (для изображения). Для вызова этой новой страницы, прописываем код Листинга 2 или Листинга 3 между тегами <body> и </body>.

Листинг 2 (открывает файл opisanie.html с текстовым описанием):

<div align="center">Обучающие Видео Курс: Сайт от А до Я: <a href = '' onclick="go('files/20120205/opisanie.html'); return false;">Узнать подробности</a></div>

 

Листинг 3 (открывает файл kurs.html с увеличенным изображением):

<div align="center"><a href = '' onclick="go('files/20120205/kurs.html'); return false;"><img src="files/20120205/bannerdisk.jpg" alt="Кликните, чтобы узнать подробности о Видео Курсе: Сайт от А до Я" width="160" height="169" border="0"></a></div>

В зависимости от того, что Вы хотите вывести в новом окне текст или изображение, выбираете Листинг 2 или Листинг 3. Не забудьте прописать реальный путь до нужных файлов, у меня это: files/20120205/kurs.htmlу Вас соотвественно будет свой путь.

Здесь кстати можно прописать реальный URL адрес, например указать адрес на ресурс в интернете, вот так: http://sait.luksweb.ru

Вот собственно говоря и все. Добавлю, что скрипт работает во всех распространенных браузерах.

Всего Вам доброго.

 

Читайте так же другие наши материалы.

Заработок в Интернете с помощью Почтовых Рассылок.

Как зарегистрироваться в качестве индивидуального предпринимателя (ИП).

Чего нельзя делать продвигая и раскручивая сайт.

Как автоматизировать свой Интернет Бизнес?

Подготовка графики (картинок) для публикации на сайте.

 

Просмотров: 13617


Поделитесь этой информацией со своими друзьями!


Комментарии к этой статье (уроку):

Комментарии добавил(а): Александр
Дата: 2012-02-06

классно просто легко спасибо

Комментарии добавил(а): Larisa
Дата: 2012-02-06

Это очень удобная функция, нужно подумать, где ее применить у себя на блоге! Мне очень нравится!

Комментарии добавил(а): валентина
Дата: 2012-02-06

Замечательно!Всегда нужная и полезная информация.Буду обязательно применять

Комментарии добавил(а): Виктор
Дата: 2012-02-07

Мне понравилось!

Комментарии добавил(а): Сергей
Дата: 2012-02-07

Я рад. Благодарю.

Комментарии добавил(а): Владимир
Дата: 2012-02-07

Спасибо.

Комментарии добавил(а): Solis
Дата: 2012-05-06

Спасибо за скрипт и отдельно за инструкцию по установке. Всё понятно, очень толково. Сделал на нём радио онлайн. Благодаря кешированию врубается практически мгновенно. Радио не "спотыкаетя при переходах, продолжает работать даже после закрытия основного окна(-он). Анкор ссылки показыват по имени стр сайта на которой находимся.

Комментарии добавил(а): Алексей
Дата: 2012-09-02

Пробовал в приложении WebAsyst разместить этот скрипт - не выходит

Комментарии добавил(а): Коля
Дата: 2012-10-09

подскажите пожалуйста .. как сделать так чтобы ширина и высота фиксировались? чтобы нельзя было менять ширину и высоту окна!

Комментарии добавил(а): АндрейК
Дата: 2012-10-10

Коля обратите внимание на значения: width=380,height=430 в Листингах, они как раз и влияют на размер (ширина и высота в пикселях) нового окна, укажите нужные вам цифровые значения.

Комментарии добавил(а): Stas
Дата: 2013-01-27

ПОЛУЧИЛОСЬ ВОТ СМОТРИТЕ http://board.uastend.com

Комментарии добавил(а): Олег
Дата: 2013-04-16

Одного не понял как видео открыть отдельно от браузера. Надо значит написать в head> По отношению к чему выполнить команду?Чтото не доганю чуть-чуть. Если можно Напишите пожалуйста как это например Maxthon делает ,каким скриптом и как?Вот мне реально нужна токая возможность.С начала на странице браузера маленькое окно,а при нажатии на него,чтоб открылось окошко где то 200Х200 пикселов ,если не сложно то очень плиз.

Комментарии добавил(а): Григорий
Дата: 2013-09-22

Просто здорово!

Добавить Ваш комментарий:

Введите сумму чисел с картинки:
Введите сумму чисел

GudzonPartner.com

Новости сайта


05.08.2014
Новый раздел! Платежные системы Интернета. Все о платежных системах и сервисах.

09.08.2013
Новинка! Обзор и Анализ реальных способов заработка. Как и Сколько можно заработать в Интернете? Цифры. Факты. Комментарии.

28.05.2013
Обновилась Партнерка сайта! Зарабатывайте вместе с нами! "Новые товары и рекламные материалы"

25.05.2013
Видео Курс! "Как создать свой Информационный Бизнес в Интернете" Зарабатывайте: от 30000 ++ рублей.

Почтовая рассылка! Бесплатные электронные книги из серии: "Секреты создания сайтов"


Почтовая рассылка

Новинка!
Как реально заработать
в Интернете?
"Обзор видов и способов заработка."

Специальный Отчет:

Специальный Отчет: Как и сколько можно реально заработать в Интернете? Рельные цифры, факты и анализ различных способ заработка в Интернете

В подарок всем подписчикам!

SmartResponder.ru
Ваш e-mail: *
Ваше имя: *

Полный список наших почтовых рассылок!

Домены

Сервис мгновенной регистрации Доменов

Google Adsense



Навигация

Уроки HTML

CSS уроки

Статьи

Инструменты

Шаблоны сайтов

Книги

Украшения

Сайт от А до Я

Заработать в Интернете

Обман в Интернете

Охрана труда

МОДУЛЬНЫЕ КАРТИНЫ

PHP УРОКИ

Услуги

Скрипты

Почтовая Рассылка

SEO

jQuery

Специальная оценка условий труда (СОУТ) - АРМ

Платежные системы Интернета

УРОКИ ФОТОШОП

Секретный раздел

Видео Курсы

Видео курс по созданию сайтов: Сайт от А до Я
С нами сделать сайт
сможет даже Ребёнок!
"Сайт от А до Я"
Узнать сейчас >>>


Хотите заработать?
2-х Уровневая
Партнерская программа!

Присоединяйтесь.


Последние заметки

Модульная картина: Роскошь красного бархата

Модульная картина абстракция: Энергия солнца

Модульная картина: Синие розы

Модульная картина: Водопад

Модульная картина: Орхидеи

Новости сайта

RSS Лента Новостей сайта www.LuksWeb.ru

Наши новости в Твиттере

Архив

2016 год:

2015 год:

2014 год:

2013 год:

2012 год:

2011 год:

2010 год:

2009 год:

2008 год:

Сайты друзей

Регистрация доменов

ООО "ПК "ЛюксСтрой"

Деревянные дома от СПК "Ванда"

Наши ссылки

Если Вам понравился
наш сайт, установите
Нашу ссылку, и
Получите подарки!!!

QR код сайта www.LuksWeb.ru

Наши Аттестаты


Проверить аттестат

 

Аттестован системой Z-PAYMENT
Проверено Z-PAYMENT