Свои подсказки

360
8.4 из 10
Проголосовало: 10






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

Установка:
1. Пропишем data в наших div и прочих элементах (Можно сменить на любой свой тег не кретично).
Код
<div data="<img src='http://cs11130.vk.me/u36206498/127629584/x_d90fe64a.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%;}
Автор публикации: Загрузка
Загрузка
Marishka, это его n материал
Источник: http://mybeststudio.ru
  • Всего комментариев: 3

Marishka
0
Marishka написал: Написано 10 Июля 2016 в 15:52
Комментарий №2
На элементе пропишите атрибут для наводки и пропишите его js заменив div, a, span на ваш атрибут, после замены все будет работать для указанного вашего атрибута!...

1488
0
1488 написал: Написано 10 Июля 2016 в 17:00
Комментарий №3
Ааа мне просто было лень посмотреть:) Спасибо большое!!! smile
Заменил на "nav"

1488
0
1488 написал: Написано 10 Июля 2016 в 10:47
Комментарий №1
при на воде на надпись - undefined , появляется и на всё что с ним рядом такая же надпись при наводе. как нормально сделать?

  • Оставить комментарий:
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
Меню сайта
Категории
Для помощи создания сайта uCoz 25
Скрипты и модификации для Ucoz 2115
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 431
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
Добрый вечер.Подскажите,пожалуйста: как сделать, чтобы второй или третий набор смайлов заменить своими.
Вы сами себе пишите?
  • CbIPoK2513 написал:
  • Скрипт хорош, уже подстроил свой сайт под него :3
  • gefest35 написал:
  • Супер)))!пасиб за работу!!!
  • sasha2016tv написал:
  • Хороший скрипт
    Последние темы
    Опрос
    442
    А
    Р
    Оцените новый дизай:)
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 3
    Гостей: 2
    Пользователей: 1
    0
    Сегодня были
    Топ пользователей: