Картинка при наведении на ссылку

@hakerol · Регистрация: 01.01.2015

Студворк — интернет-сервис помощи студентам

Как сделать, чтобы картинка всплывала при наведении на ссылку (текст).

@KitoChimoto · 02.01.2015, 00:19

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

@SFED · 02.01.2015, 00:28

С использованием jquery:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<a href="#" id="link">Наведи на меня</span>
<img src="https://www.cyberforum.ru/images/cyberforum_logo.png" id="img"/>
<style>
#img {
    position:absolute;
}
</style>
<script>
 
$('#img').hide();
 
$('#link').mouseover(function() {
    $('#img').show();
});
 
$('#link').mouseleave(function() {
    $('#img').hide();
});
</script>

@ByBus · 02.01.2015, 00:52

Да, можно обычным css обойтись.
www.cssportal.com/css-tooltip-generator/
Там где написано Tooltip, вот туда можешь картинку засунуть.

Добавлено через 10 минут
вот так вот
http://jsfiddle.net/67e1a8uq/

HTML5
1
2
<a class="tooltips" href="#">ССЫЛКА
<span><img src="http://img1.liveinternet.ru/images/attach/b/0/10189/10189692_12681838.gif"/></span></a>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
a.tooltips {
  left:25%;
   top:150px;
  position: relative;
  display: inline;
}
a.tooltips span {
  position: absolute;
  width:140px;
  color: white;
  background: #CCC;
  height: 100px;
  line-height: 64px;
  text-align: center;
  visibility: hidden;
  border-radius: 6px;
}
a.tooltips span:after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -8px;
  width: 0; height: 0;
  border-top: 8px solid #000000;
  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
}
a:hover.tooltips span {
  visibility: visible;
  opacity: 0.8;
  bottom: 30px;
  left: 50%;
  margin-left: -76px;
  z-index: 999;
}

@hakerol · 02.01.2015, 14:07 **[ТС]**

не получается http://www.volunteer.org.ua/?p... eview=true

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<a class="tooltips" href="http://images.vfl.ru/ii/1418140466/cccf1a57/7178618.jpg">прапрап
<span><img src="http://images.vfl.ru/ii/1418140466/cccf1a57/7178618.jpg"/></span></a>
<script>
a.tooltips {
  left:25%;
   top:150px;
  position: relative;
  display: inline;
}
a.tooltips span {
  position: absolute;
  width:140px;
  color: white;
  background: #CCC;
  height: 100px;
  line-height: 64px;
  text-align: center;
  visibility: hidden;
  border-radius: 6px;
}
a.tooltips span:after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -8px;
  width: 0; height: 0;
  border-top: 8px solid #000000;
  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
}
a:hover.tooltips span {
  visibility: visible;
  opacity: 0.8;
  bottom: 30px;
  left: 50%;
  margin-left: -76px;
  z-index: 999;
}
</script>

Добавлено через 1 час 54 минуты
Поможеш?

Добавлено через 12 секунд
KitoChimoto, Поможеш?

@KitoChimoto · 02.01.2015, 14:13

по моему все намного проще чем кажется на первый взгляд:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>картинка при наведении на ссылку</title>
<style>
 a img
 {
     width:100px;
     height:100px;
     position:absolute;
     visibility:hidden;
 }
 a:hover >img
 {
     visibility:visible;
 }
</style>
</head>
 
<body>
<a src="#">ССЫЛКА<img src=""></a>
</body>
</html>

@hakerol · 02.01.2015, 14:36 **[ТС]**

KitoChimoto, только фото очень большое. как сделать поменьше

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>картинка при наведении на ссылку</title>
<style>
 a img
 {
     width:100px;
     height:100px;
     margin:10px;
     position: relative;
        left: -50px;
        top: -50px;
     visibility:hidden;
 }
 a:hover >img
 {
     visibility:visible;
 }
</style>
</head>
 
<body>
<a src="">k<img src="http://images.vfl.ru/ii/1418140466/cccf1a57/7178618.jpg"></a>
</body>
</html>

http://www.volunteer.org.ua/gh... 55d09add97

@KitoChimoto · 02.01.2015, 14:47

нужно указать размеры для картинки в пикселях(width или height), а то судя по всему у там размеры 100% стоят, ну или можно само фото на фотошопе уменьшить, ну это крайний вариант.

@hakerol · 02.01.2015, 14:51 **[ТС]**

KitoChimoto, даже если так сделать :

HTML5
1
2
3
4
5
6
7
8
9
{
     width:50px;
     height:50px;
     margin:50px;
     position: relative;
        left: -50px;
        top: -50px;
     visibility:hidden;
 }

Размер не меняется.
а, и еще фейл. пропадает изображение как здесь http://www.volunteer.org.ua/media/foto/

@KitoChimoto · 02.01.2015, 14:57

странно наверное стили не прицепляюся или где-то они неправильно подключены, попробуйте вот так

HTML5
1
<a src="#">cdbsmbcc <img src="" style="width:50px;height:50px;"></a>

