|
|
Модератор форума: Yuri_G |
Сообщество uCoz » Архивариус » Решённые вопросы » Всплывающая подсказка в виде рисунка |
Всплывающая подсказка в виде рисунка |
Подскажите, как сделать всплывающую подсказку в виде рисунка на определенные слова?
Хочу создать сайт с аккордами для песен, главное что бы при наведении на аккорд всплывал рисунок, с его правильным зажимом. Это вообще возможно сделать глобально(т.е. не к каждому аккорду приписывать большущий код, а что нибудь попроще)? Заранее спасибо:) Добавлено (05-Мар-2012, 00:01:26) |
http://www.center-dm.ru/data/jQuery/Tipsy_Tooltip/index.html -вот пример
Шаг-1 JS: Следует установить на страницу сайта, после тега body, следующие скрипты: JS Code <script type="text/javascript" src="http://www.center-dm.ru/data/jQuery/Tipsy_Tooltip/jquery.tipsy.js"></script> <script type='text/javascript'> $(function() { $('.north').tipsy({gravity: 'n'}); $('.south').tipsy({gravity: 's'}); $('.east').tipsy({gravity: 'e'}); $('.west').tipsy({gravity: 'w'}); }); </script> Шаг-2 Html: Теперь в начало нашей ссылки, нам следует прописать класс, который будет отвечать за появление подсказки с той стороны, которая нам необходима. (север, юг,восток, запад). Code <a class='north' href='#' title='Подсказка появляется снизу (Север)'>North | Север</a> <a class='south' href='#' title='Подсказка появляется сверху (Юг)'>South | Юг</a> <a class='east' href='#' title='Подсказка появляется слева (Восток)'>East | Восток</a> <a class='west' href='#' title='Подсказка появляется справа (Запад)'>West | Запад</a> Шаг-3 CSS: Теперь в css стилях пропишем: - изображение уголка - установим прозрачность, - выравним текст по центру - установим значения для текста - пропишем закруглённые углы CSS-Code Code .tipsy { padding: 5px; font-size: 11px; opacity: 0.8; filter: alpha(opacity=80); background-repeat: no-repeat; background-image: url('tipsy.gif'); } .tipsy-inner { padding: 5px 8px 4px 8px; background-color: black; color: white; max-width: 200px; text-align: center; } .tipsy-inner { -moz-border-radius:3px; -webkit-border-radius:3px; } .tipsy-north { background-position: top center; } .tipsy-south { background-position: bottom center; } .tipsy-east { background-position: right center; } .tipsy-west { background-position: left center; } А вот чтобы при наведение показывала картинка вот код: <a class='south' href='#' title='<img src='$IMG_URL1$' border='0' width='200' >'>Тут текс при котором будет картинка</a> Добавлено (05-Мар-2012, 14:21:32) |
| |||
| |||