43 примера реализации всплывающих подсказок с помощью AJAX, JavaScript и CSS » Как создать сайт бесплатно? Как сделать сайт? Журнал для веб-мастеров и блогеров от школы создания сайтов

Как создать сайт бесплатно? Как сделать сайт? Журнал для веб-мастеров и блогеров от школы создания сайтов

Об авторе Контакты Реклама Карта сайта

Важно! Создание прибыльных веб сайтов и поисковое продвижение сайтов в Москве: веб-компания StudioForYou!

43 примера реализации всплывающих подсказок с помощью AJAX, JavaScript и CSS

Опубликовано Февраль 11th, 2008 в Web-разработка |

+news2.ru +ВааУ.ru +newsland.ru +СМИ2.ru +del.icio.us +bobrdobr.ru +memori.ru +RUmarkz +Mister Wong +Мое Место
-->

Автор: SmashingMagazine.com
Перевод: Всеволод Козлов

43 примера реализации всплывающих подсказок с помощью AJAX, JavaScript и CSS

Пользователи любят, когда то, что им непонятно, разъясняется прям тут же, на месте. Но далеко не все веб-мастера удосуживаются сделать что-то подобное…

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

В данной статье мы собрали ссылки как на скриптовые решения (JavaScript и AJAX), так и на CSS-решения, последних, к сожалению, гораздо меньше…

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

Я был бы очень признателен, если бы Вы высказались по поводу данного обзора и приведенных в нем решений в комментариях!

AJAX и JavaScript решения

1. Nice Titles Revised

Tooltips Scripts - Nice Titles revised | Blog | 1976design.com

2. A lightweight prototype based JavaScript tooltip

Tooltips Scripts - A lightweight prototype based JavaScript tooltip

3. Nice Titles

Tooltips Scripts - Nice titles

4. AJAX-enabled Help-Balloons

Tooltips Scripts - BeauScott AJAX-enabled Help-Balloons

5. jTip – A jQuery Tool Tip

Screenshot Tooltipp

6. jQuery plugin: Tooltip

Screenshot Tooltipp

7. qTip

Tooltips Scripts - qTip › CSS › Learn › solarDreamStudios

8. Form field hints with CSS Tooltips

Tooltips Scripts - Form field hints with CSS and JavaScript (Ask the CSS Guy)

9. JS Tooltip

Tooltips Scripts - Javascript Entry - Cody Lindley: Finding a Javascript Tool Tip Script

10. BoxOver

Screenshot Tooltipp

11. SuperNotes

Screenshot Tooltipp

12. Tipster

Tooltips Scripts - Tipster Demonstration

13. 5 Tooltips by DHTMLGoodies

Screenshot Tooltipp

14. The second technique uses AJAX.

Screenshot Tooltipp

15. Walter Zorns JavaScript, DHTML Tooltipps

Screenshot Tooltipp

16. clueTip

Tooltips Scripts - clueTip : A jQuery Plugin

17. Mootools Tooltip

Tooltips Scripts - Mootools Javascript Tooltips

18. Sweet Titles

19. Hover Tip

Tooltips Scripts - Hover-Tip: Tooltip You Can Mouse Over

20. Multiline Tooltip with HTML, CSS and JavaScript

Tooltips Scripts - texSoft.it - multiline tooltip with HTML CSS and JavaScript

21. overLIB

Screenshot Tooltipp

22. Scriptaculous Effect.Tooltip

Tooltips Scripts - Effect.Tooltip

23. Tooltip.js

Tooltips Scripts - Tooltip.js - About

CSS решения

24. CSS Tooltips

Tooltips Scripts - Custom CSS Tooltips - loadaverageZero

25. CSS Technique for Tooltips

Tooltips Scripts - CSS Tooltips - Part One

26. Unobtrusive and Slightly Accessible CSS Tool Tips on Semi Transparent CSS Menus

Tooltips Scripts - Unobtrusive and Slightly Accessible CSS Tool Tips on Semi Transparent CSS Menus

27. CSS Menu Descriptions

Tooltips Scripts - CSS: Menu Descriptions | Mike’s Experiments | MikeCherim.com

28. Balloon Tooltip Demonstration

Tooltips Scripts - Balloon tooltip demonstration

29. CSS Tooltipps, lixlpixel Javascript Tooltips

Tooltips Scripts - lixlpixel javascript tooltips | tooltips which stick to the cursor

Tooltips Scripts - lixlpixel CSS tooltips

30. CSS Rollovers for Tooltips

Tooltips Scripts - | mikezilla | CSS Rollovers for tooltips

31. CSS Bubble Tooltips

Tooltips Scripts - CSS Bubble Tooltips

32. Pure CSS Tooltips I

33. Simple, accessible “more” links - v2

Tooltips Scripts - Simple, accessible

34. CSS Tooltips

Tooltips Scripts - Fiji Web Design - CSS Tooltips - Floating HTML Elements

35. Information Balloon PopUps

Screenshot Tooltipp

Прочие решения

36. Snap.com

Tooltips Scripts - Snap

37. DHTML Tooltips

Tooltips Scripts - DHTML Tooltips: Pop-up Layer Onmouseover

38. Animated Tooltip Javascript

39. DOM Tooltip

40. Yahoo! UI Library: Tooltip

Wordpress-плагины

41. WP - Bubble Tooltips (Plugin)

Tooltips Scripts - WP - Bubble Tooltips (Plugin) | bueltge.de [by:ltge.de]

42. FancyTooltips

Tooltips Scripts - wg:Bubble Tooltips

43. Fancy Tooltips

Screenshot Tooltipp

Оригинал статьи: 40+ Tooltips Scripts With AJAX, JavaScript & CSS

Популярность публикации: 37%

Похожие статьи по блогингу и веб-местерингу:

  • 50 полезных скриптов и плагинов на jQuery
  • 85 полезных и регулярно используемых AJAX-техник, необходимых для создания профессиональных веб-приложений
  • 37 любопытных, нужных и полезных jQuery плагинов и скриптов
  • 45 свежих и полезных jQuery плагинов и скриптов
  • Таблицы, созданные с помощью CSS: современные и продвинутые решения

Понравилась статья? Подпишись на обновления блога по RSS!



    18 комментария(-ев)

  • roman

    Полезная инфа! От ныне я Ваш постоянный читатель!
    Веду свой блог pc-obzor.ru, разрешите частично цитировать на нем Ваши статьи (сслылочка на ваш блог будет обязательно! :wink: ) Однозначно спасибо!!!

  • Всеволод Козлов

    roman, цитируйте, пожалуйста, с ОБЯЗАТЕЛЬНЫМ указанием данного сайта как источника информации активной ссылкой.

    Рад, что Вам нравится!

  • Могилевский бомж

    забавно: как мне кажется существует покрайней мере еще два источника с такой же инфой :)
    или это просто у блогеров мысли сходятся :)

  • Всеволод Козлов

    Могилевский бомж, лично я брал с западного самого что ни на есть первоисточника! Ссылка на него в конце публикации!

    Ну а почему бы и мысли не похожи :smile: Если контент действительно полезный как для автора, так и для его аудитории, почему бы не пустить в массы :lol:

  • Связист

    Спасибо за подборку. Некоторые варианты даже очень неплохи. У меня идея реализовать скрипт для того, чтобы у всех ссылок на странице всплывала область выбора - в каком окне открывать ссылку. Полагаю, теперь получится.

  • Антон Незнамов

    супер полезно. мне наглядно, а моему програмеру в исполнение)
    благодарю

  • Студия электронного дизайна

    Отлично! :)
    5+

    Как раз искал анимированные подсказки.

  • Nadejda

    Очень полезно! Нашла многое из того, что искала уже не один день в сети. Наткнулась на вас - а тут такие пряники )

  • Ramzes

    При закачке одного из скриптов (”http://www.beauscott.com/examples/help_balloons/HelpBalloon.zip”) Traffic Inspector выдает сообщение: “Контент заблокирован, обнаружен вирус(ы) - 2, тип - Virus/Heuristic”

  • Danya

    О! Ваще круто! Сразу всё и в одном месте, не надо весь инет шерстить! Спасибо большое! Очень помогло!

  • Foks

    СПАСИБО!

  • Skotch

    То что надо…
    Ты был прав, я нашол именно для себя подходящий вариант)))

  • Юрий

    Привет. Я написал свой скрипт подсказок. Идейно это одно и тоже. Но некоторые мелочи и дизай у меня не получился. Я хотел найти, то что у вас на сайте. Очень полезно! Последний писк!

  • dark_hero

    а еще можно вот так, суть таже, только намного роще http://neoprizma.net/2009/08/07/alt/ :cool:

  • SerzN1

    забавно , НО легче сделать самому , то что нужно

  • 123

    А чё суахили не катит

  • Матвей

    Замечательный обзор, огромное спасибо автору.

  • Юрий

    спасибо!

Прокомментировать публикацию

 


  • Как создать сайт - RSS

    Подписаться на RSS-ленту блога проекта W3School.ru - школы создания сайтов
  • Как сделать сайт - Разделы

    • CSS (31)
    • HTML, XHTML (2)
    • Web-разработка (78)
    • Web-сервисы (10)
    • Блоггинг: ведение блога (22)
    • Блоггинг: основы (11)
    • Блоггинг: проектирование (28)
    • Галерея дизайнов (77)
    • Интересное для веб-мастеров (42)
    • Копирайтинг для сайтов (2)
    • Редакторская колонка (11)
    • Юзабилити и доступность (7)
  • Как создать сайт - Лучшее

    • 50 полезных скриптов и плагинов на jQuery
    • 27 ресурсов с бесплатными текстурами и узорами в помощь дизайнеру
    • Бесплатные CSS-макеты и шаблоны
    • 30 скриптов, реализующих возможности галерей и слайд-шоу
    • 101 взрывной и незаменимый информационный ресурс по CSS
    • 37 любопытных, нужных и полезных jQuery плагинов и скриптов
    • 43 примера реализации всплывающих подсказок с помощью AJAX, JavaScript и CSS
    • 58 креативных логотипов, способных вдохновить Вас на создание логотипа-шедевра
    • 5 практических рекомендаций по организации категорий на блоге
    • Свежие и высококачественные бесплатные иконки для рабочего стола и веб-дизайна
  • Рекомендуем

    • Design For Masters
    • Life Style
    • Webmascon
    • XHTML.RU по-русски
    • Блог веб-мастера
    • Верстка от Webmolot
    • Временно.нет - статьи по верстке и веб-дизайну
    • Для тех, кто делает сайты
    • Записки о Flash & Creative
    • Ресурс для веб-разработчиков
    • Уроки photoshop
    • Школа поисковой оптимизации


Copyright © 2008 Как создать сайт бесплатно? Как сделать сайт? Журнал для веб-мастеров и блогеров от школы создания сайтов (г. Москва)

Проект веб-компании StudioForYou: поисковая оптимизация сайта

Rambler's Top100