Пузырь информация о связях CSS
Вот как можно создать информационные пузыри в CSS. Эти пузырьки имеют те же стиле, что и те WebSnapr Этот сайт принимает скриншотов приложений он получает, то он хранит в базе данных. Они имеют высоту и ширину фиксированной, который ограничивает количество символов для вставки.
Вот пример, эти пузыри
Что вкусно состав органа является графической диаграммы следует, что и вы никогда не знаете, что будет.?
Вот что PNG изображения для создания этой информации пузырей выглядит. Этот предварительный просмотр были приняты непосредственно в Photoshop.
Нажмите здесь, чтобы загрузить изображение реального
Теперь, вот код, чтобы создать эту информацию пузыря
HTML
<a href="votreDestination" class="info"> название Вашей ссылке <span> описание Вашей ссылке с максимальной 130 символов в этом случае, если </ SPAN> </ A>
CSS
А. Info ( Должность: относительная / * Очень важно * / Справочная информация: нет; / * Важно для функционирования на IE * / Z-INDEX: 10; ) { А. Информация: Hover ( Z-INDEX: 20; ) А. Информация пролета ( Дисплей: нет; ) span { /*la tag SPAN apparaitra avec l'effet hover*/ А. Информация: Hover SPAN (/ * SPAN тег будет присутствовать при наведении эффекта * / Дисплей: блок; Должность: абсолютный; Top: 18px; Слева направо: 10px; / * Элементы для размещения текста в пузыре * / / * Вы можете также использовать обивка: 24px 8px 5px 25px *; PADDING-LEFT: 25px; FONT-SIZE: 24px; PADDING-BOTTOM: 5px; font-направо: 8px; ширина: 205px; Высота: 45px; / * Style характера в пузыре * / ; font-family: Arial, Helvetica, Sans-Serif; FONT-WEIGHT: нормальный; стиль шрифта: курсив; Размер шрифта: 10px; ; COLOR: # 999999; TEXT-DECORATION: нет; Текст-ALIGN: оправдать; ) / * Для фоне красивых пузырьков с PNG прозрачности * / >span { А. Информация: Hover> пролета ( images/bgInfo .png ) ; BACKGROUND-IMAGE: URL (Images / BGInfo. PNG); ) span { А. Информация: Hover пролета ( ( src= "/images/bgInfo.png" , Фильтр: ProgId: DXImageTransform. Microsoft. AlphaImageLoader (SRC = "/ Images / bgInfo.png" ; sizingMethod = 'культура'); )
Ну, я надеюсь, что с этого учебника вы сможете создать этот пузырь действие 2.0. Если у вас есть какие-либо вопросы, не стесняйтесь задавать на нашем форуме. Удачи!
Метки: Bubble Инфо, CSS, ссылки, учебное пособие
9 февраля, 2008 в 0:07
Интересно, я благодарю Вас закладку отзыв!
9 февраля, 2008 в 0:09
Супер удобно этом уроке ... Я пытаюсь его сегодня!
Если он работает, я добавлю вам знаком (tutmarks.com) немедленно
9 февраля, 2008 в 0:10
Жаль, высота не принимать во внимание содержание и ограничение использования этого шара дружественные точки зрения дизайна.
9 февраля, 2008 в 0:11
Это замечательно, регулировать высоту в соответствии с текстом, но это требует больше строк кода для этого. Код является как можно более простым. Но я намерен сделать более сложный вариант с автоматической регулировкой.
9 февраля, 2008 в 0:13
Это хорошая вещь для объектов, которые будут использоваться столько людей, сколько возможно, мы должны обуздать мере возможности (проще сказать, чем сделать:)).
Браво за вашу работу
9 февраля, 2008 в 0:13
Очень мило, очень четко, очень хорошо
9 февраля, 2008 в 0:15
Tuto действительно красивая Спасибо beaucaup имеет автора
9 февраля, 2008 в 0:15
Прекрасно, благодарю вас.
28 Марта, 2008 в 8:12
Perfect!
Единственной проблемой для меня является то, что даже с текстовыми украшение: Нет, я внутри пузыря выделяется ударом того же цвета, как связь (посетили или нет)
28 Марта, 2008 в 12:39
Испытание граница: 0px; или сделать один! Важным направлением в тексте-Обустройство: Нет ...
Пример:
TEXT-DECORATION: нет;
29 Марта, 2008 в 9:35
Нет ни одного из этих работ, наиболее пузырь разрезается на краю моем контейнере, даже с Z-индексом 20 на пузырь и 2 на упаковке.
29 Марта, 2008 в 20:50
Можете ли вы дать мне ссылку, чтобы я мог видеть ваш код?
30 Марта, 2008 в 6:59
Сайт, как правило, только локально, но я положил онлайн усеченная версия: xttp: / / xxxxxxx.xxx / требований /
Вы можете кликнуть непосредственно на "соединение", а затем оставили на "гарантированный", то у вас есть пример пузырь на правой странице по ссылке на телефон.
Спасибо за вашу помощь;)
31 Марта, 2008 в 15:30
Я посмотрел на эту проблему ваших подсказках в вашем CSS, которые вызывают проблемы переполнения-Y: Auto; в классе. Главную
Я удалил его и он, кажется, работает хорошо, если вы положили переполнения, все, что находится в теге не будет переполнения и в конечном итоге будет скрыт.
Я надеюсь, что мой ответ на вашу проблему.
Добрый день!
17 июля, 2008 в 7:55
Genial вашем учебнике, но это возможно, чтобы получить это сообщение на картинке? Я попытался, но подсказка попадает в картинку, а я положил его в правый нижний ... Неужели это возможно?
Спасибо
20 октября, 2008 в 11:25
Привет, супер tutau, но у меня есть меню с улицы Ли и поэтому я хотел использовать информацию пузыря, но она разрезается когда она появляется! Поэтому я не вижу, игра!
26 октября, 2008, 15:04
спасибо
30 октября, 2008 в 8:14
Здравствуйте,
Как положить пузырь (с другой пузырек в другом направлении) над текстом ссылки, как и Facebook в баре внизу, пожалуйста?
Спасибо ...
Heve
6 ноября, 2008, 12:48
coooooooooooool! Спасибо
17 декабря, 2008 в 12:06
(при условии - дисплей пузыря)
Привет
Можно ли поставить ссылку на изображение карты?
Благодарю Вас и великий урок!
добрый день!