Информатика и информационные технологии Электротехника История искусства Каталог графических примеров

Примеры скриптов для клиента на языке JavaScript начало

Всплывающие Alt-ы


Скрипт демонстрирует, как можно показывать пользователю, зашедшему на страничку, всплывающие подсказки, при наведении мышки на ссылку. Впринципе можно заставить всплывать на ссылке всё, что угодно :)

  Листинг
<style 
type="text/css"> #divDescription{position:absolute; 
width:200; visibility:hidden; z-index:200} .clDescription{width:150; font-family:verdana,arial,helvetica; 
font-size:11px; background-color:#cccccc; padding:3px; border: 1px solid #999999} 
#divlinks{position:absolute; left:100; top:200; z-index:1} 
</style> 
<SCRIPT LANGUAGE=JAVASCRIPT> //Default browsercheck, added to all 
scr // ipts!  function checkBrowser(){ this.ver=navigator.appVersion this.dom=document.getElementById?1:0 
this.ie5=(this.ver.indexOf("MSIE 5")>-1 
&& this.dom)?1:0; this.ie4=(document.all && !this.dom)?1:0; this.ns5=(this.dom 
&& parseInt(this.ver) >= 
5) ?1:0; this.ns4=(document.layers && !this.dom)?1:0; this.bw=(this.ie5 
|| this.ie4 || this.ns4 || this.ns5) return 
this 
} 

bw=new 
checkBrowser() /*************************************************************************************** 
Variables to set: ***************************************************************************************/ 
messages=new Array() //Write your descriptions in here. 
messages[0]="Description of test link 0" 
messages[1]="Description of test link 1" messages[2]="Description 
of test link 2" messages[3]="Description of test link 3" messages[4]="Description 
of test link 4" //To have more descriptions just add 
to // the array. fromX=50 //How much from the actual mouse X should 
the description box appear? fromY=-20////How much from the actual mouse Y should 
the description box appear? //To set the font size, font type, 
borde // r color or remove the border or whatever // , //change the clDescription 
class in the // stylesheet. //Makes crossbrowser object. function 
makeObj(obj){ this.css=bw.dom? document.getElementById(obj).style:bw.ie4?document.all[obj].style:bw.ns4?document.layers[obj]:0;	
this.wref=bw.dom? document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?document.layers[obj].document:0;	
this.writeIt=b_writeIt; return 
this 
} 

function b_writeIt(text){if(bw.ns4){this.wref.write(text);this.wref.close()} 
else 
this.wref.innerHTML=text} //Capturing mousemove var descx,descy; 
function 
popmousemove(e){descx=bw.ns4?e.pageX:event.x; descy=bw.ns4?e.pageY:event.y} //Initiates page var isLoaded; 
function 
popupInit(){ oDesc=new makeObj('divDescription') if(bw.ns4)document.captureEvents(Event.MOUSEMOVE) 
document.onmousemove=popmousemove; isLoaded=true; } 

//Показываем 
сообщения  function popup(num){ if(isLoaded){ oDesc.writeIt('<span 
class="clDescription">'+messages[num]+'</span>') 
if(bw.ie5) descy=descy+document.body.scrollTop oDesc.css.left=descx+fromX; oDesc.css.top=descy+fromY 
oDesc.css.visibility='visible' } 

} 

//скрываем 
их  function popout(num){ if(isLoaded) oDesc.css.visibility='hidden' 
} 

//initiates 
page on pageload. onload=popupInit; </SCRIPT> 
</HEAD> <BODY bgcolor="White"> 
<DIV id="divDescription"> <!--Empty 
div--> 
</DIV> <DIV id="divLinks"> 
<!-- 
Just delete this 
layer, it's just here for 
the example links --> 
<A href="#" onmouseover="popup(0)" 
onmouseout="popout(0)">test 
link 0</A> - <A href="#" 
onmouseover="popup(1)" onmouseout="popout(1)">test 
link 1</A> - <A href="#" 
onmouseover="popup(2)" onmouseout="popout(2)">test 
link 2</A> - <A href="#" 
onmouseover="popup(3)" onmouseout="popout(3)">test 
link 3</A> - <A href="#" 
onmouseover="popup(4)" onmouseout="popout(4)">test 
link 4</A> </DIV>
Начертательная геометрия и инженерная графика, перспектива