Всплывающая подсказка
Помогите пожалуйста разобраться с подсказкой. Два дня сам мучал ничего не получается. Javascript на нулевом уровне пока.
1. Над, чтоб подсказка появлялась не "справа-ниже" от курсора, а "справа-выше". Тобиш получается, что мне над знать высоту подсказки чтоли...А как? Данные у меня динамически заполняется из мускула. 2. Как сделать чтоб когда курсор находится над подсказкой то подсказка не пряталась. 3. И как сделать чтоб когда курсор находится над подсказкой при щелчке мышкой подсказка бы пряталась var myprompt=document.createElement('div'); myprompt.id='prompt'; myprompt.style.display='none'; myprompt.style.position='absolute'; myprompt.style.top='0px'; myprompt.style.left='0px'; myprompt.show_delay=100; myprompt.hide_delay=0; myprompt.cursor_shiftX=20; myprompt.cursor_shiftY=0; myprompt.prompt_elements=new Array('a'); function showPrompt(event){ if(!event) event=window.event; if(myprompt.mustShow==undefined){ if(myprompt.timer_id){ window.clearInterval(myprompt.timer_id); myprompt.mustHide=undefined; } myprompt.next_message=this.prompt_text; myprompt.mustShow=true; myprompt.oldX=event.clientX+document.body.scrollLeft; myprompt.oldY=event.clientY+document.body.scrollTop; myprompt.timer_id=window.setInterval('showPrompt();',myprompt.show_delay); }else{ window.clearInterval(myprompt.timer_id); myprompt.innerHTML=myprompt.next_message; myprompt.timer_id=undefined; myprompt.mustShow=undefined; myprompt.style.left=(myprompt.oldX+myprompt.cursor_shiftX)+'px'; myprompt.style.top=(myprompt.oldY+myprompt.cursor_shiftY)+'px'; myprompt.style.display='block'; } } function hidePrompt(){ if(myprompt.mustHide==undefined){ if(myprompt.timer_id){ window.clearInterval(myprompt.timer_id); myprompt.mustShow=undefined; } myprompt.mustHide=true; myprompt.timer_id=window.setInterval('hidePrompt();',myprompt.hide_delay); }else{ window.clearInterval(myprompt.timer_id); myprompt.timer_id=undefined; myprompt.mustHide=undefined; myprompt.style.display='none'; } } function refreshPromptCoords(event){ if(myprompt.mustShow==undefined) return; if(!event) event=window.event; myprompt.oldX=event.clientX+document.body.scrollLeft; myprompt.oldY=event.clientY+document.body.scrollTop; } function setPromptEvents(){ document.body.appendChild(myprompt); for(var k=0; k<myprompt.prompt_elements.length; k++){ var anchors=document.getElementsByTagName(myprompt.prompt_elements[k]); for(var i=0; i<anchors.length; i++){ var spans=anchors[i].getElementsByTagName('span'); if(spans.length==0) continue; for(var j=0; j<spans.length; j++){ if(spans[j].className=='prompt'){ anchors[i].prompt_text=spans[j].innerHTML; break; } } if(!anchors[i].prompt_text) continue; anchors[i].onmouseover=showPrompt; anchors[i].onmouseout=hidePrompt; anchors[i].onmousemove=refreshPromptCoords; } } } if (typeof document.attachEvent!='undefined') window.attachEvent('onload',setPromptEvents); else window.addEventListener('load',setPromptEvents,false); вызывается как: <style type="text/css"> div#prompt { padding: 4px;background:#FCF1C3;border:1px solid #999999;font-size:11px;color:#555555;width: 250px; } span.prompt { display:none; } </style> <a href="">текст <span class="prompt">подсказка</span></a> |
var myprompt=document.createElement('div'); myprompt.id='prompt'; myprompt.style.display='none'; myprompt.style.position='absolute'; myprompt.style.top='0px'; myprompt.style.left='0px'; myprompt.show_delay=100; myprompt.hide_delay=1000; myprompt.cursor_shiftX=20; myprompt.cursor_shiftY=-25; myprompt.prompt_elements=new Array('a'); function showPrompt(event){ if(!event) event=window.event; if(myprompt.mustShow==undefined){ if(myprompt.timer_id){ window.clearInterval(myprompt.timer_id); myprompt.mustHide=undefined; } myprompt.next_message=this.prompt_text; myprompt.mustShow=true; myprompt.oldX=event.clientX+document.body.scrollLeft; myprompt.oldY=event.clientY+document.body.scrollTop; myprompt.timer_id=window.setInterval('showPrompt();',myprompt.show_delay); }else{ window.clearInterval(myprompt.timer_id); myprompt.innerHTML=myprompt.next_message; myprompt.timer_id=undefined; myprompt.mustShow=undefined; myprompt.style.left=(myprompt.oldX+myprompt.cursor_shiftX)+'px'; myprompt.style.top=(myprompt.oldY+myprompt.cursor_shiftY)+'px'; myprompt.style.display='block'; } } function hidePrompt(){ if(myprompt.mustHide==undefined){ if(myprompt.timer_id){ window.clearInterval(myprompt.timer_id); myprompt.mustShow=undefined; } myprompt.mustHide=true; myprompt.timer_id=window.setInterval('hidePrompt();',myprompt.hide_delay); }else{ window.clearInterval(myprompt.timer_id); myprompt.timer_id=undefined; myprompt.mustHide=undefined; myprompt.style.display='none'; } } function refreshPromptCoords(event){ if(myprompt.mustShow==undefined) return; if(!event) event=window.event; myprompt.oldX=event.clientX+document.body.scrollLeft; myprompt.oldY=event.clientY+document.body.scrollTop; } function setPromptEvents(){ document.body.appendChild(myprompt); for(var k=0; k<myprompt.prompt_elements.length; k++){ var anchors=document.getElementsByTagName(myprompt.prompt_elements[k]); for(var i=0; i<anchors.length; i++){ var spans=anchors[i].getElementsByTagName('span'); if(spans.length==0) continue; for(var j=0; j<spans.length; j++){ if(spans[j].className=='prompt'){ anchors[i].prompt_text=spans[j].innerHTML; break; } } if(!anchors[i].prompt_text) continue; anchors[i].onmouseover=showPrompt; anchors[i].onmouseout=hidePrompt; anchors[i].onmousemove=refreshPromptCoords; myprompt.onmouseout = hidePrompt; myprompt.onmouseover = function(){ clearTimeout(myprompt.timer_id); myprompt.mustHide = undefined; } myprompt.onclick = function() { myprompt.mustHide = true; hidePrompt(); } } } } if (typeof document.attachEvent!='undefined') window.attachEvent('onload',setPromptEvents); else window.addEventListener('load',setPromptEvents,false); |
Часовой пояс GMT +3, время: 20:31. |