Cursor follow example : Cursor « GUI Components « JavaScript DHTML

JavaScript DHTML
1. Ajax Layer
2. Data Type
3. Date Time
4. Development
5. Document
6. Event
7. Event onMethod
8. Form Control
9. GUI Components
10. HTML
11. Javascript Collections
12. Javascript Objects
13. Language Basics
14. Node Operation
15. Object Oriented
16. Page Components
17. Security
18. Style Layout
19. Table
20. Utilities
21. Window Browser
Microsoft Office Word 2007 Tutorial
Java
Java Tutorial
Java Source Code / Java Documentation
Java Open Source
Jar File Download
Java Articles
Java Products
Java by API
C# / C Sharp
C# / CSharp Tutorial
ASP.Net
JavaScript Tutorial
JavaScript Reference
HTML / CSS
HTML CSS Reference
C / ANSI-C
C Tutorial
C++
C++ Tutorial
PHP
Python
SQL Server / T-SQL
Oracle PL / SQL
Oracle PL/SQL Tutorial
PostgreSQL
SQL / MySQL
MySQL Tutorial
VB.Net
VB.Net Tutorial
JavaScript DHTML » GUI Components » Cursor 
Cursor follow example

<html>

<h1>Cursor follow example</h1>

<!--
Example for KLayers project
http://www.kruglov.ru/klayers/

