сайт клана[X]gta
Каталог статей

реклама

друзья сайта


Онлайн всего: 1
Гостей: 1
Пользователей: 0
Главная » Статьи » Интернет » Сайты

Создание всплывающего окна на сайте
Рассмотрим создание вспомогательных вплывающих окошек по клику и при наведении. На самом деле область применения всплывающих аякс и просто окошек с заданными размерами очень широка. Их можно применять для вывода подсказок, для подгрузки материала или картинок, для игр в окнах и т.д

Вызов окна с игрой по клику на превью логотипа игры

лого


Код:
<div align="center"><a href="javascript://"onclick="window.open('http://webanet.ucoz.ru/games/psix.swf','up','scrollbars=1,top=0,left=0,resizable=1,width=680,height=580');return false;"><img alt="лого" style="margin: 0pt; padding: 0pt; border: 0pt none; width: 160px; height: 120px;" src="http://webanet.ucoz.ru/_sf/50/5076.jpg" title="нажми чтобы поиграть"></a></div>


где
Код:
width=680,height=540
размеры всплывающего окна с игрой
Код:
width: 160px; height: 120px
размеры логотипа
Код:
javascript://"onclick="window.open(
вызов окна по клику

Вплывающая подсказка при наведении на ссылку

тут должно быть много много текста пока не дойдет до слова ссылко далее на водим на слово ссылко, читаем всплывающую подсказку и идем дальше

Код:
<a href="javascript://"onmouseover="new _uWnd('ajax','заголовок','200','200',{close:true,header:true,nomove: false,fixed:true},'тут должен быть поясняющий текст')">ссылко</a>


где
Код:
'заголовок'
это заголовок вашего аякс окошка
Код:
'200','200'
размеры
Код:
close:true и fixed:true
присутствие закрывающего значка и возможности закрыть окно и фиксация по отношению ко всему экрану, то есть аякс окошко стоит на месте, а сайт под ним прокручивается
Код:
header:true
заголовок

Вызов всплывающего окна с картинкой в полном размере при наведении на превью

лого


Код:
<a href="javascript://"onmouseover="window.open('http://webanet.ucoz.ru/bat/8.jpg','up','scrollbars=1,top=0,left=0,resizable=1,width=680,height=580');return false;"><img alt="лого" style="margin: 0pt; padding: 0pt; border: 0pt none; width: 160px; height: 120px;" src="http://webanet.ucoz.ru/_sf/50/5076.jpg" title="полный размер"></a>


Вызов аякс окна с картинкой в полном размере по наведению

лого


Код:
<a href="javascript://"onmouseover="new _uWnd('ajax','картинка','681','583',{autosize:false,modal: false,close:true,header:true,nomove: false,fixed:true},{xml:false,url:'http://webanet.ucoz.ru/zerg/retio.html'})"><img alt="лого" style="margin: 0pt; padding: 0pt; border: 0pt none; width: 160px; height: 120px;" src="http://webanet.ucoz.ru/_sf/50/5076.jpg" title="полный размер"></a>


Код:
modal: false
если перевести значение в true, то у вас будет модальное аякс окно, при открытии которого свободная часть экрана будет затеняться

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

Код:
<img border="0" src="http://webanet.ucoz.ru/zerg/retio.html">
получить ссылку и прописать в код

Тоже самое можно сделать не при наведении. а вызов по клику. Для этого в коде нужно изменить
Код:
onmouseover на onclick

Источник: http://webanet.ucoz.ru/forum/27-249-1
Категория: Сайты | Добавил: klanX (21.07.2012)
Просмотров: 789 | Комментарии: 2 | Теги: всплывающие окна, Аякс, на сайт, баннер | Рейтинг: 0.0/0
Всего комментариев: 2
2 skimbos_2002  
0
Куда вставлять код

1 skimbos_2002  
0
куда вставлять код,

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Форма входа

Мы в контакте

Block title

праздники дня

Поиск

заработай

...

Block title

до конца света

миничат

500