Як зробити спливаючу картинку

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

Вставте цей код між тегами "head" і "/ Head:

" lt; style type ="text / css"gt;
.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 * /}
lt; / style gt; "

Налаштуйте горизонтальне зміщення спливаючого зображення, змінивши значення в останньому рядку коду. Виділіть простір між тегами "body" і "/ Body, там, де ви хочете, щоб зображення з`явилося на веб-сторінці. Потім скопіюйте і вставте наступний код:

lt; a class ="thumbnail" href ="#thumb"gt;
Приклад назви тексту

lt; a class ="thumbnail" href ="#thumb"gt;
Приклад назви тексту "

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