Студопедия

КАТЕГОРИИ:

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



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




Читайте также:
  1. A) создание и редактирование изображения
  2. II. Средства, применяемые при лечении заболеваний, вызванных условно-патогенными грибами (например, при кандидамикозе)
  3. III. Примерная структура фронтального занятия.
  4. V. Сравнительный анализ НДС расчетных схем и пример расчета.
  5. Алгоритмы разгона и торможения. Сравнительная оценка алгоритмов. Примеры.
  6. Аутсорфинг: понятие, примеры.
  7. Аэробное и анаэробно-аэробное энергообеспечение мышечной деятельности, средства и методы повышения их мощности и емкости на примере избранного вида спорта.
  8. Безаффиксные способы словообразования. Проиллюстрируйте эти способы примерами из текста. Приведите примеры окказиональной субстантивации в тексте.
  9. Безразмерные показатели графиков нагрузки (на примере суточного).
  10. Билет №37 Текстовый редактор MS Word. Создание и форматирование таблиц в редакторе Word

<!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

Фиксированное положение

Фиксированное положение слоя задаётся значением fixed свойства position и по своему действию похоже на абсолютное позиционирование. Но в отличие от него привязывается к указанной свойствами left, top, right и bottom точке на экране и не меняет своего положения при прокрутке веб-страницы. Ещё одна разница от absolute заключается в том, что при выходе фиксированного слоя за пределы видимой области справа или снизу от неё, не возникает полос прокрутки.



Применяется такой тип позиционирования для создания меню, вкладок, заголовков, в общем, любых элементов, которые должны быть закреплены на странице и всегда видны посетителю. В примере 3.35 показано добавление подвала, который остаётся на одном месте независимо от объёма информации на сайте.


Дата добавления: 2015-04-18; просмотров: 5; Нарушение авторских прав







lektsii.com - Лекции.Ком - 2014-2021 год. (0.009 сек.) Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав
Главная страница Случайная страница Контакты