Урок. Всплывающие подсказки при нажатии.
Серия дополнительных уроков.
Доброго времени суток!
Данный урок поможет создать всплывающие окна подсказки, которые
появляются при нажатии на ссылку.
Вот пример того, что мы будем делать (нажмите на ссылку ниже):
X Привет! Понравилось?
Здесь вы с лёгкостью сможете разместить всё,
что вам нужно.
Например здесь можно разместить:
текстовое сообщение, фото или картинку с пояснениями,
голосование, форму контактов на сайте,
форму подписки (например от Smartresponder),
сделать отдельную страницу (например о сайте).
Ширена и рамка окна с лёгкостью меняется
на ваш вкус и под ваш дизайн.
Для закрытия Окна подсказки нажмите
крестик в правом углу.
Просмотреть пример на учебном сайте: http://showsbike.narod.ru
Для того, чтобы сделать такую вам понадобится
подправить исходный код и вставить его на сайт:
Данное всплывающее окно сделано на основе простого html кода и не содержит
не каких скриптов, поэтому его с лёгкостью можно вставить абсолютно на любой сайт.
HTML Код Окна Подсказки:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<!-- Created by Aleksandr Novikov checked by http://infopodsolnux.ru Copyright © 2011. -->
<meta http-equiv="Content-Type" content="text/html;charset=cp-1251">
<title>Всплывающая Подсказка</title>
<style type="text/css">
<!--
.dlink {
color: #0000FF; /* цвет ссылки */
font-weight: bold; /* указывает, что текст ссылки жирный */
font-family: Verdana, Arial, Helvetica, sans-serif; /* семейство шрифта ссылки */
font-size: 16px; /* размер шрифта ссылки */
}
#wind {
position: absolute;
width: 450px; /* ширина всплывающего окна */
left: 32%; /* отступ от левого края экрана */
top: 100px; /* отступ с верху экрана */
border:solid #A0A050 3px; /* цвет и толщина рамки окна*/
display: none;
z-index: 10;
overflow: hidden;
background-color:#ffffff; /* цвет фона внутри окна, стоит белый */
color:#000000; /* цвет текста внутри окна, стоит чёрный */
text-align:center; /* выравнивает весь текст в окне по центру */
padding:5px;
}
-->
</style>
</head>
<body>
<div><a href="#" title="Всплывающее окно" class="dlink" onClick="document.getElementById('wind').style.display='block'; return false;">Пояснения</a></div>
<div id="wind">
<div align="center">
<table cellspacing="0" align="right">
<tr><td style="padding: 0 3 0 3; background-color: #A0A050;
/* цвет кнопки закрыть #A0A050 можете вставить свой */
font-family: Verdana; font-size: 10pt; color: #ffffff; font-weight: bold;" onClick="document.getElementById('wind').style.display='none'; return false;" onMouseOver="this.style.cursor='pointer'" onMouseOut="this.style.cursor='default'">X</td></tr>
</table>
Здесь на месте этого текста ставьте свой текст или html код.
</div>
</div>
</body>
</html>
Что вам нужно сделать:
1) Скопировать данный код себе в блокнот или в любой редактор сайта.
(Например в KompoZer).2) Внести изменения в код смотрите я специально вставил комментарии
их удалять не надо, они помогут вам не запутаться в будущем.3) С помощью редактора сайтов, или с помощью редактора текста в конструкторе на Народе
создать свой текст или описание, и взять от туда код в html формате.4) Вставить полученный html код для окна прямо вместо слов:
"Здесь на месте этого текста ставьте свой текст или html код."5) Сохранить ваш код в блокноте или в редакторе с расширением в конце .html
Например: podskazka.html
6) Проверьте работу вашего окна подсказки перейдя в Total Comander нажав на ваш podskazka.html (в браузере по умолчанию у вас откроется ваша страница с подсказкой,
см ссылку в левом углу жмите на неё)7) Если всё работает вставляем полученный код к себе на сайт.
(Для этого идёте в конструктор сайтов и вставляете данный код с помощью вставки произвольного кода в нужное место вашего сайта)
Видеоурок с пояснениями.
Специально для вас сделал форму контактов для вашего сайта,
скачать её можно по ссылке ниже.
Всё, что вам нужно сделать, это скопировать код формы, вставить её в нужное место
на сайте и зарегистрировать её на сайте:
Другие дополнительные уроки находятся
http://you-sayt.narod.ru/uroki/dop-mat.html
Теперь радуем себя и посетителя сайта!
Если у вас остались вопросы или есть трудности то не забывайте у нас теперь есть Форум, где всегда можно спросить помощи у автора и у других посетителей.
Там есть специальный раздел посвящённый Созданию сайта в конструкторе на Яндекс Народе.
Ссылка на форум в конце страницы в меню.
Полезный сайтик по html коду.
Удачи в САЙТА СТРОЕНИИ!
++ Фабрика Web сайтов Для Лентяев ++
 |
Как насчет того, чтобы стать уверенным пользователем персонального компьютера (ПК) и интернета, выучить принципы работы, файловую структуру и такие программы как Word, Winrar, Photoshop, NOD32, Total Commander, The BAT, азы работы с браузерами. Комплект курсов: "Четкое пошаговое систематизированное видеообучение на компьютере" от Михаила Арсланова поможет вам!
|
У нас на сайте можно подписаться на обучающий видеокурс "Делаем Сайт Самостоятельно На Яндекс Народ"
Вы узнаете: Как создать сайт на народе. Изучите создание сайта на народе в конструкторе сайтов.
Научитесь, как сделать сайт бесплатно и быстро.
Copyright © 2010-2012. Александр Новиков. Все права защищены.
