Как вывести дополнительную информацию при наведение на объект мышкой?

Question

[Данила Зайцев]

Доброе утро всем не спящим) У меня такой вопрос, необходимо на сайте при наведение мышкой на тот или иной объект (у меня объект через SVG выведен в коде прописан как map area)

<map name="interactiv">
    <area title="Здесь Вы можете найти информацию по трудоустройству" shape="poly" href="/#1" coords="100,772,76,784,70,782,65,779,62,780,59,780,56,783,53,786,54,791,54,797,42,804,30,811,30,812,30,814,32,838,33,862,33,863,33,864,44,872,55,879,57,878,59,876,60,879,61,882,129,918,198,954,210,962,222,970,267,944,313,917,313,889,313,860,302,855,292,850,287,853,282,855,273,850,263,845,263,844,262,843,261,844,259,844,203,816,146,787,146,778,145,769,134,764,124,759,124,759,124,759">
</map>

Так вот в чем суть вопроса. Сейчас дополнительная информация у меня выведена через title, как вы можете видеть, меня данный вариант не устраивает(
Хочу реализовать нечто подобное, как на данном сайте.

Мне не нужен многоугольник, мне бы хватило прямоугольника и текста в нем, чтобы это было зрительно читаемо, а не как в title.
Как подсвечивать объект при наведение я вроде как понял, а вот как реализовать данное всплывающее окно не совсем понятно. Кому не сложно помогите примером каким-нибудь хорошим. Буду примного благодарен.
P.s.Завтра предзащита ВКР :D

Answer 1

[Алексей]

По факту div с opacity:0 при наведение на ссылку opacity: >0 и все.
Вот пример, только он перекрывает изображение, вам необходимо будет сделать позиционирование.

Comments

[Данила Зайцев]

Я правильно понимаю, что блоки с текстом нужно ставить за пределами "map"? Я просто давненько пробовал в map засунуть - у меня меня почему-то совсем отображаться переставало тогда.

Answer 2

[xmoonlight]

Сделано там на Raphael.js
Почитайте API и все.
dmitrybaranovskiy.github.io/raphael/reference.html...
Еще такой код могу предложить:

var div = document.createElement('div');
         var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0)
         var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0)
         div.style.width=Math.min(w/2,300)+'px';
         div.style.position='fixed';
         div.style.textAlign='center';
         div.name='popup';
         div.id='popup';
         div.className='popup';
         div.style.margin=0;
         div.style.padding='25px 25px 25px 25px'; 
         div.style.background='#808080';
         div.style.top=(h/4)+'px';
         div.style.left=(w/2)-((Math.min(w/2,300)/2)+25)+'px';
         div.innerHTML='Press Ctrl+D (&#8984;+D in Mac OS) for adding this page to Favorites<br><br><br><a class="linkbutton" href="javascript:" onClick=popup.parentNode.removeChild(popup)>&nbsp;&nbsp;&nbsp;OK&nbsp;&nbsp;&nbsp;</a>';
         document.body.insertBefore(div, document.body.firstChild);

Answer 3

[Данила Зайцев]

В общем, прицепил я div, спрятал через опасити, как в примере Алексей , но тут незадача, при наведение на всю картинку вылазит этот див, как можно его соединить с areaили прицепить с элементом по классу? Если меняю класс на отличный от класса с фоном, то текст просто под картинку вылазит.