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


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

256
8.2 из 10
Проголосовало: 9






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

Установка:
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 24
Скрипты и модификации для Ucoz 2101
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 429
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
как поставить свою ссылку и логотип
  • Сатурн-1 написал:
  • Похвально.
  • Winston888 написал:
  • Я не говорил что делаю только скрипты. Я делаю шаблоны, скрипты, адаптации с разных движков под ucoz и на оборот + я ещё и сам рисую. В данный момент занимаюсь дизайном для webo4ka сам рисую сам верстаю.
  • Сатурн-1 написал:
  • Заметь, мы делаем почти одну и ту же работу.
    Ты - скрипты, я -шаблон. И каждый делает это бесплатно, НО
    ты делаешь скрипты без шаблона, я делаю шаблон без скриптов (не считая основных).
    Я тоже могу сказать что твои скрипты не идеальны, но не буду т.к. даже не знаю какие из всех существующих твои.
    Поэтому ты не сравнивай скрипты и шаблоны да еще и на Ucoz'e, мы же не на хакатоне каком нибудь.
  • Winston888 написал:
  • Если бы я не добавлял бесплатные адаптации или скрипты бесплатно я бы наверное не стал бы комментировать ваш материал.
    Последние темы
    Опрос
    204
    А
    Р
    Что произойдёт: $("#...
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 2
    Гостей: 1
    Пользователей: 1
    0
    Сегодня были
    Топ пользователей: