Вам понадобится
  • - 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-файл, а затем загрузите его на свой веб-сервер.