--- /dev/null
+// Detect if the browser is IE or not.\r
+// If it is not IE, we assume that the browser is NS/mozilla.\r
+var IE = document.all?true:false\r
+\r
+// If NS -- that is, !IE -- then set up for mouse movement and click capture\r
+if (!IE) document.captureEvents(Event.MOUSEMOVE)\r
+if (!IE) document.captureEvents(Event.MOUSEDOWN)\r
+\r
+// Temporary variables to hold mouse x-y pos.s\r
+var tempX = 0\r
+var tempY = 0\r
+var check = 0\r
+var Pos1x = 0\r
+var Pos1y = 0\r
+var Pos2x = 0\r
+var Pos2y = 0\r
+var RelX = 0\r
+var RelY = 0\r
+\r
+//start is the trigger that starts the box creation.\r
+function start() {\r
+ //assign click as the event handler if there is a click.\r
+ document.onmousedown = click\r
+ return true\r
+}\r
+\r
+function click(e){\r
+ if (check == 2){return;//prevent multiple box drawing, or catching a third click.\r
+ }\r
+ if (check == 0) { //first click\r
+ if (IE) { // grab the x-y pos.s if browser is IE\r
+ // have to use document.documentElement instead of document.body \r
+ // because for some reason IE6 reassigns when in standards complient mode\r
+ // http://www.quirksmode.org/js/doctypes.html\r
+ tempX = event.clientX + document.documentElement.scrollLeft\r
+ tempY = event.clientY + document.documentElement.scrollTop\r
+ } else { // grab the x-y pos.s if browser is NS/mozilla\r
+ tempX = e.pageX\r
+ tempY = e.pageY\r
+ } \r
+ //write temporary position 1(top left corner)\r
+ Pos1x = tempX\r
+ Pos1y = tempY\r
+ //getting the check variable ready for the second click\r
+ check = check + 1 \r
+ //create the drawingbox and insert it into the DOM tree at the first mouse click location\r
+ createbox()\r
+ //run the function that updates the mouse postion and update the box size on mousemove\r
+ document.onmousemove = getMouseXY\r
+ return false;\r
+ }\r
+ //second click\r
+ if (check == 1) {\r
+ //save second click location(bottem right) to submit to php for calculation\r
+ Pos2x = tempX\r
+ Pos2y = tempY\r
+ check = check + 1 // makes check = 2 to prevent additional boxes being drawn, or variables being written\r
+ //disable mouseevents\r
+ document.onmousedown = null\r
+ document.onmousemove = null\r
+ //create the box for the caption\r
+ createcaptionbox()\r
+ return false;\r
+ } \r
+ return false;\r
+}\r
+\r
+// Main function to retrieve mouse x-y pos.s and update box size.\r
+function getMouseXY(e) {\r
+ if (IE) { // grab the x-y pos.s if browser is IE\r
+ // have to use document.documentElement instead of document.body \r
+ // because for some reason IE6 reassigns when in standards complient mode\r
+ // http://www.quirksmode.org/js/doctypes.html\r
+ tempX = event.clientX + document.documentElement.scrollLeft\r
+ tempY = event.clientY + document.documentElement.scrollTop\r
+ } else { // grab the x-y pos.s if browser is NS/mozilla\r
+ tempX = e.pageX\r
+ tempY = e.pageY\r
+ } \r
+ // catch possible negative values in NS4\r
+ if (tempX < 0){tempX = 0}\r
+ if (tempY < 0){tempY = 0} \r
+ //while the mouse is moving,create and update the size of the drawingbox\r
+ var box = document.getElementById('drawingbox')\r
+ //update the size of the box everytime the mouse moves a pixel\r
+ boxwidth =(tempX - Pos1x) //these calculations have to be \r
+ boxheight = (tempY - Pos1y) //seperate because IE chokes\r
+ box.style.width = boxwidth + 'px' //update box width and height\r
+ box.style.height = boxheight + 'px'\r
+ return true;\r
+}\r
+\r
+function createcaptionbox() {\r
+ //the insert caption box is really a form inside a div\r
+ //these lines generate a form, and puts in inputs \r
+ //Pos1x,Pos1y,Po2x,Pos2y,RelX,RelY,pictureid,description\r
+ //the form has to be created here because IE can not accept\r
+ //two forms with the same name (firefox does)\r
+ //otherwise it would be easier to generate the \r
+ //form from the nucleus template\r
+ var captionformdiv = document.createElement('div')\r
+ var captionform = document.createElement('form')\r
+ captionform.setAttribute('name','Show')\r
+ captionform.setAttribute('method','POST')\r
+ captionform.setAttribute('action','/action.php?action=plugin&name=gallery&type=tagaccept')\r
+ captionform.style.border\r
+ captionform.style.font\r
+ captionform.style.padding\r
+ var inputPos1x = document.createElement('input')\r
+ inputPos1x.setAttribute('name','Pos1x')\r
+ inputPos1x.setAttribute('value',Pos1x)\r
+ inputPos1x.setAttribute('type','hidden')\r
+ captionform.appendChild(inputPos1x)\r
+ var inputPos1y = document.createElement('input')\r
+ inputPos1y.setAttribute('name','Pos1y')\r
+ inputPos1y.setAttribute('value',Pos1y)\r
+ inputPos1y.setAttribute('type','hidden')\r
+ captionform.appendChild(inputPos1y)\r
+ var inputPos2x = document.createElement('input')\r
+ inputPos2x.setAttribute('name','Pos2x')\r
+ inputPos2x.setAttribute('value',Pos2x)\r
+ inputPos2x.setAttribute('type','hidden')\r
+ captionform.appendChild(inputPos2x)\r
+ var inputPos2y = document.createElement('input')\r
+ inputPos2y.setAttribute('name','Pos2y')\r
+ inputPos2y.setAttribute('value',Pos2y)\r
+ inputPos2y.setAttribute('type','hidden')\r
+ captionform.appendChild(inputPos2y)\r
+ var inputRelX = document.createElement('input')\r
+ inputRelX.setAttribute('name','RelX')\r
+ inputRelX.setAttribute('value',RelX)\r
+ inputRelX.setAttribute('type','hidden')\r
+ captionform.appendChild(inputRelX)\r
+ var inputRelY = document.createElement('input')\r
+ inputRelY.setAttribute('name','RelY')\r
+ inputRelY.setAttribute('value',RelY)\r
+ inputRelY.setAttribute('type','hidden')\r
+ captionform.appendChild(inputRelY)\r
+ var inputdesc = document.createElement('input')\r
+ inputdesc.setAttribute('name','desc')\r
+ inputdesc.setAttribute('value','enter caption')\r
+ inputdesc.setAttribute('size','30')\r
+ inputdesc.style.fontSize = '10px'\r
+ inputdesc.style.border = '0px'\r
+ inputdesc.setAttribute('onClick','erasedesc();')\r
+ captionform.appendChild(inputdesc)\r
+ var inputpictureid = document.createElement('input')\r
+ inputpictureid.setAttribute('name','pictureid')\r
+ inputpictureid.setAttribute('value',pictureid )\r
+ inputpictureid.setAttribute('type','hidden')\r
+ captionform.appendChild(inputpictureid)\r
+ var inputsubmit = document.createElement('input')\r
+ inputsubmit.setAttribute('name','Submit')\r
+ inputsubmit.setAttribute('type','submit')\r
+ inputsubmit.style.fontFamily = 'Verdana'\r
+ inputsubmit.style.fontSize = '10px'\r
+ inputsubmit.style.backgroundColor = '#cccccc'\r
+ inputsubmit.style.border ='1px'\r
+ inputsubmit.setAttribute('value','Tagit!')\r
+ captionform.appendChild(inputsubmit)\r
+ //give the div that wraps the form some attributes.\r
+ captionformdiv.style.position = 'absolute'\r
+ captionformdiv.style.left = Pos1x +'px'\r
+ captionformdiv.style.top = Pos2y +'px'\r
+ captionformdiv.style.width = tempX - Pos1x - 5 +'px'\r
+ captionformdiv.style.backgroundColor = '#FFFFFF'\r
+ captionformdiv.style.display = 'block'\r
+ captionformdiv.style.borderStyle = 'solid'\r
+ captionformdiv.style.borderColor = '#FFFFFF'\r
+ //put the captionform into the captionbox into the wrapper div\r
+ captionformdiv.appendChild(captionform)\r
+ document.getElementById('container').appendChild(captionformdiv)\r
+\r
+\r
+}\r
+\r
+function createbox(){\r
+ // initialize the box with zero width and height, inserted at the first mouse click location (tempX,tempY)\r
+ var drawingbox = document.createElement('div')\r
+ drawingboxwidth = Pos2x - RelX\r
+ drawingbox.style.position = 'absolute'\r
+ drawingbox.setAttribute('id','drawingbox')\r
+ drawingbox.setAttribute('class','drawingbox')\r
+ drawingbox.style.borderStyle = 'solid'\r
+ drawingbox.style.borderColor = '#FFFFFF'\r
+ drawingbox.style.borderWidth = '1px'\r
+ drawingbox.style.left = tempX +'px'\r
+ drawingbox.style.top = tempY +'px'\r
+ drawingbox.style.height = "0px"\r
+ drawingbox.style.width = "0px"\r
+ drawingbox.style.display = 'block'\r
+ drawingbox.style.zIndex = '5'\r
+ //where to insert the box in the DOM tree.\r
+ document.getElementById('container').appendChild(drawingbox);\r
+ }\r
+\r
+//find actual location of an element in the DOM tree(in this case the image). \r
+//this function is called as a onMouseover event from the browser. code from quirksmode.org\r
+function findPosX(obj)\r
+{\r
+ var curleft = 0;\r
+ if (obj.offsetParent)\r
+ {\r
+ while (obj.offsetParent)\r
+ {\r
+ curleft += obj.offsetLeft\r
+ obj = obj.offsetParent;\r
+ }\r
+ }\r
+ else if (obj.x)\r
+ curleft += obj.x;\r
+ return curleft;\r
+}\r
+\r
+function findPosY(obj)\r
+{\r
+ var curtop = 0;\r
+ var printstring = '';\r
+ if (obj.offsetParent)\r
+ {\r
+ while (obj.offsetParent)\r
+ {\r
+ printstring += ' element ' + obj.tagName + ' has ' + obj.offsetTop;\r
+ curtop += obj.offsetTop\r
+ obj = obj.offsetParent;\r
+ }\r
+ }\r
+ else if (obj.y)\r
+ curtop += obj.y;\r
+ window.status = printstring;\r
+ return curtop;\r
+}\r
+\r
+// on mouseover the image, executes this to assign its absolute position and save it(RelX,RelY)\r
+// for relative div position calculating purposes in the php tagaccept file.\r
+function setLyr(obj,lyr)\r
+{\r
+ RelX = findPosX(obj);\r
+ RelY = findPosY(obj);\r
+\r
+}\r
+\r
+//on mouseout (NS) or mouseleave (IE), hide the tooltip boxes\r
+function hidetipdivs() {\r
+ \r
+ navRoot = document.getElementById("tooltip2");\r
+ for (i=0; i<navRoot.childNodes.length; i++) {\r
+ navRoot.childNodes[i].style.display = 'none' ;\r
+ }\r
+ }\r
+\r
+//on mouseover (NS) or on mouseenter (IE) show tipdivs\r
+function showtipdivs() {\r
+navRoot = document.getElementById("tooltip2");\r
+for (i=0; i<navRoot.childNodes.length; i++) {\r
+ navRoot.childNodes[i].style.display = '' ;\r
+ }\r
+ }\r
+ \r
+function erasedesc(){\r
+ document.Show.desc.value=null\r
+ document.Show.desc.value=''\r
+ }\r
+ \r
+\r
+//hide the boxes initially, to avoid confusion where the mouse is initially in the image, or not in the image.\r
+//hidetipdivs(); \r
+// this had to be moved to after the picture loads, because for some reason\r
+// if you insert javascript from an external file, IE6 loads the file AFTER everything else is loaded\r
+// if it is a relative URL, and BEFORE everything is loaded if it is a absolute URL containing http://\r
+// so IE6 tries to remove the hover captions but there are no hover captions to remove so IE6 crashes.\r
+\r
+function startList() {\r
+if (document.all && document.getElementById) { //check if its IE\r
+navRoot = document.getElementById("tooltip2");\r
+for (i=0; i<navRoot.childNodes.length; i++) {\r
+ node = navRoot.childNodes[i];\r
+ if (node.nodeName=="DIV") {\r
+ node.onmouseover=function() {\r
+ this.className+=" over";\r
+ }\r
+ node.onmouseout=function() {\r
+ this.className=this.className.replace\r
+ (" over", "");\r
+ }\r
+ }\r
+ }\r
+ }\r
+}\r
+window.onload=startList;\r
+\r
+\r
+\r
+\r
OSDN Git Service
