Картинка в Всплывающей подсказке

MERINGOT · August 24, 2011

Прошу помощи! У меня такая проблема - необходимо что-бы всплывающая подсказка содержала картинку но проблема в том что необходимо это сделать в html в самом блоке где идет текст (блок прикручен как чистая страничка) посоветуйте код для воплощения этой задачи желательно не сильно громоздкий код потому как на страничке много картинок к которым нужно прикрутить всплывающую подсказку с изображением

Или подскажите как к стандартной всплывающей подсказке title прикрутить изображение

Vlad · August 24, 2011

Такая пойдёт?

http://htmlbook.ru/faq/mozhno-li-izmenit-vid-vsplyvayushchey-podskazki

MERINGOT · August 24, 2011

Vlad

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

а примером там просто измененный стиль подсказки

<body>
  <p><img src="images/odel.jpg" alt="Фотография" width="300" height="424" 
   onmouseover="toolTip('Фотоаппарат: Canon EOS 350D<br />' +
   'Объектив: Canon EF 24-105 f/4L IS USM<br />' +
   'Вспышка: Canon Speedlite 580 EX<br />' +
   'Выдержка: 1/125<br />Диафрагма: 5.6')" onmouseout="toolTip()" /></p>
   <div id="floatTip"></div>
 </body>

если вместо текста о параметрах фоотоапарата вставить ссылку на изображение то вообще не работает работает только если там текст стоит... а мне надо что-бы изображение...

Vlad · August 25, 2011

Попробуйте этот плагин к jQuery.

http://craigsworks.com/projects/qtip/demos/content/images

Быколай · August 25, 2011

если вместо текста о параметрах фоотоапарата вставить ссылку на изображение то вообще не работает работает только если там текст стоит... а мне надо что-бы изображение...

данный Владом пример рабочий. инфа 100%. вставляйте не ссылку, а тег img. и с кавычками не намудрите. яваскрипт, всё таки.

Edited August 25, 2011 by Быколай

MERINGOT · August 25, 2011

все спасибо заработало

dostel1 · September 1, 2011

можно вопрос))

по ссылке которую давал влад http://htmlbook.ru/faq/mozhno-li-izmenit-vid-vsplyvayushchey-podskazki

там есть момент!

 // Показывать слой справа от курсора 
  if ((x + w + 10) < document.body.clientWidth) { 
    floatTipStyle.left = x + 'px';

  // Показывать слой слева от курсора
  } else { 
    floatTipStyle.left = x - w + 'px';
  }

я так понимаю что это для того чтобы подсказка не вылазила за окно браузера и не делать скролл страници??

у меня проблема а как сделать чтобы подсказка не вылазила по вертикали !!делаю так

 z=200

 if ((y + z + 80) < document.body.clientHeight) { 
    floatTipStyle.top = y + 'px';

  // Показывать слой сверху????? от курсора
  } else { 
    floatTipStyle.top = y-z + 'px';
  }

но оно не работает!!

Помогите дереву я только сегодня начал разбирать тултипи

Edited September 1, 2011 by dostel1

amin · May 18, 2012

все спасибо заработало

Здравствуйте MERINGOT. Вот уже пару часов мучаюсь и также вместо текста не могу картинку поставить пробовал по разному тег img вставить:

<a href="#" onmouseover="tooltip.show('img src="img.png"');" onmouseout="tooltip.hide();">Показать</a>

Подскажите пож-та как вы тег img вставили?

Sign In

Картинка в Всплывающей подсказке

Question

MERINGOT

Link to comment

Share on other sites

7 answers to this question

Recommended Posts

Vlad

Link to comment

Share on other sites

MERINGOT

Link to comment

Share on other sites

Vlad

Link to comment

Share on other sites

Быколай

Link to comment

Share on other sites

MERINGOT

Link to comment

Share on other sites

dostel1

Link to comment

Share on other sites

amin

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information