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

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

В інтернеті стає все більш популярними pop-up або pop-under вікна. Або простіше кажучи, спливаючі картинки. Багатьом власникам сайтів часто доводиться їх робити в рекламних цілях, але далеко не всі знають алгоритм їх створення.

Вам знадобиться

- HTML редактор;
- Блокнот;
- Хостинг.

Інструкція

  1. Створіть або відкрийте нову веб-сторінку в HTML або текстовому редакторі. Ви можете використовувати для цієї мети такі популярні програми, як Dreamweaver, Expression Web та інші. Якщо ви тільки робите перші кроки в мові програмування HTML, скористайтеся звичайним «блокнотом».
  2. Вставте наступний код між тегами «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 * /} »
  3. Відрегулюйте горизонтальне зміщення спливаючого зображення, змінивши значення в останньому рядку коду. Виділіть простір між тегами «body» і «/ body, там, де ви хочете, щоб зображення з’явилося на веб-сторінці. Потім скопіюйте та вставте наступний код:

       Приклад назви тексту SPAN>>

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