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

@Sergio Aguero · Регистрация: 11.04.2012

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

Вот такое как на рисунке??
Типо при наведении на ссылку всплывает окно)
канешн это jquery.
но как реализовано я не понимаю))

@Para bellum · 07.10.2012, 08:36

Вот. Стили объяснять не буду, с ними и так понятно:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<style>
        .link_test
        {
          position:relative;
            }
        
        .title
        {
          display:none; height:100px; width:200px; background:#fffed2; border:1px solid #838231; padding:5px; position:absolute;
          margin-left:120px; top:5px; z-index:100;
            }
        .index
        {
          position:absolute; height:5px; width:10px; background:red; left:-5px;
            }
    </style>

Вот HTML код ссылок и блоков с текстом (можно вставить картинку):

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<a href="" title="#title_for_first_link" class="link_test">Наведите мышку</a><br />
    <a href="" title="#title_for_two_link" class="link_test">Наведите мышку</a><br />
    <a href="" title="#title_for_three_link" class="link_test">Наведите мышку</a>
    
    <div id="title_for_first_link" class="title">
        <div class="index"></div>
        Тут какой-нибудь HTML код для первой ссылки
    </div>
    
    <div id="title_for_two_link" class="title">
        <div class="index"></div>
        Тут какой-нибудь HTML код для второй ссылки
    </div>
    <div id="title_for_three_link" class="title">
        <div class="index"></div>
        Тут какой-нибудь HTML код для третьей ссылки
    </div>

Вот сам jQuery код:

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
<script>
    $(document).ready(function(){
    
        // При наведении на ссылку
        $(".link_test").mouseover
        (function(){
            
            // Получаем ID блока, который нужно показать
            var title = $(this).attr("title");
            
            // Показываем блок
            $(this).append( $(title) );
            $(title).fadeIn();
        });
        
        // При уходе мышки со ссылки
        $(".link_test").mouseout
        (function(){
            
            // Получаем ID блока, который нужно показать
            var title = $(this).attr("title");
            
            // Скрываем блок
            $(title).fadeOut();
            
        });
    });
</script>

Тут всё работает так:
В title ссылки указываем ID блока, в котором содержится информация, которую нужно отобразить при наведении на ссылку. При наведении на ссылку title вытягивается и блок с этим ID показывается в том месте, где ему указано оторазиться в CSS стилях.
P.S. Блок с указанным ID помещается внутрь ссылки при наведении на неё. Поэтому блок отображается относительно ссылки.

@Sergio Aguero · 08.10.2012, 19:17 **[ТС]**

Lyodik, все сделал как ты написал, но они почему-то прыгают туда-сюда дивчики эти при наведении на ссылку!!!!

Добавлено через 51 минуту
может дивчик надо за пределы таблицы поместить?

@Soldado · 08.10.2012, 22:10

Можно всё делать и таким способом- получать координаты ссылки , затем присваивать эти координаты блоку (+ смещение, чтобы блок был немного в стороне) и подгружать в него картинку имя которой совпадает с id ссылки.

Смотрим что получается.

@Sergio Aguero · 09.10.2012, 13:25 **[ТС]**

Soldado, не работает код твой

Добавлено через 3 часа 57 минут
все разобрался, а как регулировать размер всплывающей картинки???

@maximus2011 · 09.10.2012, 16:27

Сообщение от Sergio Aguero

Soldado, не работает код твой

А я вот так сделал!

HTML5
1
2
3
4
<div class="titleEditIcon_2">
   <img src="images/settings.png" width="30" height="30" border="0" onClick="location.href = 'index.php'">
   <span class="titleHelp_2"><p class="ed_1">Редактировать</p></span>
</div>

JavaScript
1
2
3
4
5
6
7
8
9
10
$(document).ready(function() {
    var helpWindow = $('.titleEditIcon_2');
    
    helpWindow.mouseover(function() {
                                  $('.titleHelp_2').css('display','inline-block');
                                  });
    helpWindow.mouseout(function() {
                                 $('.titleHelp_2').css('display','none');
                                 });
});

@Soldado · 10.10.2012, 10:25

Сообщение от Sergio Aguero

как регулировать размер всплывающей картинки???

Если ещё не разобрались, отвечаю: картинка выводится в блоке для которого задан стиль/размеры

CSS
1
2
3
4
5
6
7
8
#demoImg{
position: absolute;
top: 200px;
left: 600px;
width:231px;
height:218px;
display:none;
}

Меняйте размеры блока и размеры картинок на требуемые вам.

Сообщение от Sergio Aguero

Soldado, не работает код твой

Странно это читать, почти каждый свой пост "иллюстрирую" примером. Что же тогда работает в моих примерах если не код? Вопрос риторический

@Vors · 28.08.2014, 11:11

КОД

HTML5
1
 <a href="https://yadi.sk/d/lDhCFTlQaTCYm"><span style="font-size:18px;background-color:darkred;color:white;border:1px solid #fff;">&nbsp;&nbsp;«Воспоминания»&nbsp;&nbsp;</span>></a

нужно чтоб при наведении мыши на ссылку появлялось всплывающее окошко 120 ев 70 пикселей
с текстом посередине (Сохранить файл)

Какой тег нужно вставить в имеющийся код
и в какую его часть?

Новые блоги и статьи Все статьи Все блоги /
PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Access VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .	Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .	Создание Single Page Application на фреймах krapotkin 16.11.2025 Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .

@Sergio Aguero 452 / 443 / 21 Регистрация: 11.04.2012 Сообщений: 2,076

	При наведении на ссылку показать всплывающее окно 07.10.2012, 06:24. Показов 33301. Ответов 7 Метки нет (Все метки) Вот такое как на рисунке?? Типо при наведении на ссылку всплывает окно) канешн это jquery. но как реализовано я не понимаю)) Миниатюры 0

@Sergio Aguero 452 / 443 / 21 Регистрация: 11.04.2012 Сообщений: 2,076
	08.10.2012, 19:17 [ТС]
	Lyodik, все сделал как ты написал, но они почему-то прыгают туда-сюда дивчики эти при наведении на ссылку!!!! Добавлено через 51 минуту может дивчик надо за пределы таблицы поместить? 0

@Soldado 901 / 833 / 198 Регистрация: 28.06.2012 Сообщений: 1,607 Записей в блоге: 4
	08.10.2012, 22:10
	Можно всё делать и таким способом- получать координаты ссылки , затем присваивать эти координаты блоку (+ смещение, чтобы блок был немного в стороне) и подгружать в него картинку имя которой совпадает с id ссылки. Смотрим что получается. 0

@Sergio Aguero 452 / 443 / 21 Регистрация: 11.04.2012 Сообщений: 2,076
	09.10.2012, 13:25 [ТС]
	Soldado, не работает код твой Добавлено через 3 часа 57 минут все разобрался, а как регулировать размер всплывающей картинки??? 0