Добрый день!
Имеется такая интерактивная картинка:
http://beton-art.ru/svgmy.html
При наведении курсора на некоторые детали фасада они подсвечиваются и вылезает окошко с описанием детали (кстати, если у кого-то не работает - напишите, пожалуйста, свою версию браузера)
Сделано по образцу:
http://www.dejurka.ru/css/interactiv...ss-animations/
Окошко с описанием всегда всплывает из одного места, позиция которого определена в CSS, например:
|
Код:
|
#okna-badge {
-webkit-transform-origin: 445px 488px;
-moz-transform-origin: 445px 488px;
-ms-transform-origin: 445px 488px;
-o-transform-origin: 445px 488px;
transform-origin: 445px 488px;
} |
А у нас на картинке, как видно, один и тот же элемент может быть повторяющимся, то есть расположенным в любой части фасада. И как-то не эстетично получается: наводишь на элемент на крыше дома, а окно вылезает откуда-то снизу.
Как сделать так, чтобы окно с описанием вылезало из того места, где в данный момент находится мышь?
Я понимаю, как получить координаты мыши, но не знаю, как их привязать к свойству transform-origin. И нужно ли это делать для каждого id, или можно обойтись чем-то вроде [id$=badge]...