Совет 1: Как сделать всплывающую картинку

В интернете становится все более популярными pop-up или pop-under окна. Или проще выражаясь, всплывающие картинки. Многим владельцам сайтов часто приходится их делать в рекламных целях, но далеко не все знают алгоритм их создания.
Как сделать всплывающую картинку
Вам понадобится
  • - HTML редактор;
  • - блокнот;
  • - хостинг.
Инструкция
1
Создайте или откройте новую веб-страницу в HTML или текстовом редакторе. Вы можете использовать для этой цели такие популярные программы, как Dreamweaver, Expression Web и другие. Если вы только делаете первые шаги в языке программирования HTML, воспользуйтесь обычным «блокнотом».
2
Вставьте следующий код между тегами "head" и "/head:

" < style type="text/css">
.thumbnail {position: relative; z-index: 0;}
.thumbnail:hover {background-color: transparent; z-index: 50;}
.thumbnail span {/*CSS for enlarged image*/ position: absolute; background-color: lightyellow; padding: 5px; left: -1000px; border: 1px dashed gray; visibility: hidden; color: black; text-decoration: none;}
.thumbnail span img{ /*CSS for enlarged image*/ border-width: 0; padding: 2px;}
.thumbnail:hover span{ /*CSS for enlarged image on hover*/ visibility: visible; top: 0; left: 65px; /*position where enlarged image should offset horizontally */}
< / style > "
3
Отрегулируйте горизонтальное смещение всплывающего изображения, изменив значение в последней строке кода. Выделите пространство между тегами "body" и "/ body, там, где вы хотите, чтобы изображение появилось на веб-странице. Затем скопируйте и вставьте следующий код:

< a class="thumbnail" href="#thumb" rel="nofollow">
Пример названия текста

< a class="thumbnail" href="#thumb" rel="nofollow">
Пример названия текста "
4
Замените "folder/largepci1.jpg" на файл, используемый для всплывающей фотографии. То же самое проделайте со вторым блоком кода. Измените в нем строчку «Пример названия текста» на то, что должно быть написано на всплывающей картинке. Поменяйте также значения высоты и ширины в коде, чтобы настроить размер pop-up изображения. Создайте дополнительные блоки кода, чтобы добавить больше эскизов. Введите другие атрибуты, теги и текст в HTML-документе в случае необходимости. Сохраните HTML-файл, а затем загрузите его на свой веб-сервер.

Совет 2 : Как сделать всплывающее фото

Всплывающее изображение – это один из «инструментов», используемых для эффективных онлайн-продаж. И это не пустые слова. Как правило, прежде чем что-то купить, человек должен товар рассмотреть, а поскольку пощупать предлагаемый интернет-магазином товар покупатель не может, поэтому для него очень важно качественное фото. Но чтобы изображение не занимало много места на странице, его делают уменьшенным с возможностью последующего увеличения при нажатии на него.
Как сделать всплывающее фото
Инструкция
1
Скачайте плагин JCE Mediabox. Установите его через менеджер расширений Joomla, а затем активируйте. После этого откройте менеджер изображений JCE и добавьте на страницу фотографию, которая и будет выступать в роли превью, то есть, мини-изображения. Затем выделите добавленное фото и кликните по инструменту добавления гиперссылки. Следом за этим, с помощью браузера файлов JCE укажите путь к изображению, которое должно появиться после нажатия на превью. Затем откройте вкладку «Дополнительно» и в разделе «Список классов» выберите «jcepopup».
2
Создайте всплывающее изображение при помощи визуального редактора, который встроен в систему управления сайтом Ural CMS. Такое изображение при клике на превью увеличивается до больших размеров. С этой целью воспользуйтесь функцией «Вставить», расположенной на панели инструментов, после чего в открывшемся окне установите галочку напротив поля «Создать превью» и загрузите фотографию. Когда изображение загрузится на сайт, выберите его в «списке загруженных» и кликнете по нему.
3
После этого в окне вставки выберите «Внешний вид» и измените размеры фото: в идеале они должны быть 150-250 пикселей в ширину, ведь именно таких размеров превью. После внесения всех изменений нажмите «Вставить». В результате получится кликабельное изображение.
4
Скачайте плагин JCE HsExpander. Установите его через менеджер расширений. После установки в JCE в радиаторе появится особенная кнопка: кликните по ней и окно откроется. Появившееся на экране окно состоит из двух частей: Popup Image и Thumbnail Image. В первом задайте параметры всплывающего изображения, а во втором укажите размеры и альтернативный текст для превью. После того как внесете все необходимые изменения, нажмите «Вставить изображение», а затем «Сохранить».
Обратите внимание
Сохраняйте все внесенные изменения, иначе создать всплывающее фото не получится!
Полезный совет
Все вышеперечисленные плагины бесплатные: скачать их можно на сайте разработчика.
Источники:
  • 33 Mootools, jQuery, Phototype плагина для отображения галерей изображений во всплывающем блоке

