Как сделать всплывающую картинку?

В интернете становится все более популярными pop-up или pop-under окна. Или проще выражаясь, всплывающие картинки. Многим владельцам сайтов часто приходится их делать в рекламных целях, но далеко не все знают алгоритм их создания.
Создать сайт самостоятельно с Wix.com

Вам понадобится

• - HTML редактор;
• - блокнот;
• - хостинг.

Инструкция

Создайте или откройте новую веб-страницу в HTML или текстовом редакторе. Вы можете использовать для этой цели такие популярные программы, как Dreamweaver, Expression Web и другие. Если вы только делаете первые шаги в языке программирования HTML, воспользуйтесь обычным «блокнотом».

Вставьте следующий код между тегами "head" и "/head: " .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 */} "

Отрегулируйте горизонтальное смещение всплывающего изображения, изменив значение в последней строке кода. Выделите пространство между тегами "body" и "/ body, там, где вы хотите, чтобы изображение появилось на веб-странице. Затем скопируйте и вставьте следующий код:

Пример названия текста

Пример названия текста "

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

Оцените статью!