Как скрытый блок отображать слева от указателя мыши (JS)

Yaba
На сайте с 06.02.2010
Offline
32
602

Всем привет!

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

Подопытный: http://ispeak.webmedia.asia/index.php?option=com_wrapper&view=wrapper&Itemid=106

Там справа есть ромбики - при наведении отображается hidden div, показывающий нужный контент.

За эту фичу отвечает следующий код:

<script> 

var hide=true;//глобальная переменная, отвечающая будет ли строка передана в подсказку
function movePic(word){
_x=window.event.clientX;
_y=window.event.clientY;
_dx=5
left=false;right=false;
if(_dx+_x+myalt.clientWidth>document.body.clientWidth){_x=document.body.clientWidth-myalt.clientWidth-_dx;left=true;}
if(_dx+_y+myalt.clientHeight>document.body.clientHeight){_y=document.body.clientHeight-myalt.clientHeight-_dx;right=true;}
if(left&&right)_y=document.body.clientHeight-myalt.clientHeight-_dx*4;
myalt.style.left=_x;
myalt.style.top=_y+document.body.scrollTop;
if(hide){
myalt.innerHTML=word;
myalt.style.visibility="visible";
hide=false;
}
}
function hidePic(){
myalt.style.visibility="hidden";
myalt.innerHTML="";
myalt.style.top=0;
myalt.style.right=0;
hide=true;
}
</script>

а в теле скрытый div:

<div id="myalt" style="visibility:hidden; position:absolute; display:block;position:absolute;top:2em; left:2em; width:16em;border:1px solid  #0B79A8;

background-color:#fff; color:#000;text-align:left;z-Index:3;margin-left:12px;padding:10px;color:#404040;font-family:calibri;"></div>

и, соответственно, сами события, дающие текст для выводящейся подсказки:

onmousemove="movePic('<strong>Corporate English<br>(Корпоративный английский)</strong><p>Позволяет сотрудникам вашей компании пройти курсы «General English» или «Business English» с учетом любых ваших требований и пожеланий. Если у вас нет возможности посещать занятия по расписанию, преподаватель приедет в вашу организацию и подберет наиболее удобную программу.</p>')" onmouseout="hidePic()"

Методом замены в первом кусе кода left на right смог добиться того, что подсказка появлется на противоположной стороне страницы. А как ее сделать просто слева от курсора (т.к. сами ромбы справа - неудобные "моргания" при наведении и нехватке места для показа, нужно сместить слой левее).

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

Заранее огромное Вам спасибо!

:beer:

L5
На сайте с 22.07.2010
Offline
25
#1

глупо, ну да ладно. для id="myalt" margin-left:-232px;

<div id="myalt" style="visibility:hidden; position:absolute; display:block;position:absolute; width:16em;border:1px solid #0B79A8;

background-color:#fff; color:#000;text-align:left;z-Index:3;margin-left:-232px;padding:10px;color:#404040;font-family:calibri;"></div>

Отсрочка войны ведёт к выгоде твоего соперника
Yaba
На сайте с 06.02.2010
Offline
32
#2

Leonov, работает!

Огромное Вам спасибо!

Я сам бы не догадался 🍻🍻🍻

(не знаю как тут добавлять репутацию, подскажите)

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий