/********************************************************************** 　　　　　 Map Handler is created referring to the original "Slider control creator" by Mark Wilton-Jones 12-13/10/2002 (Version 1.2) If you think this is usefull, please see the original site at first. slider control creater is free to make public your site. http://www.howtocreate.co.uk/jslibs/ for details and a demo of this script http://www.howtocreate.co.uk/jslibs/termsOfUse.html for terms of use K.Horiuchi 20/7/2006 ************************************************************************ To use: Inbetween the tags, put: To create a mapHandler put: var mymapHandler = new mapHandler( 24, //height of track (excluding border) 150, //width of track (excluding border) 2, //thickness of track border '#770000', //colour of track border 16, //height of map image 16, //width of map image '

', // map image 'moveFunction', //the name of the function to execute as the mapHandler moves (null if none) 'stopFunction', //the name of the function to execute when the mapHandler stops (null if none) //the functions must have already been defined (or use null for none) false //optional, false = use default cursor over button, true = use hand cursor ); You can then set the position of the mapHandler after the page has loaded using: mymapHandler.setPosition(numberBetween0and1) ___________________________________________________________________________________________*/ var MWJ_mapHandler_controls = 0; function getRefToDivNest( divID, oDoc ) { //get a reference to the mapHandler control, even through nested layers if( !oDoc ) { oDoc = document; } if( document.layers ) { if( oDoc.layers[divID] ) { return oDoc.layers[divID]; } else { for( var x = 0, y; !y && x < oDoc.layers.length; x++ ) { y = getRefToDivNest(divID,oDoc.layers[x].document); } return y; } } if( document.getElementById ) { return document.getElementById(divID); } if( document.all ) { return document.all[divID]; } return document[divID]; } function mapHandlerMousePos(e) { //get the position of the mouse if( !e ) { e = window.event; } if( !e || ( typeof( e.pageX ) != 'number' && typeof( e.clientX ) != 'number' ) ) { return [0,0]; } if( typeof( e.pageX ) == 'number' ) { var xcoord = e.pageX; var ycoord = e.pageY; } else { var xcoord = e.clientX; var ycoord = e.clientY; if( !( ( window.navigator.userAgent.indexOf( 'Opera' ) + 1 ) || ( window.ScriptEngine && ScriptEngine().indexOf( 'InScript' ) + 1 ) || window.navigator.vendor == 'KDE' ) ) { if( document.documentElement && ( document.documentElement.scrollTop || document.documentElement.scrollLeft ) ) { xcoord += document.documentElement.scrollLeft; ycoord += document.documentElement.scrollTop; } else if( document.body && ( document.body.scrollTop || document.body.scrollLeft ) ) { xcoord += document.body.scrollLeft; ycoord += document.body.scrollTop; } } } return [xcoord,ycoord]; } function mapIsDown(e) { if( document.onmousemove == mapIsMove ) { return false; } //protect against multi-button click //make note of starting positions and detect mouse movements window.msStartCoord = mapHandlerMousePos(e); window.lyStartCoord = this.style?[parseInt(this.style.left),parseInt(this.style.top)]:[parseInt(this.left),parseInt(this.top)]; if( document.captureEvents && Event.MOUSEMOVE ) { document.captureEvents(Event.MOUSEMOVE); document.captureEvents(Event.MOUSEUP); } window.storeMOUSEMOVE = document.onmousemove; window.storeMOUSEUP = document.onmouseup; window.storeLayer = this; document.onmousemove = mapIsMove; document.onmouseup = mapIsMove; return false; } function mapIsMove(e) { //move the mapHandler to its newest position var msMvCo = mapHandlerMousePos(e); if( !e ) { e = window.event ? window.event : ( new Object() ); } var theLayer = window.storeLayer.style ? window.storeLayer.style : window.storeLayer; var theNewPosX = window.lyStartCoord[0] + ( msMvCo[0] - window.msStartCoord[0] ); if( theNewPosX < -1*window.storeLayer.maxLengthX ) { theNewPosX = -1*window.storeLayer.maxLengthX; } if( theNewPosX > 0 ) { theNewPosX = 0; } var theNewPosY = window.lyStartCoord[1] + ( msMvCo[1] - window.msStartCoord[1] ); if( theNewPosY < -1*window.storeLayer.maxLengthY ) { theNewPosY = -1*window.storeLayer.maxLengthY; } if( theNewPosY > 0 ) { theNewPosY = 0; } var cTop = -1*theNewPosY, cRght = -1*theNewPosX+parseInt(theLayer.width) - window.storeLayer.maxLengthX, cBttm = -1*theNewPosY+parseInt(theLayer.height) - window.storeLayer.maxLengthY, cLeft = -1*theNewPosX; //run the user's functions and reset the mouse monitoring as before if( e.type && e.type.toLowerCase() == 'mousemove' ) { if( window.storeLayer.moveFunc ) { window.storeLayer.moveFunc(e,window.storeLayer,theNewPosX,theNewPosY, msMvCo[0]-window.msStartCoord[0],msMvCo[1]-window.msStartCoord[1], cLeft,cRght,cTop,cBttm); } else { flushMove(window.storeLayer,theNewPosX,theNewPosY,cLeft,cRght,cTop,cBttm); } } else { document.onmousemove = storeMOUSEMOVE; document.onmouseup = window.storeMOUSEUP; if( window.storeLayer.stopFunc ) { window.storeLayer.stopFunc(e,window.storeLayer,theNewPosX,theNewPosY, msMvCo[0]-window.msStartCoord[0],msMvCo[1]-window.msStartCoord[1], cLeft,cRght,cTop,cBttm); } else { flushMove(window.storeLayer,theNewPosX,theNewPosY,cLeft,cRght,cTop,cBttm); } } } function flushMove(layer,theNewPosX,theNewPosY,cLeft,cRght,cTop,cBttm){ var oPix = document.childNodes ? 'px' : 0; var theLayer = layer.style ? layer.style : layer; theLayer.left = theNewPosX + oPix; theLayer.top = theNewPosY + oPix; theLayer.clip = "rect("+(cTop+oPix)+","+(cRght+oPix)+","+(cBttm+oPix)+","+(cLeft+oPix)+")"; // alert("lay,x1,x2,y1,y2="+theLayer+","+theNewPosX+","+theNewPosY+","+cLeft+","+cRght+","+cTop+","+cBttm); } function setMapHandlerPosition(oPortion) { //set the mapHandler's position // if( isNaN( oPortion ) || oPortion < 0 ) { oPortion = 0; } // if( oPortion > 1 ) { oPortion = 1; } // var theDiv = getRefToDivNest(this.id); // if( theDiv.style ) { theDiv = theDiv.style; } // oPortion = Math.round( oPortion * this.maxLength ); // var oPix = document.childNodes ? 'px' : 0; // if( this.align ) { theDiv.left = oPortion + oPix; } // else { theDiv.top = oPortion + oPix; } } function mapHandler(oThght,oTwdth,oTBthk,oTBcol,oBhght,oBwdth,oBtxt,oMf,oSf,oCrs) { //draw the mapHandler using huge amounts of nested layers (makes the borders look normal in as many browsers as possible) var oPix = document.childNodes ? 'px': 0; var clip = "rect("+(Math.round((oBhght-oThght)/2)+oPix)+","+(Math.round((oBwdth-oTwdth)/2)+oTwdth+oPix)+"," +(Math.round((oBhght-oThght)/2)+oThght+oPix)+","+(Math.round((oBwdth-oTwdth)/2)+oPix)+")"; if( document.layers ) { document.write( ''+ ''+ ''+ oBtxt+'<\/layer><\/ilayer><\/ilayer>' ); } else { document.write( '

'+ '

'+ '

'+ oBtxt+'<\/div><\/div><\/div>' ); } this.id = 'MWJ_mapHandler_controls'+MWJ_mapHandler_controls; this.maxLengthX = (oBwdth>oTwdth)?(oBwdth-oTwdth):0; this.maxLengthY = (oBhght>oThght)?(oBhght-oThght):0; this.setPosition = setMapHandlerPosition; // dummy this.screenH = oThght; this.screenW = oTwdth; this.mapH = oBhght; this.mapW = oBwdth; MWJ_mapHandler_controls++; }