Всплывающие 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>
|