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

Серега - Среда, 17 Июль 2013 10:55

Публикуя очередную статью на своем сайте, я задумался над тем как сделать всплывающее информационное окно при наведении на ссылку или на картинку?

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

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

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

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


В файл стиля вашего шаблона style.css вставляем следующий код:

/*Всплывающий скриншот*/
.thumbnail{  
position: relative;  
z-index: 0;  
}  
.thumbnail:hover{  
background-color: transparent;  
z-index: 50;  
}  
.thumbnail span{ /*CSS for enlarged image*/  
position: absolute;  
background-color: #3d3d3d;  
padding: 5px;  
left: -1000px;  
border: 1px solid white;  
visibility: hidden;  
color: Yellow;  
text-decoration: none;  
border-radius: 4px 4px 4px 4px;
-moz-border-radius: 4px 4px 4px 4px;
-webkit-border-radius: 4px 4px 4px 4px;
}  
.thumbnail span img{ /*CSS for enlarged image*/  
border-width: 0;  
padding: 2px;  
}  
.thumbnail:hover span{ /*CSS for enlarged image on hover*/  
visibility: visible;  
top: 0;  
left: 60px; /*position where enlarged image should offset horizontally */  
}  
/*---------------------*/
Этот код стиля Вы можете легко  настроить под собственный сайт
изменив всего пару показателей, например:

background-color: #3d3d3d; -  отвечает за цвет фона окна

color: black; - отвечает за цвет текста

border: 1px solid white; - отвечает за толщину и цвет лини границы окна.

 

Для вывода всплывающего окна при наведении на ссулку, в текст вставляем вот такую строчку:

<a class="thumbnail" href="#">Ссылка<span>Здесь описание<img src="ВАША КАРТИНКА" width="500"/></span></a>

Для вывода всплывающего окна при наведении на картинку, в текст вставляем вот такую строчку:

<a class="thumbnail" href="#"><img src="ссылка на рисунок" width="100px" height="66px" border="0" /><span><img src="ссылка на рисунок" />Ваш текст</span></a>

Демо:

1. Текстовая ссылка с изображением и описанием:
Какой нибудь текст, затем текстовая ссылка ДельфинарийЕдинственный дельфинарий в Канкуне и как вы видите при наведении курсора всплывает окно с картинкой и описанием, окно тоже кликабельное и ведет на ссылку.

2. Картинка в виде ссылки:

дельфинарий в КанкунеДельфинарий в Канкуне

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

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


