Вы просматриваете материал который относится к категории Скрипты для ucoz. Думаю вам понравился материал jHint by $USERNAME$ aka. exec и вы воспользуетесь им! :)
Автор: exec Скрипты для ucoz 18.05.2010
jHint by $USERNAME$ aka. exec



jHint — всплывающие подсказки для вашего сайта.

При нажатии на кнопку всплывает подсказка, при повторном нажатии — исчезает. Живой пример.

Установка:

1. Для начала установим стили:

Code
<style type="text/css">  
#button {  
  width: 10px;  
  height: 15px;  
  cursor: pointer;  
  border: 0 none;  
}  

.n {  
  background: #555;  
}  

.y {  
  background: #00b4ff;  
}  

#content {  
  display: none;  
  border: 1px solid black;  
  width: 300px;  
  background: #eee;  
  font-family: Tahoma;  
  position: absolute;  
  opacity: 0.8;  
}  
</style>

2. Затем — сам скрипт:

Code
<script type="text/javascript">  
$('#button').click(function (ev) {  
  if ($(this).hasClass('n')) {  
  $(this).attr('class', 'y');  
  $('#content').css({  
  left: ev.pageX + 10,  
  top: ev.pageY + 10  
  }).fadeIn();  
  } else {  
  $(this).attr('class', 'n');  
  $('#content').fadeOut();  
  }  
}).blur(function () {  
  $('#content').fadeOut();  
  $(this).attr('class', 'n');  
});  
</script>

3. Ну и саму кнопку:

Code
<input type="button" id="button" class="n"></div>  
<div id="content">  
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem  
  nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.  
  Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit  
  lobortis nisl ut aliquip ex ea commodo consequat.  
</div>

Не забываем настроить ширину блока с подсказкой в CSS.

С вами был $USERNAME$.

Просмотров: 619 Рейтинг: 0.0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]