Всплывающая подсказка в виде рисунка - Сообщество uCoz

Страница 1 из 1 1
Модератор форума: Yuri_G

Сообщество uCoz » Архивариус » Решённые вопросы » Всплывающая подсказка в виде рисунка

Всплывающая подсказка в виде рисунка

Imil1

Сообщений: 1

Репутация: 0

Сообщение # 1 | 00:01:26 05 Мар 2012

Подскажите, как сделать всплывающую подсказку в виде рисунка на определенные слова?

Хочу создать сайт с аккордами для песен, главное что бы при наведении на аккорд всплывал рисунок, с его правильным зажимом.
Это вообще возможно сделать глобально(т.е. не к каждому аккорду приписывать большущий код, а что нибудь попроще)?
Заранее спасибо:)

Добавлено (05-Мар-2012, 00:01:26)
---------------------------------------------
К примеру сделать так, как вот на этой страничке. http://vozmigitar.ucoz.ru/load....2-1-0-7
При наведении на Am у нас всплывает подсказка. только делал я это долговато....

Hizon

Сообщений: 41

Репутация: 2

Сообщение # 2 | 14:21:32 05 Мар 2012

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)
---------------------------------------------
Где $IMG_URL1$ ссылка к картинке, можно вставить свою например
<a class='south' href='#' title='<img src='//forum.ucoz.ru/12.gif' border='0' width='200' >'>Тут текс при котором будет картинка</a>

Сообщество uCoz » Архивариус » Решённые вопросы » Всплывающая подсказка в виде рисунка

Страница 1 из 1
1