Комментарии (84)

  1. Commentsastersolar   |  Суббота, 02 Ноябрь 2013 at 18:13

    Замечательный вариант кода для редактирования style.css
    Я одно время искал плагин для всплывающих окон, но здесь всё просто и быстро.Благодарю!

  2. CommentsСерега   |  Понедельник, 04 Ноябрь 2013 at 18:52

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

  3. CommentsАлексей   |  Понедельник, 09 Декабрь 2013 at 22:31

    Подскажите пожалуйста, а как поменять позицию выпадающего окна? ну чтобы не вниз а скажем вверх выпадало? Или было бы замечательно еслиб он учитывал края экрана…

  4. CommentsСерега   |  Вторник, 10 Декабрь 2013 at 20:17

    Алексей — для того, что бы изменить позицию выпадающего окна нужно в коде

    .thumbnail:hover span{ /*CSS for enlarged image on hover*/
    visibility: visible;
    top: 0;
    left: 60px; /*position where enlarged image should offset horizontally */
    }

    изменить top: 0; например на top: -250 px; — в этом случае картинка будет выпадать вверх, так же ее можно позиционировать по горизонтали за это отвечает строчка left: 60px; — где изменяя количество пикселей вы передвигаете выпадающее окно влево или в право. На счет учитывания краев экрана я затрудняюсь вам ответить, изначально такой задачи перед собой не ставил.

  5. CommentsVadim   |  Четверг, 16 Январь 2014 at 14:34

    Спасибо, помогло, работает всё просто быстро и понятно

  6. CommentsСерега   |  Понедельник, 20 Январь 2014 at 14:24

    Vadim — я рад, что информация для Вас оказалась полезной. Реально все работает быстро и просто. Все всплывающие окна кликабельные, количество текста не ограничено, сайт не нагружается.

  7. CommentsTraveler   |  Воскресенье, 26 Январь 2014 at 23:47

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

  8. CommentsСерега   |  Вторник, 28 Январь 2014 at 21:21

    Traveler — я считаю, что любой уважающий себя блогер должен быть хоть немного веб мастером, потому как иногда бывает просто придумать или вставить в сайт (блог) какую то фишку, а не зная устройство своего блога (сайта) этого сделать самостоятельно блогеру не удастся. И как правильно было подмечено, ему придется обращаться к фрилансерам и платить за это деньги. Не обязательно знать код от а до я, достаточно понимать, что код выполняет и куда надо его ставить в блог или сайт. При необходимости любой код можно доработать до своих требований и нужд. Главное это найти правильную основу!!!

  9. CommentsСергей   |  Пятница, 31 Январь 2014 at 20:03

    Добрый день!
    Спасибо за интересное решение для сайта.
    Воспользовался, но…столкнулся с рядом проблем….
    1) наблюдается некорректная работа в IE 8, в появляющемся окне тест отображается в половине области, вторая половина пустая;
    2) попытался сделать границу, появляется разрыв в верхнем правом углу… и пустая граница на самом тексте
    Подскажите, пожалуйста, как исправить.
    Если нужно могу прислать скриншоты.
    Заранее благодарен.

  10. CommentsСерега   |  Среда, 05 Февраль 2014 at 08:51

    Сергей — для браузера IE 8, видимо надо прописывать специальный код, который понимает только он. На браузеры IE я вообще не ориентируюсь, так как для них всегда надо прописывать дополнительный код.
    возможно стоит добавить под строку border-radius: 4px 4px 4px 4px; условие для IE 8 примерно так: -EI-8-radius: 4px 4px 4px 4px;
    Хотя на вряд ли это поможет, лучше конечно обратиться на форум программистов, может там кто подскажет.

  11. CommentsКирилл   |  Четверг, 06 Февраль 2014 at 13:39

    Здравствуйте! Спасибо вам за очень хорошее решение!!)
    Подскажите, реально сделать чтобы картинка не выходила за пределы таблицы сайта? допустим если картинка с левого края, то окно выпадало бы справа, а у картинки с правого края в лево. На мобильных браузерах выпадающее окно сдвигает сайт влево

  12. CommentsКирилл   |  Четверг, 06 Февраль 2014 at 13:42

    Или вобще посередине окна браузера

  13. CommentsСерега   |  Суббота, 08 Февраль 2014 at 19:30

    Кирилл попробуйте в строке кода

    .thumbnail:hover span{ /*CSS for enlarged image on hover*/
    visibility: visible;
    top: 0;
    left: 60px; /*position where enlarged image should offset horizontally */
    }

    заменить left: 60px; на center: 0
    Возможно это поможет. Можно еще попытаться изменить позиционирование в строке кода

    .thumbnail span{ /*CSS for enlarged image*/
    position: absolute;

    вместо position: absolute прописать position: relative или fixed и к нему нужно добавить вот такое дополнение, это пример, Вам надо будет вносить свои значения

    z-index: 9999; /*значение может быть любое, но больше остальных*/
    top: 20px; /*элемент будет смещен на 20 пикселей вниз*/
    right: 100px; /*элемент будет смещен на 100 пикселей влево*/
    }

    Дерзайте все в Ваших руках!!!

  14. CommentsЕвгений   |  Понедельник, 10 Февраль 2014 at 21:12

    Здравствуйте! Попробовал Ваше решение и столкнулся с проблемой — при использовании текстовой ссылки для нее выделяется область во всю ширину экрана, а не так как у Вас в примере с дельфинарием. Что приводит к нарушению форматирования текста.

  15. CommentsСерега   |  Вторник, 11 Февраль 2014 at 16:25

    Евгений — возможно вы не прописали размеры выводимого изображения в строке вывода в текстовой ссылке, например
    width=»500px» или
    width=»250px» height=»250px»
    Попробуйте прописать это может все заработает, если не заработает отправьте мне на почту скрин основного кода и код вывода окна по текстовой ссылке, возможно где то, что то упустили. Адрес почты указа в футаре сайта с права.

  16. CommentsАлександр   |  Четверг, 20 Февраль 2014 at 14:39

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

    border-radius: 4px 4px 4px 4px;
    -moz-border-radius: 4px 4px 4px 4px;
    -webkit-border-radius: 4px 4px 4px 4px;

  17. CommentsСерега   |  Пятница, 21 Февраль 2014 at 19:54

    Александр на вашем ресурсе для картинок прописан код border-radius: 0; а так этот код работает нормально, проверьте еще раз написание кода на своем сайте, для округления углов всплывающего окна при наведении курсора на изображение.

  18. CommentsАлександр   |  Вторник, 25 Февраль 2014 at 11:58

    Да так и есть это в настройках самой CMS определяется. Прошупрощение за беспокойство и спасибо за код!

  19. CommentsСерега   |  Вторник, 25 Февраль 2014 at 12:05

    Пожалуйста — Александр! Рад если смог Вам помочь!!! Иногда решение вопроса кроется очень близко, но мы его не замечаем и хорошо когда, кто то сможет подсказать или указать нужное направление поиска.

  20. Commentsроман   |  Понедельник, 10 Март 2014 at 15:41

    Здравствуйте у меня один вопрос какую ссылку именно надо вставлять?

  21. CommentsСерега   |  Воскресенье, 16 Март 2014 at 12:05

    Роман — для вывода картинки с описанием при наведении курсора на ссылку необходимо при написании текста в текстовом редакторе перейти из визуального в html и там в нужном месте установить вот такой код для ссылки

    <a class="thumbnail" href="#">Ссылка<span>Здесь описание<img src="ВАША КАРТИНКА" width="500"/></span></a>

    Вот пример работы кода вывода всплывающего окна при наведении курсора на ссылку:
    Как он работает? Значит пишем какой то текст, потом доходим до нужного места и вставляем в текст ссылку (анкор) Интернет сетиКомпания Google вплотную работает над интернет сетью нового поколения, скорость передачи и приема данных в этой сети будет составлять 10 Гбит/с., а потом идет продолжение текста. Таким образом пр наведении курсора на ссылку в тексте появляется всплывающее окно с картинкой и описанием. Я изменил ширину картинки изменил width= «500» на width= «300», что бы более корректно отображалось всплывающее окно в комментариях.

    в этом коде делаем следующие изменения:

    в части кода href= «#» в место # вы прописываете свою ссылку например:

    href="http://www.sevelweb.ru/internet-seti-novogo-pokoleniya-ot-google/"

    Далее идет сам текст ссылки (анкор) >Интернет сети< , затем идет краткое описание и прописывается адрес картинки <img src="ВАША КАРТИНКА" width="500"/> А ниже я представил полностью код который я вставлял в демонстрационный текст приведенный выше:

    <a class= «thumbnail» href= «http://www.sevelweb.ru/internet-seti-novogo-pokoleniya-ot-google/» rel=»nofollow»<Интернет сети>Компания Google вплотную работает над интернет сетью нового поколения, скорость передачи и приема данных в этой сети будет составлять 10 Гбит/с.<img src= «http://www.sevelweb.ru/wp-content/uploads/2014/03/google-net.jpg» width= «500»/></span></a>

  22. CommentsИгорь   |  Пятница, 28 Март 2014 at 16:10

    Подскажите, а как реализовано всплывающее окно в начале статьи?
    http://www.sevelweb.ru/wp-content/uploads/2013/07/vspliv-okno.jpg

  23. CommentsСерега   |  Понедельник, 31 Март 2014 at 08:22

    Игорь — оно реализовано с помощью плагина Lightbox Plus Colorbox.

  24. CommentsАлександр   |  Воскресенье, 01 Июнь 2014 at 17:39

    хорошая статия получилась!! Я с помощью нее сделал, все, что хотел! СПАСИБО БОЛЬШОЕ!!!

  25. CommentsСерега   |  Воскресенье, 01 Июнь 2014 at 18:51

    Александр — рад что моя статья вам пришлась кстати и у Вас все получилось!

  26. CommentsВалентин   |  Среда, 02 Июль 2014 at 11:39

    Здравствуйте. Очень статья понравилась. Я в шоке, что недавно начал изучать HTML и PHP и так много можно сделать у себя на веб странице. Только у меня всплывающее картинка не получилась. Книжки электронные смотрю и толку нет. Как лучше всё узнать об этом. Или только google мне в помощь ?

  27. CommentsВалентин   |  Среда, 02 Июль 2014 at 11:42

    а куда файлик style.css девать и код куда записывать в html или php файл. И как ?

  28. CommentsСерега   |  Понедельник, 07 Июль 2014 at 23:07

    Валентин — конечно вопросы вы задали серьезные, ответить на них постараюсь емко. У каждого сайта есть таблица стилей, которая как правило создается в отдельном файле и называется style.css, но может и по другому называться — tamplate.css, самое главное смотрите на буквы после точки названия файла это css. Основной код всплывающего окна вы должны поместить в файл с таблицей стиля css (например style.css), а остальные коды вы помещаете в то место где хотите, что бы они выводили всплывающее окно, например в страницу с текстом или в запись. Пример я приводил выше как это сделать запись в комментариях от 16 Март 2014 at 12:05, там я подробно описал и привел примеры. Удачи в освоении кодов!!!

  29. CommentsВалентин   |  Понедельник, 14 Июль 2014 at 12:45

    Спасибо Сергей. С чего мне начать учиться php программированию. Мне на работе сказали написать прогу на php я написал. А как дальше изучать незнаю, книг много а в них практически всё одно и тоже. Сайт miz.hut4.ru
    Спасибо

  30. CommentsАндрей   |  Вторник, 15 Июль 2014 at 13:12

    Подскажите пожалуйста, как сделать размер окна больше размера картинки. Например картинка 100*100 находится в левом углу окна шириной 300 и текс обтекает картинку справа.
    Спасибо

  31. CommentsСерега   |  Воскресенье, 20 Июль 2014 at 00:09

    Андрей — для того, что бы сделать размер всплывающего окна больше чем размер картинке, да и что бы текст был слева от картинке это надо писать другой код, а лучше всего искать уже готовое решение в виде плагина. Изначально в основном коде можно задать ширину, высоту и цвет всплывающего окна, далее надо будет это окно разделить на две части, где слева будет картинка, а справа текст. Колдовать надо с div и class (#okno далее 2 класса .foto и .text) как пример.

  32. CommentsКонстантин   |  Суббота, 16 Август 2014 at 20:27

    а что нужно сделать, что бы не возможно было навести на картинку этого дельфина? что бы отобразалась только когда мышка на ссылке?

  33. CommentsСерега   |  Понедельник, 18 Август 2014 at 13:04

    Константин — для того чтобы вплывающее окно было не кликабельным при наведении на ссылку, можно просто расположить его чуть дальше от ссылки и в случае отведения курсора от ссылки окно просто пропадет. Расположение всплывающего окна задается следующей частью кода:
    .thumbnail:hover span{ /*CSS for enlarged image on hover*/
    visibility: visible;
    top: 0;
    left: 60px; /*position where enlarged image should offset horizontally */
    }
    в нем вам нужно будет изменить показатели top: 0; и left: 60px;.
    Попробуйте так, может поможет!

  34. CommentsДмитрий   |  Среда, 03 Сентябрь 2014 at 16:34

    Большое спасибо, всё оч. доступно и понятно, но, тут же у меня возник вопрос, подскажите пожалуйста, а как сделать чтобы вместо картинки были ссылки, как здесь — http://www.aliexpress.com — категории?

  35. CommentsСерега   |  Четверг, 04 Сентябрь 2014 at 08:41

    Дмитрий — дело в том, что на «Алиэкспресс» категории представляют меню сайта, а это совсем другая история. Скорее всего всплывающие окна с подкатегориями да и само меню категорий организованы по средством css и jquery, а возможно и java.

  36. CommentsНатка   |  Среда, 24 Сентябрь 2014 at 10:36

    Огромное спасибо за статью, очень помогла.
    Подскажите, а как убрать рамку и фото и закруглить углы?

  37. CommentsСерега   |  Среда, 24 Сентябрь 2014 at 14:22

    Натка — для того что бы при наведении на ссылку во всплывающем окне отсутствовала фотография достаточно изменить код вывода окна.
    Было так:

    <a class="thumbnail" href="#">Ссылка<span>Здесь описание<img src="ВАША КАРТИНКА" width="500"/></span></a>

    Стало так:

    <a class="thumbnail" href="#">Ссылка<span>Здесь описание</span></a>

    -убрали часть кода отвечающего за вызов картинки.
    Рамку нужно убрать из кода css .thumbnail убираем border: 1px solid white; и рамки как не бывало.
    Для округлости так же в этой части кода меняем border-radius: 4px 4px 4px 4px; на background-radius: 4px 4px 4px 4px;
    Пробуйте должно сработать!

  38. CommentsНатка   |  Среда, 24 Сентябрь 2014 at 20:50

    Благодарю за ответ! И фото- это была опечатка, должно было быть- у фото.

  39. CommentsАлла   |  Суббота, 04 Октябрь 2014 at 13:42

    Огромное спасибо за статью! В Стили код внесла.
    Но пишу код, не получается то, что хотелось бы.
    Можно ли:
    1. Чтобы при наведении на текст выдавалась картинка.
    2. При наведении на картинку выдавалась другая картинка.

  40. CommentsСерега   |  Воскресенье, 09 Ноябрь 2014 at 18:04

    Алла — все что вы написали (2 позиции) код вывода всплывающего окна при наведении на ссылку или на картинку как раз это и делает. Выше в комментариях подробно описано как и куда вставлять код вывода всплывающего окна и куда прописывать основной код.
    Для того что бы при наведении на картинку всплывала другая картинка в коде вывода Вам надо заменить адрес выводимой картинки в сплывающем окне например:

    <a class="thumbnail" href="#"><img src="ссылка на рисунок1" width="100px" height="66px" border="0" /><span><img src="ссылка на рисунок2" />Ваш текст</span></a>

    Таким образом получается, что при наведении на рисунок № 1, в сплывающем окне выводиться рисунок № 2.

  41. CommentsWebso   |  Среда, 04 Март 2015 at 16:05

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

  42. CommentsСерега   |  Среда, 04 Март 2015 at 21:37

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

  43. CommentsНиколай   |  Среда, 18 Март 2015 at 16:30

    Доброго дня Вам.
    У меня не получается т.к. профан этом, но учусь )
    Не могу найти stiyle.csc.
    Что то есть, но не пойму куда вставлять.
    com_content.css
    custom.css
    s5_responsive_rtl.css
    s5_vertex_addons.php
    template.css
    template_default.css
    template_rtl.css
    thirdparty.css
    thumbnail.css
    editor.css
    editor_rtl.css
    error.css
    s5_flex_menu.css
    s5_info_slide.css
    s5_responsive.css
    s5_responsive_bars.css
    s5_responsive_hide_classes.css
    Спасибо Вам за ранее.

  44. CommentsСерега   |  Четверг, 19 Март 2015 at 09:42

    Николай — в вашем случае нужно этот код прописать в файле стилей вашей темы в данном случае это — template.css, для того что бы вставляемый код вывода всплывающего окна при наведении курсора на ссылку или картинку не потерялся в кодах стилей, лучше всего добавить его в самый конец, так вы его легко найдете и сможете быстрее исправить и откоректировать под свой стиль!

  45. CommentsНиколай   |  Четверг, 19 Март 2015 at 10:38

    Спасибо Вам большое!
    Творческих успехов!

  46. CommentsЮрий   |  Четверг, 26 Март 2015 at 17:04

    Замечательная штука.
    А можно ли реализовать этим механизмом такой вариант

  47. CommentsЮрий   |  Четверг, 26 Март 2015 at 19:03

    Проблема в том, что при попытке вставить ссылку в код пропадает весь текст.
    Может я что-то не так делаю ?

    Видео тут <a href="1.html" title="Видео тут"

  48. CommentsЮрий   |  Четверг, 26 Март 2015 at 19:03

    не прошел весь код…

  49. CommentsСерега   |  Пятница, 27 Март 2015 at 10:23

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

  50. CommentsЮрий   |  Пятница, 27 Март 2015 at 13:02

    Сергей ! Видимо я плохо объяснил проблему….
    Мне нужно создать во всплывающем окне список типа:
    — позиция 1
    — позиция 2
    и т.д.
    При этом каждый элемент списка должен иметь свою ссылку.
    Вроде простая вещь, а не срабатывает в данном случае.

  51. CommentsЮрий   |  Пятница, 27 Март 2015 at 13:06

    естественно, что все это я делаю не в визуальном редакторе -)

  52. CommentsЮрий   |  Пятница, 27 Март 2015 at 13:07

    Или это (создание отдельных ссылок в окне) не возможно в принципе в данном случае?

  53. CommentsАлександр   |  Понедельник, 30 Март 2015 at 14:38

    Проблема в следующем: делаю все как показано, однако при вставке кода в статью — картинка тут же отображается после ссылки:

    — какой то текст АНКОР ССЫЛКИОПИСАНИЕкакой то текст,

    а еще код рубит — второй «» перед картинкой удаляет.
    может дело в CMS

  54. CommentsАлександр   |  Понедельник, 30 Март 2015 at 14:42

    ой пардон, не хотел наверно так:

    «- какой то текст АНКОРОПИСАНИЕкакой то текст»

  55. CommentsАлександр   |  Понедельник, 30 Март 2015 at 14:47

    уф как цитату вставить с примером кода:

    <!— какой то текст АНКОРОПИСАНИЕкакой то текст —>

  56. CommentsАлександр   |  Понедельник, 30 Март 2015 at 14:50

    короче так и не вышло пример вставить — СMSка рубит код, а точнее убирает span (описание). Картинка сразу отображается. как то так.

  57. CommentsСерега   |  Четверг, 02 Апрель 2015 at 21:47

    Юрий — в случае этого кода отдельные сылки в всплывающем окне сделать не получеться, для этого нужно писать или искать другой код.

  58. CommentsСерега   |  Четверг, 02 Апрель 2015 at 21:53

    Александр — возможно в вашей CMS установлена галочка на исправление кода, посмотрите в настройках. Если у вас wordpress то в кансоле админа находим «настройки» — «написание» и там первая позиция «форматирование» и убераем галочку с «WordPress должен исправлять некорректный XHTML-код автоматически» должно помочь. и еще одно условие необходимо перед вставкой кода в нужное место статьи, переключится из визуального редактора в html и вставить код всплывающего окна при наведении на сссылку или картинку.

  59. CommentsЕвгений   |  Понедельник, 06 Апрель 2015 at 16:37

    Супер. Это лучший код в интернете. СПАСИБООО

  60. CommentsАлексей   |  Пятница, 10 Апрель 2015 at 13:18

    Шикарно, спасибо большое!

  61. CommentsРома   |  Четверг, 03 Декабрь 2015 at 16:09

    А можно ли что бы на картинку всплывающей было несколько картинок с ссылками?

  62. CommentsСерега   |  Среда, 23 Декабрь 2015 at 13:04

    Рома можно, ответ таится в самом вопросе, делаете несколько разных ссылок, а всплывающую картинку у всех ссылок прописываете одну :)

  63. CommentsАртем   |  Воскресенье, 17 Январь 2016 at 14:10

    Добрый день.
    Подскажите, пожалуйста, а как сделать, чтоб всплывающее окно появлялась с задержкой и исчезало не сразу.

  64. CommentsСерега   |  Среда, 20 Январь 2016 at 17:04

    Артем в стиле кода всплывающего окна нужно будет добавить вот такой код -webkit-transition: background 1s ease;
    -moz-transition: background 1s ease;
    возможно поможет, если нет тогда ищите решение на просторах интернета!

  65. Commentstardis   |  Понедельник, 01 Февраль 2016 at 12:32

    Здравствуйте! Помогите пожалуйста!
    Поставить я всё поставил.. при наведении всё показывает только половина картинки прячется под другим блоком. Как сделать, чтобы она была поверх всего и ничто не мешало показу картинки?

  66. CommentsСерега   |  Понедельник, 01 Февраль 2016 at 12:40

    tardis — вот в этой части кода
    .thumbnail:hover{
    background-color: transparent;
    z-index: 50;
    попробует изменить значение z-index: 50; на z-index: 999; или на еще большее и тогда всплывающее окно при наведении на ссылку или на картинку должно всплывать по верх всех окон, если не выходит, надо смотреть значение z-index: для блока который располагается поверх всплывающего окна. Удачи !!!

  67. Commentstardis   |  Вторник, 02 Февраль 2016 at 04:02

    самое интересное, что ничего не менял пока, а работать перестало. просто стоит ссылка и рядом фото. НИЧЕГО не менял вообще и перестало работать……

  68. Commentstardis   |  Вторник, 02 Февраль 2016 at 04:04

    вот вся ссылка

  69. Commentstardis   |  Вторник, 02 Февраль 2016 at 04:05

    ссылка не встает у вас на сайте))))

  70. Commentstardis   |  Вторник, 02 Февраль 2016 at 04:27

    разобрался с выводом. я так понял поля не работают…
    [xfvalue_director_url]

  71. Commentstardis   |  Вторник, 02 Февраль 2016 at 05:47

    сделал z-index: по разному, не работает. Посмотрел z-index
    в другом блоке его нет. пытался и так и сяк)) один ваш код ставлю всё ок работает, как только свободное место кончается ставлю допустим 10 кодов вывода картинки то заполняется блок просто чернотой. Вот как сделать если я ставлю ваш код по порядку каждого актера, как это делать правильно? у меня блог именно под инфу в ролях и я вставляю ваш код каждого актера.

  72. CommentsСерега   |  Вторник, 02 Февраль 2016 at 08:30

    tardis — зачем каждый раз вы прописываете код, занесите этот код в папку стилей CSS, а потом уже вместе с ссылкой вставляете код вывода всплывающего окна например с описанием

    <a class="thumbnail" href="#">Ссылка<span>Здесь описание</span></a>

    Что касается блока, который у вас перекрывает всплывающее окно, то тут надо смотреть код этого блока и почему он находится в приоритетном верхнем положении (по верх всех блоков и окон). Как только найдете ответ на этот вопрос дальше у вас все должно получиться более менее аккуратно.

  73. CommentsАндрей   |  Воскресенье, 15 Май 2016 at 20:11

    Спасибо!
    Очень просто, а главное — работает!

  74. Commentsандрей   |  Пятница, 17 Июнь 2016 at 00:27

    А как сделать,чтобы подсказка сама всплывала и через некоторое время исчезала.

  75. Commentsmozg   |  Среда, 22 Июнь 2016 at 16:22

    Прекрасная работа! только не могу разобраться подскажите! каким образом (почему? как?) описание(текст) появляется внутри рамки внизу всплывающего окна, какая часть кода это устанавливает?

  76. CommentsСергей   |  Среда, 22 Июнь 2016 at 16:32

    mozg — за вывод текста, как и вывод всплывающего окна отвечает два кода:

    <a class="thumbnail" href="#">Ссылка<span>Здесь описание<img src="ВАША КАРТИНКА" width="500"/></span></a>

    и

    <a class="thumbnail" href="#"><img src="ссылка на рисунок" width="100px" height="66px" border="0" /><img src="ссылка на рисунок" />Ваш текст</span></a>

    соответственно если вы поставите в этом коде, вывод текса после кода вывода картинки, то текс будет в рамке под картинкой, а если перед выводом картинки, то текст будет вверху над картинкой. А то что текст в рамке за это отвечает код класса class=»thumbnail»

  77. Commentsmozg   |  Среда, 22 Июнь 2016 at 16:52

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

  78. Commentsmozg   |  Среда, 22 Июнь 2016 at 16:53

    span я имел в виду

  79. Commentsmozg   |  Среда, 22 Июнь 2016 at 17:01

    в боксе span выводятся картинка и текст для него же устанавливаются рамки цвет и т.д, когда на бокс span наводится курсор он становится видимым, в обычном состоянии не видим но присутствует на странице. а left: -1000px для чего?

  80. Commentsmozg   |  Среда, 22 Июнь 2016 at 17:15

    спасибо за код! для меня как для начинающего это настоящий подарок из него можно много чего сделать.

  81. Commentselena   |  Среда, 22 Июнь 2016 at 17:40

    А что именно отвечает за вывод элемента? css или функция thumbnail? У меня выходит так http://joxi.ru/zANe7z4uXyLE29

  82. Commentselena   |  Среда, 22 Июнь 2016 at 17:44

    то есть окно показывается до наведения мыши на него

  83. CommentsГригорий   |  Четверг, 01 Сентябрь 2016 at 11:43

    Большое Вам спасибо!

  84. CommentsДмитрий   |  Четверг, 27 Октябрь 2016 at 15:27

    На вашем примере левый блок (наша продукция) Все работает в Мозиле и IE. НО! некорректно отображает изображения в браузерах Хром и Яндекс.

    PS/ слишком мелкие картинки

Оставить комментарий






Подписаться

Рекомендую