@hakerol · 02.01.2015, 15:22 **[ТС]**

KitoChimoto, http://www.volunteer.org.ua/gh... 5420e56c31 - вишло что-то такое. но все равно пропадает изображение возле надписи "Громадянький корпус"

@KitoChimoto · 02.01.2015, 15:38

ну надо искать ошибки в верстке, потому что судя по всему его там просто нет. А с картинкой автобуса тоже какая-то запарка потому что для нее все равно не прописана ширина и высота.

@hakerol · 02.01.2015, 15:41 **[ТС]**

http://www.volunteer.org.ua/gh/

@KitoChimoto · 02.01.2015, 15:46

position должен быть absolute! а float вообще убрать!

@hakerol · 02.01.2015, 15:53 **[ТС]**

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

@KitoChimoto · 02.01.2015, 15:57

ну это печально. ну и как я понял ещё и создаете с помощью какой-то cms, а не с нуля все верстаете?

@hakerol · 02.01.2015, 16:07 **[ТС]**

wordpress

@KitoChimoto · 02.01.2015, 16:16

ну понятно, кстати достаточно распространенная проблема, много кто начинает лепить сайты на всяких cms при этом толком не зная html и css, а потом сидят просят помощи на таких форумах. по этому мой совет сначала надо выучить html и css, а потом уже браться за дело! Например можно пройти онлайн курсы вот здесь:http://www.codecademy.com

Новые блоги и статьи Все статьи Все блоги /
Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Символьное дифференцирование igorrr37 13.02.2026 / * Программа принимает математическое выражение в виде строки и выдаёт его производную в виде строки и вычисляет значение производной при заданном х Логарифм записывается как: (x-2)log(x^2+2) -. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .
И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»	SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .

Картинка при наведении на ссылку

Решение

Решение

@hakerol 0 / 0 / 0 Регистрация: 01.01.2015 Сообщений: 12

	Картинка при наведении на ссылку 02.01.2015, 00:08. Показов 19325. Ответов 17 Метки нет (Все метки) Как сделать, чтобы картинка всплывала при наведении на ссылку (текст). 0

@KitoChimoto 86 / 43 / 11 Регистрация: 19.10.2013 Сообщений: 157
	02.01.2015, 00:19
	блок с картинкой помещаешь внутри ссылки и делаешь его невидимым и с позишин абсолют, потом в стилях при ховере на ссылку делаешь видимой картинку! если надо завтра с утра могу с бацать, а то сегодня уже бошка не варит. 1

@KitoChimoto 86 / 43 / 11 Регистрация: 19.10.2013 Сообщений: 157
	02.01.2015, 14:47
	нужно указать размеры для картинки в пикселях(width или height), а то судя по всему у там размеры 100% стоят, ну или можно само фото на фотошопе уменьшить, ну это крайний вариант. 0

@hakerol 0 / 0 / 0 Регистрация: 01.01.2015 Сообщений: 12
	02.01.2015, 15:22 [ТС]
	KitoChimoto, http://www.volunteer.org.ua/gh... 5420e56c31 - вишло что-то такое. но все равно пропадает изображение возле надписи "Громадянький корпус" 0

@KitoChimoto 86 / 43 / 11 Регистрация: 19.10.2013 Сообщений: 157
	02.01.2015, 15:38
	ну надо искать ошибки в верстке, потому что судя по всему его там просто нет. А с картинкой автобуса тоже какая-то запарка потому что для нее все равно не прописана ширина и высота. 1

@hakerol 0 / 0 / 0 Регистрация: 01.01.2015 Сообщений: 12
	02.01.2015, 15:41 [ТС]
	http://www.volunteer.org.ua/gh/ 0

@KitoChimoto 86 / 43 / 11 Регистрация: 19.10.2013 Сообщений: 157
	02.01.2015, 15:46
	position должен быть absolute! а float вообще убрать! 1

@hakerol 0 / 0 / 0 Регистрация: 01.01.2015 Сообщений: 12
	02.01.2015, 15:53 [ТС]
	KitoChimoto, главная проблема в том что я не сисадмин сайта и даже не имею ftp доступа. Все что я могу делать, создавать новие страницы или же редактировать, те которые я создал. 0

@KitoChimoto 86 / 43 / 11 Регистрация: 19.10.2013 Сообщений: 157
	02.01.2015, 15:57
	ну это печально. ну и как я понял ещё и создаете с помощью какой-то cms, а не с нуля все верстаете? 1

@hakerol 0 / 0 / 0 Регистрация: 01.01.2015 Сообщений: 12
	02.01.2015, 16:07 [ТС]
	wordpress 0

@KitoChimoto 86 / 43 / 11 Регистрация: 19.10.2013 Сообщений: 157
	02.01.2015, 16:16
	ну понятно, кстати достаточно распространенная проблема, много кто начинает лепить сайты на всяких cms при этом толком не зная html и css, а потом сидят просят помощи на таких форумах. по этому мой совет сначала надо выучить html и css, а потом уже браться за дело! Например можно пройти онлайн курсы вот здесь:http://www.codecademy.com 1