Совет 3 : Как сделать всплывающую страницу

При создании сайтов очень часто используются всплывающие окна в качестве меню, рекламных текстов и т.п. К тому же компактный вид позволяет экономить место на странице. Все, что нужно – это написать правильный код.
Как сделать всплывающую страницу
Инструкция
1
Создание всплывающих страниц может производиться на основе JavaScript. Тем не менее, есть более простой вариант – использование языка разметки гипертекста HTML и языка таблиц CSS. Удобство заключается в том, что созданные таким образом окна будут поддерживаться большинством браузеров вне зависимости от того, поддерживают ли они JavaScript.
2
Подобный код размещается в двух сроках, в первой строке содержится ссылка, которая отвечает за открытие окошка, вторая строка – по сути, и является всплывающим окном, атрибут onmouseover говорит о том, что будет отражаться стандартный при наведении на строку ссылки тип курсора, onclick указывает на то, что после щелчка скрытое окно станет видимым:

&lt;a onmouseover='this.style.cursor=&quot;pointer&quot; ' onfocus='this.blur();' onclick=&quot;document.getElementById('PopUp').style.display='block'&quot;&gt;&lt;span style=&quot;text-decoration: underline;&quot;&gt;Нажать здесь!&lt;/span&gt;&lt;/a&gt;
3
Вам потребуется указать размеры окна, цвет и размер текста, фон и рамки. Все эти параметры вы можете указать в атрибуте style. Цветa указывается по кодовой таблицe rgb. В стандартном инструменте Paint в окне «Изменение цветов», в можете найти код нужного оттенка, где R – красный, G – зеленый, В – синий (голубой). Так черный цвет имеет код rgb(0,0,0), белый rgb(255,255,255), серый rgb(126,126,126).

&lt;div id='PopUp' style='display: none; position: absolute; left: 50px; top: 50px; border: solid black 1px; padding: 10px; background-color: rgb(255,255,225); text-align: justify; font-size: 12px; width: 135px;'&gt; Сообщение или текст во всплывающем окне&lt;/div&gt;

Селектор display с указанным значением none делает ваше окно невидимым.
4
Теперь вам нужно разместить две эти строчки между тегами вашей страницы &lt;body&gt; и &lt;/body&gt;. После этого всплывающее окно готово к работе.
5
Однако при данном наборе вы получите постоянно открытое окно. Так что, если вам нужно, чтобы всплывающее окно можно было закрыть, добавьте ссылку, которая будет отвечать за это действие, перед тегом &lt;/div&gt;:

&lt;br /&gt;&lt;div style='text-align: right;'&gt;&lt;a onmouseover='this.style.cursor=&quot;pointer&quot; ' style='font-size: 12px;' onfocus='this.blur();' onclick=&quot;document.getElementById('PopUp').style.display = 'none' &quot; &gt;&lt;span style=&quot;text-decoration: underline;&quot;&gt;закрыть&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;
6
Вероятно, вы захотите сделать окно, всплывающее не по щелчку, как описано выше, а при наведении курсора. Тогда первая строчка должна быть записана так:

&lt;a onmouseover=&quot;document.getElementById('PopUp').style.display = 'block' &quot; onmouseout=&quot;document.getElementById('PopUp').style.display = 'none' &quot; onfocus='this.blur();'&gt;&lt;span style=&quot;text-decoration: underline;&quot;&gt;наведите мышку сюда!&lt;/span&gt;&lt;/a&gt;
7
Таким образом, HTML-код всплывающего окна вы получили, и знакомы со структурой его составления. Все что осталось – оформить внешний вид и содержимое, что, естественно, будет зависеть от ваших умений, цели и фантазии. Но надо помнить, что это простейший вариант создания всплывающего окна. Если вы владеете достаточным навыком программирования в JavaScript (MooTools, jQuery, Prototype и пр.), вы можете создать более красивую и интересную страницу.
Видео по теме
Совет полезен?
Поиск
Добавить комментарий к статье
Осталось символов: 500