Как добавить изображение в подсказку с помощью JavaScript? - PullRequest
0 голосов
/ 21 марта 2011

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

Мой css:

 .bubbleText{
background:transparent url(../images/static/link_hover_M_120.png) no-repeat;
  }

 .questionIcon{
background: url(../images/static/question2.png) no-repeat;
text-decoration:none;
 }

Мой HTML-код:

 <a title="Your Contact number" href="#" class="questionIcon bubbleText">&nbsp;</a>

В классе questionIcon содержится изображение «вопросительного знака».При наведении на вопросительный знак мне нужна подсказка, которая будет отображаться внутри изображения.Изображение представляет собой просто белый прямоугольник с рамками.

Ответы [ 3 ]

2 голосов
/ 21 марта 2011

Браузеры не поддерживают расширенные всплывающие подсказки, но это все еще можно сделать

Самый простой способ - использовать какой-нибудь плагин (если вы используете что-то вроде jQuery), который предоставляет богатые функциональные возможности всплывающих подсказок. Браузеры могут отображать только текст, определенный в атрибуте alt (из image elemnt) или атрибуте title в любом другом элементе HTML (включая image).

Это поможет вам начать работу с плагинами всплывающей подсказки jQuery .

2 голосов
/ 21 марта 2011

Я бы использовал общую библиотеку, такую ​​как jQuery.Есть много запущенных примеров: http://jquery.bassistance.de/tooltip/demo/

2 голосов
/ 21 марта 2011

Если вы хотите стилизовать всплывающую подсказку, вам нужно использовать javascript для создания функциональности. Какой сценарий вы используете, зависит от того, какую среду JS вы используете, если таковой имеется.

На этом сайте есть большой список подсказок: http://www.1stwebdesigner.com/css/stylish-jquery-tooltip-plugins-webdesign/

Использует разные фреймворки, поэтому выберите тот, который работает для вас.

...