Добро пожаловать на форум!
Новые сообщения Участники Правила форума Поиск RSS
Статистика Форума
Последние обновленные темы Самые популярные темы Самые активные пользователи Новые участники
Болт (3764)
Skyline (2795)
XemorDio (2451)
Strelok41 (2084)
KITT [17.01.2017]
dbnz1960 [17.01.2017]
michicugi [16.01.2017]
20POVIDLO17 [15.01.2017]
Страница 1 из 11
Форум » Web-раздел » Скрипты uCoz » Hint » Свои подсказки
Свои подсказки
XemorDio Дата: Суббота, 10.09.2016, 17:40 | Сообщение # 1
Группа: Админы
Сообщений: 2451
Награды: 9 Репутация: 264
Статус: Offline

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

Установка:
1. Пропишем data в наших div и прочих элементах (Можно сменить на любой свой тег не кретично).
Код
<div data="<img src='http://j-p-g.net/if/2016/06/25/0093688001466817955.jpg'> <br><center>  
Cтудия графики и дизайна Best Studio, как студия перспективных веб-разработок, была основана 1 июля 2009 г. Уже более 17000 зарегистрированых пользователей!">Наведи на меня</div></center></div>

2. Добавим сам скрипт:
Код
<script>$(function(){  
  $('div, a, span').hover(function(){  
  var myhit = $(this).attr('data');
  $(this).append('<div class="myHit">'+myhit+'</div>');
  }, function() {
  $('.myHit').remove();
  });  
  }); </script>

div, a, span - Элементы для которых преобразовывается и выводятся наша инфа.

3. Добавим CSS вид нашего окна:
Код
.myHit {
  position: absolute;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 5px;max-width:250px;
  box-shadow: 0pc 0pc 10px #ccc;
}
.myHit img {max-width:100%;}
Форум » Web-раздел » Скрипты uCoz » Hint » Свои подсказки
Страница 1 из 11
Поиск:
17:01
Обновить

Хостинг от uCoz | Design by XemorDio | MODSTALKER © 2009-2016