MASTER-LIVE
- всё о заработке в сети Интернет 

Простой способ создания всплывающих подсказок

урок 10

В данном небольшом уроке, я хочу поделиться с Вами одним достаточно простым, но в то же время кроссбраузерным способом создания всплывающих подсказок.

Вы можете увидеть пример подсказки наведя курсор мыши на слово "кроссбраузерным"(в первом абзаце урока) .

При наведении на заданное слово, возле курсора появляется вопросительный знак, и через доли секунды всплывает заранее подготовленный текст подсказки к этому слову.

Сейчас в сети можно встретить массу способов создания всплывающих подсказок: одни из них, реализованы на JavaScript, другие - связаны со слоями в CSS, третьи - используют современный фреймворк Jquery. Да, возможно они более красивы, но как правило, есть проблемы с их отображением в различных браузерах.

Я предлагаю простой метод, основанный на использовании html-тега ACRONYM- который показывает, что текст, является сокращением. У данного тега, есть полезный атрибут - title - в котором, собственно, и содержится текст подсказки.

Пример:

<acronym title="сокращение от Content Management System">CMS</acronym>

т.е. просто заключаем нужное слово в теги acronym, а в атрибуте title пишем подсказку к этому слову.

Также, желательно как-то выделить это слово. Обычно его делают немного другим цветом с пунктирным подчеркиванием. Не помешает изменить и вид стандартного курсора, при наведении на данное слово, чтобы, например, возле курсора появлялся знак вопроса.

Все это делается через стили, буквально несколькими строчками. Итак, в файле CSS, который отвечает за оформление Вашего сайта, пишем следующее правило:

acronym {
border-bottom: 1px dashed green; /* Подчеркивание текста */
color: maroon; /* Цвет текста */
cursor:help; /* Меняем стандартный курсор */
}

В результате получим следующее:

CMS

Ну вот в принципе и все! Пользуйтесь!

урок 11

Как вставить Яндекс карту на сайт?

Практически каждый сайт-визитка, имеет страницу с контактами, где обычно указываются адрес, карта проезда, телефон, ICQ и другие типы связи с администрацией.

Хотелось бы подробнее остановиться именно на карте.

В последнее время, стало популярным устанавливать на сайт не статическую карту, представляющую собой обзор какого-то ограниченного участка местности, а динамическую - позволяющую перемещаться в любом направлении и отслеживать маршрут.

А ведь и вправду, соорентироваться по динамической карте гораздо легче, особенно людям, которые не знают города, в котором расположен конечный объект.

Установить ее на сайт довольно просто. Для этого, прежде всего нужно создать учетную запись на Яндексе. После того, как учетная запись создана, нужно перейти по следующему адресу http://api.yandex.ru/maps/tools/constructor/ , авторизоваться и начать творить свою карту :)

Там все достаточно просто и понятно. На первом шаге, нужно указать объект на карте и, если нужно, проложить маршрут проезда. На втором шаге - можно выполнить предварительный просмотр. Ну а третий шаг - это генерация кода, который затем нужно просто вставить в нужное место на Вашем сайте.