АвтоАвтоматизацияАрхитектураАстрономияАудитБиологияБухгалтерияВоенное делоГенетикаГеографияГеологияГосударствоДомДругоеЖурналистика и СМИИзобретательствоИностранные языкиИнформатикаИскусствоИсторияКомпьютерыКулинарияКультураЛексикологияЛитератураЛогикаМаркетингМатематикаМашиностроениеМедицинаМенеджментМеталлы и СваркаМеханикаМузыкаНаселениеОбразованиеОхрана безопасности жизниОхрана ТрудаПедагогикаПолитикаПравоПриборостроениеПрограммированиеПроизводствоПромышленностьПсихологияРадиоРегилияСвязьСоциологияСпортСтандартизацияСтроительствоТехнологииТорговляТуризмФизикаФизиологияФилософияФинансыХимияХозяйствоЦеннообразованиеЧерчениеЭкологияЭконометрикаЭкономикаЭлектроникаЮриспунденкция

Пример 3.34. Создание всплывающей подсказки

Читайте также:
  1. HMI/SCADA – создание графического интерфейса в SCADА-системе Trace Mode 6 (часть 1).
  2. I. 1.1. Пример разработки модели задачи технического контроля
  3. II. Примеры
  4. III. Создание и обработка комплексного информационного объекта в виде презентации с использованием шаблонов.
  5. IV. ТИПОВОЙ ПРИМЕР РАСЧЕТОВ.
  6. MathCad: понятие массива, создание векторов и матриц.
  7. Plot(t,x),grid,title('Пример 3.1'),legend('X1','X2')
  8. V3: Создание советской политической системы. Конституция РСФСР 1918 г.
  9. X. примерный перечень вопросов к итоговой аттестации
  10. Активный запрос на создание таблицы
  11. Б2. Пример №2
  12. Берите пример с детей

XHTML 1.0CSS 2.1CSS 3IE 7+IE 9+CrOpSaFx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title> Всплывающая подсказка </title> <style type="text/css" > #floatTip { position: absolute; width: 250px; display: none; border: 1px solid #000; padding: 5px; font-family: sans-serif; font-size: 9pt; color: #333; background: #ECF5E4; opacity: 0.85; /* Прозрачность слоя */ } </style> <script type="text/javascript" src="scripts/tooltip.js" ></script> </head> <body> <p><img src="images/odel2.jpg" alt="Фотография" width="300" height="450" onmouseover="toolTip('Фотоаппарат: Canon EOS 350D<br />' + 'Объектив: Canon EF 24-105 f/4L IS USM<br />' + 'Вспышка: Canon Speedlite 580 EX<br />' + 'Выдержка: 1/125<br />Диафрагма: 5.6')" onmouseout="toolTip()" /></p> <div id="floatTip" ></div> </body></html>


Результат данного примера показан на рис. 3.44. Обратите внимание, что переносы текста при вызове функции toolTip() сделаны для удобства восприятия и имеют синтаксис JavaScript. В Safari скрипт иногда не работает при переносе текста, в этом случае текст следует записать в одну строку. К стилям добавлено свойство CSS3 opacity, которое добавляет для слоя небольшую прозрачность. В IE до версии 9.0 это свойство не поддерживается.

Рис. 3.44. Всплывающая подсказка, выводимая с помощью JavaScript


1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |

Поиск по сайту:

Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Студалл.Орг (0.002 сек.)