Cursor follow example : Cursor « GUI Components « JavaScript DHTML

JavaScript DHTML
1. Ajax Layer
2. Data Type
3. Date Time
4. Development
5. Document
6. Dojo toolkit
7. Event
8. Event onMethod
9. Ext JS
10. Form Control
11. GUI Components
12. HTML
13. Javascript Collections
14. Javascript Objects
15. Javascript Properties
16. jQuery
17. Language Basics
18. Mochkit
19. Mootools
20. Node Operation
21. Object Oriented
22. Page Components
23. Rico
24. Scriptaculous
25. Security
26. SmartClient
27. Style Layout
28. Table
29. Utilities
30. Window Browser
31. YUI Library
Java
Java Tutorial
Java Source Code / Java Documentation
Java Open Source
Jar File Download
Java Articles
Java Products
Java by API
Photoshop Tutorials
Maya Tutorials
Flash Tutorials
3ds-Max Tutorials
Illustrator Tutorials
GIMP Tutorials
C# / C Sharp
C# / CSharp Tutorial
C# / CSharp Open Source
ASP.Net
ASP.NET Tutorial
JavaScript Tutorial
JavaScript Reference
HTML / CSS
HTML CSS Reference
C / ANSI-C
C Tutorial
C++
C++ Tutorial
Ruby
PHP
Python
Python Tutorial
Python Open Source
SQL Server / T-SQL
SQL Server / T-SQL Tutorial
Oracle PL / SQL
Oracle PL/SQL Tutorial
PostgreSQL
SQL / MySQL
MySQL Tutorial
VB.Net
VB.Net Tutorial
Flash / Flex / ActionScript
VBA / Excel / Access / Word
XML
XML Tutorial
Microsoft Office PowerPoint 2007 Tutorial
Microsoft Office Excel 2007 Tutorial
Microsoft Office Word 2007 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
www.java2java.com | Contact Us
Copyright 2009 - 12 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.