(cKruglov S.A. 2002
-->
<!-- klayers.js -->
<script>
/************************************************\
| KLayers 2.97                                   |
| DHTML Library for Internet Explorer 4.* - 6.*, |
| Netscape 4.* - 7.*, Mozilla, Opera 5.* - 7.*   |
| Copyright by Kruglov S. A. (kruglov.ru) 2003   |
\************************************************/

/***  See for description and latest version  ***\
\***  http://www.kruglov.ru/klayers/          ***/

function initKLayers(){
  isDOM=document.getElementById?true:false
  isOpera=isOpera5=window.opera && isDOM
  isOpera6=isOpera && window.print
  isOpera7=isOpera && document.readyState
  isMSIE=isIE=document.all && document.all.item && !isOpera
  isStrict=document.compatMode=='CSS1Compat'
  isNN=isNC=navigator.appName=="Netscape"
  isNN4=isNC4=isNN && !isDOM
  isMozilla=isNN6=isNN && isDOM

  if(!isDOM && !isNC && !isMSIE && !isOpera){
    KLayers=false
    return false
  }

  pageLeft=0
  pageTop=0

  KL_imgCount=0
  KL_imgArray=new Array()

  KL_imageRef="document.images[\""
  KL_imagePostfix="\"]"
  KL_styleSwitch=".style"
  KL_layerPostfix="\"]"

  if(isNN4){
    KL_layerRef="document.layers[\""
    KL_styleSwitch=""
  }

  if(isMSIE){
    KL_layerRef="document.all[\""
  }

  if(isDOM){
    KL_layerRef="document.getElementById(\""
    KL_layerPostfix="\")"
  }

  KLayers=true
  return true
}

initKLayers()

// document and window functions:

function KL_getBody(w){
  if(!ww=window
  if(isStrict){
    return w.document.documentElement
  }else{
    return w.document.body
  }
}

function getWindowLeft(w){
  if(!ww=window
  if(isMSIE || isOpera7return w.screenLeft
  if(isNN || isOperareturn w.screenX
}

function getWindowTop(w){
  if(!ww=window
  if(isMSIE || isOpera7return w.screenTop
  if(isNN || isOperareturn w.screenY
}

function getWindowWidth(w){
  if(!ww=window
  if(isMSIEreturn KL_getBody(w).clientWidth
  if(isNN || isOperareturn w.innerWidth
}

function getWindowHeight(w){
  if(!ww=window
  if(isMSIEreturn KL_getBody(w).clientHeight
  if(isNN || isOperareturn w.innerHeight
}

function getDocumentWidth(w){
  if(!ww=window
  if(isMSIE || isOpera7return KL_getBody(w).scrollWidth
  if(isNNreturn w.document.width
  if(isOperareturn w.document.body.style.pixelWidth
}

function getDocumentHeight(w){
  if(!ww=window
  if(isMSIE || isOpera7return KL_getBody(w).scrollHeight
  if(isNNreturn w.document.height
  if(isOperareturn w.document.body.style.pixelHeight
}

function getScrollX(w){
  if(!ww=window
  if(isMSIE || isOpera7return KL_getBody(w).scrollLeft
  if(isNN || isOperareturn w.pageXOffset
}

function getScrollY(w){
  if(!ww=window
  if(isMSIE || isOpera7return KL_getBody(w).scrollTop
  if(isNN || isOperareturn w.pageYOffset
}

function preloadImage(imageFile){
  KL_imgArray[KL_imgCount]=new Image()
  KL_imgArray[KL_imgCount++].src=imageFile
}

var KL_LAYER=0
var KL_IMAGE=1

function KL_findObject(what,where,type){
  var i,j,l,s
  var len=eval(where+".length")
  for(j=0;j<len;j++){
    s=where+"["+j+"].document.layers"
    if(type==KL_LAYER){
      l=s+"[\""+what+"\"]"
    }
    if(type==KL_IMAGE){
      i=where+"["+j+"].document.images"
      l=i+"[\""+what+"\"]"
    }
    if(eval(l)) return l
    l=KL_findObject(what,s,type)
    if(l!="null"return l
  }
  return "null"
}

function KL_getObjectPath(name,parent,type){
  var l=((parent && isNN4)?(parent+"."):(""))+((type==KL_LAYER)?KL_layerRef:KL_imageRef)+name+((type==KL_LAYER)?KL_layerPostfix:KL_imagePostfix)
  if(eval(l))return l
  if(!isNN4){
    return l
  }else{
    return KL_findObject(name,"document.layers",type)
  }
}

function layer(name){
  return new KLayer(name,null)
}

function layerFrom(name,parent){
  if(parent.indexOf("document.")<0parent=layer(parent).path
  return new KLayer(name,parent)
}

function image(name){
  return new KImage(name,null)
}

function imageFrom(name,parent){
  if(parent.indexOf("document.")<0parent=layer(parent).path
  return new KImage(name,parent)
}

// class "KLayer":

function KLayer(name,parent){
  this.path=KL_getObjectPath(name,parent,KL_LAYER)
  this.object=eval(this.path)
  if(!this.object)return
  this.style=this.css=eval(this.path+KL_styleSwitch)
}

KLP=KLayer.prototype

KLP.isExist=KLP.exists=function(){
  return (this.object)?true:false
}

function KL_getPageOffset(o){ 
  var KL_left=0
  var KL_top=0
  do{
    KL_left+=o.offsetLeft
    KL_top+=o.offsetTop
  }while(o=o.offsetParent)
  return [KL_left, KL_top]
}

KLP.getLeft=function(){
  var o=this.object
  if(isMSIE || isMozilla || isOperareturn o.offsetLeft-pageLeft
  if(isNN4return o.x-pageLeft
}

KLP.getTop=function(){
  var o=this.object
  if(isMSIE || isMozilla || isOperareturn o.offsetTop-pageTop
  if(isNN4return o.y-pageTop
}

KLP.getAbsoluteLeft=function(){
  var o=this.object
  if(isMSIE || isMozilla || isOperareturn KL_getPageOffset(o)[0]-pageLeft
  if(isNN4return o.pageX-pageLeft
}

KLP.getAbsoluteTop=function(){
  var o=this.object
  if(isMSIE || isMozilla || isOperareturn KL_getPageOffset(o)[1]-pageTop
  if(isNN4return o.pageY-pageTop
}

KLP.getWidth=function(){
  var o=this.object
  if(isMSIE || isMozilla || isOpera7return o.offsetWidth
  if(isOperareturn this.css.pixelWidth
  if(isNN4return o.document.width
}

KLP.getHeight=function(){
  var o=this.object
  if(isMSIE || isMozilla || isOpera7return o.offsetHeight
  if(isOperareturn this.css.pixelHeight
  if(isNN4return o.document.height
}

KLP.getZIndex=function(){ //deprecated
  return this.css.zIndex
}

KLP.setLeft=KLP.moveX=function(x){
  x+=pageLeft
  if(isOpera){
    this.css.pixelLeft=x
  }else if(isNN4){
    this.object.x=x
  }else{
    this.css.left=x+"px"
  }
}

KLP.setTop=KLP.moveY=function(y){
  y+=pageTop
  if(isOpera){
    this.css.pixelTop=y
  }else if(isNN4){
    this.object.y=y
  }else{
    this.css.top=y+"px"
  }
}

KLP.moveTo=KLP.move=function(x,y){
  this.setLeft(x)
  this.setTop(y)
}

KLP.moveBy=function(x,y){
  this.moveTo(this.getLeft()+x,this.getTop()+y)
}

KLP.setZIndex=KLP.moveZ=function(z){ //deprecated
  this.css.zIndex=z
}

KLP.setVisibility=function(v){
  this.css.visibility=(v)?(isNN4?"show":"visible"):(isNN4?"hide":"hidden")
}

KLP.show=function(){
  this.setVisibility(true)
}

KLP.hide=function(){
  this.setVisibility(false)
}

KLP.isVisible=KLP.getVisibility=function(){
  return (this.css.visibility.toLowerCase().charAt(0)=='h')?false:true
}

KLP.setBgColor=function(c){
  if(isMSIE || isMozilla || isOpera7){
    this.css.backgroundColor=c
  }else if(isOpera){
    this.css.background=c
  }else if(isNN4){
    this.css.bgColor=c
  }
}

KLP.setBgImage=function(url){
  if(isMSIE || isMozilla || isOpera6){
    this.css.backgroundImage="url("+url+")"
  }else if(isNN4){
    this.css.background.src=url
  }
}

KLP.setClip=KLP.clip=function(top,right,bottom,left){
  if(isMSIE || isMozilla || isOpera7){
    this.css.clip="rect("+top+"px "+right+"px "+bottom+"px "+left+"px)"
  }else if(isNN4){
    var c=this.css.clip
    c.top=top
    c.right=right
    c.bottom=bottom
    c.left=left
  }
}

KLP.scrollTo=KLP.scroll=function(windowLeft,windowTop,windowWidth,windowHeight,scrollX,scrollY){
  if(scrollX>this.getWidth()-windowWidthscrollX=this.getWidth()-windowWidth
  if(scrollY>this.getHeight()-windowHeightscrollY=this.getHeight()-windowHeight
  if(scrollX<0)scrollX=0
  if(scrollY<0)scrollY=0
  var top=0
  var right=windowWidth
  var bottom=windowHeight
  var left=0
  left=left+scrollX
  right=right+scrollX
  top=top+scrollY
  bottom=bottom+scrollY
  this.moveTo(windowLeft-scrollX,windowTop-scrollY)
  this.setClip(top,right,bottom,left)
}

KLP.scrollBy=KLP.scrollByOffset=function(windowLeft,windowTop,windowWidth,windowHeight,scrollX,scrollY){
  var X=-parseInt(this.css.left)+windowLeft+scrollX
  var Y=-parseInt(this.css.top)+windowTop+scrollY
  this.scroll(windowLeft,windowTop,windowWidth,windowHeight,X,Y)
}

KLP.scrollByPercentage=function(windowLeft,windowTop,windowWidth,windowHeight,scrollX,scrollY){
  var X=(this.getWidth()-windowWidth)*scrollX/100
  var Y=(this.getHeight()-windowHeight)*scrollY/100
  this.scroll(windowLeft,windowTop,windowWidth,windowHeight,X,Y)
}

KLP.write=function(str){
  var o=this.object
  if(isNN4){
    var d=o.document
    d.open()
    d.write(str)
    d.close()
  }else{
    o.innerHTML=str
  }
}

KLP.add=function(str){
  var o=this.object
  if(isNN4){
    o.document.write(str)
  }else{
    o.innerHTML+=str
  }
}

// class "KImage":

KIP=KImage.prototype

function KImage(name){
  this.path=KL_getObjectPath(name,false,KL_IMAGE)
  this.object=eval(this.path)
}

KIP.isExist=KIP.exists=function(){
  return (this.object)?true:false
}

KIP.getSrc=KIP.src=function(){
  return this.object.src
}

KIP.setSrc=KIP.load=function(url){
  this.object.src=url
}
</script>

<div id="Follower" style="
  position: absolute;
  visibility:hidden;
  background-color: black;
  color: white">
  
  Follower</div>

<script>

var mousex = 0
var mousey = 0
if(isNC4document.captureEvents(Event.MOUSEMOVE)
if(isMSIE || isOpera7){
  document.onmousemove=function(){
    mousex=event.clientX+document.body.scrollLeft
    mousey=event.clientY+document.body.scrollTop
    moveFollower()
    return true
  }
}else if(isOpera){
  document.onmousemove=function(){
    mousex=event.clientX
    mousey=event.clientY
    moveFollower()
    return true
  }
}else if(isNC){
  document.onmousemove=function(e){
    mousex = e.pageX
    mousey = e.pageY
    moveFollower()
    return true
  }  
}

var s=layer("Follower"// call to layer "Follower"

function moveFollower(){
  s.show()
  s.moveTo(mousex,mousey)
}

</script>

</html

           
       
Related examples in the same category
1. Change cursor
w__w___w__.__ja_v___a___2_s.com_ | Contact Us
Copyright 2003 - 08 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.