Admin: 1 версия

2010-05-26T07:43:28Z

1 версия

Новая страница

==Change cursor==



<source lang="html4strict">


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US">
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8;" />
<style type="text/css">
html,body {
height:95%;
margin:0px;
font-family:Arial;
cursor: crosshair;
}
input {
padding:2px;
border:1px solid;
background:#CCC;
cursor:crosshair;
}
textarea {
padding:2px;
border:1px solid;
background:#CCC;
cursor:crosshair;
}
select {
padding:2px;
border:1px solid;
background:#CCC;
cursor:crosshair;
}
a {
text-decoration:none;
color:black;
}
tr,td {
border:1px solid black;
padding:5px;
}
.tablist {
border:1px solid black;
border-bottom:0px;
margin-left:5px;
padding-left:5px;
padding-right:5px;
}
.tabcontent {
border:1px solid black;
padding:5px;
height:560px;
background:#DDD;
}
.inputTitle {
font-weight:bold;
font-size:12px;
}
.info {
font-size:12px;
}
li {
font-size:12px;
font-weight:normal;
margin-bottom:5px;
}
</style>
<script type="text/javascript" src="wordsearch.js"></script>
</head>
<body onload="eventHandle();showStart();">
<noscript>You must have Javascript enabled to use this script.</noscript>
<script type="text/javascript">
function changebgcolor(color) {
document.bgColor = color;
}
</script>
<div style="text-align:center;margin-bottom:5px;margin-top:5px;font-size:16px;font-family:Arial;font-weight:bold;" id="title"><script type="text/javascript">document.write(title);</script></div>
<div id="mainDiv" style="margin-left:auto;margin-right:auto;text-align:left;width:400px;visibility:hidden;">
<div id="header">
<div id="menuButton" style="text-align:center;width:400px;font-size:10px;display:none;" onclick="showMenu();">[<script type="text/javascript">document.write(LANG[selectedLanguage]["menu"]);</script>]</div>
</div>
<div id="menu">
<div><a href="#" id="main" onclick="return tab(this.id);" class="tablist" style="background:#DDD"><script type="text/javascript">document.write(LANG[selectedLanguage]["main"]);</script></a> <a href="#" id="options" onclick="return tab(this.id);" class="tablist" style="background:#BBB"><script type="text/javascript">document.write(LANG[selectedLanguage]["options"]);</script></a> <a href="#" id="options2" onclick="return tab(this.id);" class="tablist" style="background:#BBB"><script type="text/javascript">document.write(LANG[selectedLanguage]["options2"]);</script></a> <a href="#" id="load" onclick="return tab(this.id);" class="tablist" style="background:#BBB"><script type="text/javascript">document.write(LANG[selectedLanguage]["load"]);</script></a> <a href="#" id="information" onclick="return tab(this.id);" class="tablist" style="background:#BBB"><script type="text/javascript">document.write(LANG[selectedLanguage]["info"]);</script></a></div>
<div id="_main" style="display:block" class="tabcontent">
<div class="inputTitle"><script type="text/javascript">document.write(LANG[selectedLanguage]["enter"]);</script></div><div class="info">(<script type="text/javascript">document.write(LANG[selectedLanguage]["sep"]);</script>)<br />
<textarea cols="45" rows="15" name="inputWords" id="inputWords" onfocus="inputActive=1;" onblur="inputActive=0;"></textarea></div>
<div class="inputTitle"><br /><script type="text/javascript">document.write(LANG[selectedLanguage]["puzlang"]);</script><span id="gridLanguageDiv">
<script type="text/javascript">
</script></span></div>
<script type="text/javascript">
</script>
</div>
<div id="_options" style="display:none;" class="tabcontent">
<table cellspacing="0" style="width:100%">
<tr><td style="width:50%;"><div class="inputTitle"><script type="text/javascript">document.write(LANG[selectedLanguage]["rows"]);</script></div></td><td><div><input type="text" id="numRows" value="" size="2" maxlength="3" /></div></td></tr>
<tr><td><div class="inputTitle"><script type="text/javascript">document.write(LANG[selectedLanguage]["cols"]);</script></div></td><td><div><input type="text" id="numCols" value="" size="2" maxlength="3" /></div></td></tr>
<tr><td><div class="inputTitle"><script type="text/javascript">document.write(LANG[selectedLanguage]["fontsize"]);</script></div></td><td><div><input type="text" id="fontSize" value="" size="2" /> mm</div></td></tr>
<tr><td><div class="inputTitle"><script type="text/javascript">document.write(LANG[selectedLanguage]["fontcolor"]);</script></div></td><td><div><input type="text" id="fontColor" value="" size="10" /></div></td></tr>
<tr><td><div class="inputTitle"><script type="text/javascript">document.write(LANG[selectedLanguage]["bgcolor"]);</script></div></td><td><div><input type="text" id="bgColor" value="" size="10" /></div></td></tr>
<tr><td><div class="inputTitle"><script type="text/javascript">document.write(LANG[selectedLanguage]["hlcolor"]);</script></div></td><td><div><input type="text" id="hlColor" value="" size="10" /></div></td></tr>
<tr><td><div class="inputTitle"><script type="text/javascript">document.write(LANG[selectedLanguage]["gridstyle"]);</script></div></td><td><div id="gridStyleArrayDiv">
<script type="text/javascript">
</script></div>
<span onclick="makeCustom();" style="padding:0px 3px 0px 3px;border:1px solid black;font-size:11px;text-align:center;"><script type="text/javascript">document.write(LANG[selectedLanguage]["mcustom"]);</script></span> <span onclick="if(customStyle = prompt(LANG[selectedLanguage]["inputcs"])) document.getElementById("gridStyle").options[document.getElementById("gridStyle").options.length-1].selected = "true";" style="padding:0px 3px 0px 3px;border:1px solid black;font-size:11px;text-align:center;"><script type="text/javascript">document.write(LANG[selectedLanguage]["input"]);</script></span>
</td></tr>
</table>
</div>
<div id="_options2" style="display:none" class="tabcontent">
<select name="BorF" id="BorF" style="margin-left:10px;margin-top:10px;">
<option value="regular"><script type="text/javascript">document.write(LANG[selectedLanguage]["borf"]);</script></option>
<option value="bonly"><script type="text/javascript">document.write(LANG[selectedLanguage]["bonly"]);</script></option>
<option value="fonly"><script type="text/javascript">document.write(LANG[selectedLanguage]["fonly"]);</script></option>
</select>
<br /><br />
<select name="diag" id="diag" style="margin-left:10px" onchange="if(document.getElementById("diag").options[1].selected==true && document.getElementById("uand").options[1].selected==true) document.getElementById("uand").options[2].selected=true; else if(document.getElementById("diag").options[0].selected==true && document.getElementById("uand").options[1].selected==true) document.getElementById("uand").options[0].selected=true; else if(document.getElementById("diag").options[1].selected==true && document.getElementById("uand").options[0].selected==true) document.getElementById("uand").options[2].selected=true;">
<option value="diag"><script type="text/javascript">document.write(LANG[selectedLanguage]["diag"]);</script></option>
<option value="diagonly"><script type="text/javascript">document.write(LANG[selectedLanguage]["donly"]);</script></option>
<option value="nodiag"><script type="text/javascript">document.write(LANG[selectedLanguage]["nodiag"]);</script></option>
</select>
<br /><br />
<select name="upanddown" id="uand" style="margin-left:10px" onchange="if(document.getElementById("uand").options[1].selected==true && document.getElementById("diag").options[1].selected==true) document.getElementById("diag").options[2].selected=true; else if(document.getElementById("uand").options[0].selected==true && document.getElementById("diag").options[1].selected==true) document.getElementById("diag").options[0].selected=true; else if(document.getElementById("uand").options[1].selected==true && document.getElementById("diag").options[0].selected==true) document.getElementById("diag").options[2].selected=true;">
<option value="uand"><script type="text/javascript">document.write(LANG[selectedLanguage]["uandd"]);</script></option>
<option value="uandonly"><script type="text/javascript">document.write(LANG[selectedLanguage]["uanddo"]);</script></option>
<option value="nouand"><script type="text/javascript">document.write(LANG[selectedLanguage]["nouandd"]);</script></option>
</select>
<br /><br />
<span style="margin-left:10px"><script type="text/javascript">document.write(LANG[selectedLanguage]["wlplace"]);</script>: <select id="wordListPlacement">
<option value="right"><script type="text/javascript">document.write(LANG[selectedLanguage]["right"]);</script></option>
<option value="bottom"><script type="text/javascript">document.write(LANG[selectedLanguage]["bottom"]);</script></option>
</select></span>
<br /><br />
<input type="checkbox" id="sortAlpha" style="margin-left:10px;" value="TRUE" /> <script type="text/javascript">document.write(LANG[selectedLanguage]["sort"]);</script><br />
<input type="checkbox" id="lowerCase" style="margin-left:10px;" value="TRUE" /> <script type="text/javascript">document.write(LANG[selectedLanguage]["lower"]);</script><br />
<input type="checkbox" id="useLetters" style="margin-left:10px;" value="TRUE" /> <script type="text/javascript">document.write(LANG[selectedLanguage]["wordlist"]);</script><br />
</div>
<div id="_load" style="display:none" class="tabcontent">
<div style="text-align:center;">
<br /><script type="text/javascript">document.write(LANG[selectedLanguage]["paste"]);</script>:<br />
<textarea cols="40" rows="3" id="code"></textarea>
<script type="text/javascript">document.write("<br /><br /><input type="button" value=""+LANG[selectedLanguage]["load"]+"" id="loadGameButton" onclick="reloadGame();" />");</script>
</div>
</div>
<div id="_information" style="display:none" class="tabcontent">
<div style="padding:10px;">
<script type="text/javascript">document.write(LANG[selectedLanguage]["high"]);</script>:
<ol>
<li><script type="text/javascript">document.write(LANG[selectedLanguage]["high2"]);</script></li>
<li><script type="text/javascript">document.write(LANG[selectedLanguage]["high3"]);</script></li>
<li><script type="text/javascript">document.write(LANG[selectedLanguage]["high4"]);</script></li>
</ol>
<script type="text/javascript">document.write(LANG[selectedLanguage]["keys"]);</script>:<br />
<script type="text/javascript">document.write(LANG[selectedLanguage]["keyR"]);</script><br />
<script type="text/javascript">document.write(LANG[selectedLanguage]["keyS"]);</script><br />
</div>
</div>
</div>
<div style="text-align:center;" id="buttons"><br />
<script type="text/javascript">document.write("<input type="button" value="Return" id="blahblah" style="visibility:hidden;width:50px;" />  <input type="button" value=""+LANG[selectedLanguage]["create"]+"" id="create" onmouseup="reload=0;" onclick="if(document.getElementById(\"inputWords\").value==\"\" && !document.getElementById(\"numWords\").value) { alert(\""+LANG[selectedLanguage]["nowords"]+"\"); } else { if(d.getElementById(\"manually\").checked) manuallyPlace(); else createPuzzle(1); }" style="width:100px;" />  <input type="button" value=""+LANG[selectedLanguage]["save"]+"" onclick="saveSettings();" style="width:100px;" />  <input type="button" value=""+LANG[selectedLanguage]["return"]+"" id="returnToGame" style="visibility:hidden;width:50px;" onclick="returnToGame();" />");</script>
<br /><br />
<select id="mainLang" onchange="changeLanguages();" style="font-size:11px;">
<script type="text/javascript">
</script>
</select>

<div style="text-align:center;font-size:12px;font-family:Arial;"><br /><a href="http://jswordsearch.sourceforge.net/">jsWordsearch 0.4</a></div>
</div>
</div>
<div id="puzzle" style="width:99%;height:95%;display:none;">
<table border="0" style="height:99%;width:95%;"><tr><td style="text-align:center;border:0px;">
<div id="puzzleText"></div>
</td></tr></table>
</div>
<div id="saveGameForm" style="display:none;margin-left:20px;">
<textarea cols="40" rows="3" id="saveGameData"></textarea> <script type="text/javascript">document.write("<input type="button" value=""+LANG[selectedLanguage]["cont"]+"" onclick="document.getElementById(\"puzzle\").style.display=\"block\";document.getElementById(\"saveGameForm\").style.display=\"none\";puzzleActive=1;" />");</script>
<br /><br /><div id="saveGameURL"></div>
</div>
</body>
</html>

</source>

<A href="http://www.wbex.ru/Code/JavaScriptDownload/jswordsearch_0.4.zip">jswordsearch_0.4.zip( 25 k)</a>

==Cursor follow example==



<source lang="html4strict">
<html>
<h1>Cursor follow example</h1>


<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.rupatMode=="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(!w) w=window
if(isStrict){
return w.document.documentElement
}else{
return w.document.body
}
}
function getWindowLeft(w){
if(!w) w=window
if(isMSIE || isOpera7) return w.screenLeft
if(isNN || isOpera) return w.screenX
}
function getWindowTop(w){
if(!w) w=window
if(isMSIE || isOpera7) return w.screenTop
if(isNN || isOpera) return w.screenY
}
function getWindowWidth(w){
if(!w) w=window
if(isMSIE) return KL_getBody(w).clientWidth
if(isNN || isOpera) return w.innerWidth
}
function getWindowHeight(w){
if(!w) w=window
if(isMSIE) return KL_getBody(w).clientHeight
if(isNN || isOpera) return w.innerHeight
}
function getDocumentWidth(w){
if(!w) w=window
if(isMSIE || isOpera7) return KL_getBody(w).scrollWidth
if(isNN) return w.document.width
if(isOpera) return w.document.body.style.pixelWidth
}
function getDocumentHeight(w){
if(!w) w=window
if(isMSIE || isOpera7) return KL_getBody(w).scrollHeight
if(isNN) return w.document.height
if(isOpera) return w.document.body.style.pixelHeight
}
function getScrollX(w){
if(!w) w=window
if(isMSIE || isOpera7) return KL_getBody(w).scrollLeft
if(isNN || isOpera) return w.pageXOffset
}
function getScrollY(w){
if(!w) w=window
if(isMSIE || isOpera7) return KL_getBody(w).scrollTop
if(isNN || isOpera) return 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.")<0) parent=layer(parent).path
return new KLayer(name,parent)
}
function image(name){
return new KImage(name,null)
}
function imageFrom(name,parent){
if(parent.indexOf("document.")<0) parent=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 || isOpera) return o.offsetLeft-pageLeft
if(isNN4) return o.x-pageLeft
}
KLP.getTop=function(){
var o=this.object
if(isMSIE || isMozilla || isOpera) return o.offsetTop-pageTop
if(isNN4) return o.y-pageTop
}
KLP.getAbsoluteLeft=function(){
var o=this.object
if(isMSIE || isMozilla || isOpera) return KL_getPageOffset(o)[0]-pageLeft
if(isNN4) return o.pageX-pageLeft
}
KLP.getAbsoluteTop=function(){
var o=this.object
if(isMSIE || isMozilla || isOpera) return KL_getPageOffset(o)[1]-pageTop
if(isNN4) return o.pageY-pageTop
}
KLP.getWidth=function(){
var o=this.object
if(isMSIE || isMozilla || isOpera7) return o.offsetWidth
if(isOpera) return this.css.pixelWidth
if(isNN4) return o.document.width
}
KLP.getHeight=function(){
var o=this.object
if(isMSIE || isMozilla || isOpera7) return o.offsetHeight
if(isOpera) return this.css.pixelHeight
if(isNN4) return 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()-windowWidth) scrollX=this.getWidth()-windowWidth
if(scrollY>this.getHeight()-windowHeight) scrollY=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(isNC4) document.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>

</source>

JavaScript DHTML/GUI Components/Cursor - История изменений

в 10:00, 26 мая 2010

Admin: 1 версия

← Предыдущая	Версия 10:00, 26 мая 2010
(нет различий)