Код:
<script language="JavaScript">
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);
</script>
- Сам скрипт
Код HTML:
<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><img alt="" src="Картинка, к которой применяется подсказка" height="102" width="162"><span class="prompt"><div id="publ_full"></div></span></a>
- Отображение подсказки (<span class="prompt"><div id="publ_full"></div></span>)
Код:
<script type="text/javascript">
$('#publ_full').load('Сылка на файл');
</script>
- скрипт, определяющий содержимое подсказки, т.е. читает html файл с файлового каталога сайта.
Проблема в том, что подсказка появляется лишь при полной загрузки страницы. Приходится ждать очень долго, да и подсказка не всегда отображается...
Как решить эту проблему и есть ли способы задания всплывающих подсказок (содержащих любой элемент) более проще, чем этот?
Спасибо всем, кто поможет)