Claro, se me complica bastante el hecho de enviar y recivir la informacion al pasar sobre el cliente... de todas formas sigo haciendo pruebas...
Algo que hice fue lo siguiente....
Archivo JS
es largo pero lo pongo para que lo puedan copiar y pegar....
LO PONGO EN 2 PARTES POR QUE NO ME DEJA PONERLO TODO...
Código PHP:
/* --- BoxOver ---
/* --- v 2.1 17th June 2006
By Oliver Bryant with help of Matthew Tagg
http://boxover.swazz.org */
if (typeof document.attachEvent!='undefined') {
window.attachEvent('onload',init);
document.attachEvent('onmousemove',moveMouse);
document.attachEvent('onclick',checkMove); }
else {
window.addEventListener('load',init,false);
document.addEventListener('mousemove',moveMouse,false);
document.addEventListener('click',checkMove,false);
}
var oDv=document.createElement("div");
var dvHdr=document.createElement("div");
var dvBdy=document.createElement("div");
var windowlock,boxMove,fixposx,fixposy,lockX,lockY,fixx,fixy,ox,oy,boxLeft,boxRight,boxTop,boxBottom,evt,mouseX,mouseY,boxOpen,totalScrollTop,totalScrollLeft;
boxOpen=false;
ox=10;
oy=10;
lockX=0;
lockY=0;
function init() {
oDv.appendChild(dvHdr);
oDv.appendChild(dvBdy);
oDv.style.position="absolute";
oDv.style.visibility='hidden';
document.body.appendChild(oDv);
}
function defHdrStyle() {
dvHdr.innerHTML='<img style="vertical-align:middle" src="info.gif"> '+dvHdr.innerHTML;
dvHdr.style.fontWeight='bold';
dvHdr.style.width='150px';
dvHdr.style.fontFamily='arial';
dvHdr.style.border='1px solid #A5CFE9';
dvHdr.style.padding='3';
dvHdr.style.fontSize='11';
dvHdr.style.color='#4B7A98';
dvHdr.style.background='#D5EBF9';
dvHdr.style.filter='alpha(opacity=85)'; // IE
dvHdr.style.opacity='0.85'; // FF
}
function defBdyStyle() {
dvBdy.style.borderBottom='1px solid #A5CFE9';
dvBdy.style.borderLeft='1px solid #A5CFE9';
dvBdy.style.borderRight='1px solid #A5CFE9';
dvBdy.style.width='150px';
dvBdy.style.fontFamily='arial';
dvBdy.style.fontSize='11';
dvBdy.style.padding='3';
dvBdy.style.color='#1B4966';
dvBdy.style.background='#FFFFFF';
dvBdy.style.filter='alpha(opacity=85)'; // IE
dvBdy.style.opacity='0.85'; // FF
}
function checkElemBO(txt) {
if (!txt || typeof(txt) != 'string') return false;
if ((txt.indexOf('header')>-1)&&(txt.indexOf('body')>-1)&&(txt.indexOf('[')>-1)&&(txt.indexOf('[')>-1))
return true;
else
return false;
}
function scanBO(curNode) {
if (checkElemBO(curNode.title)) {
curNode.boHDR=getParam('header',curNode.title);
curNode.boBDY=getParam('body',curNode.title);
curNode.boCSSBDY=getParam('cssbody',curNode.title);
curNode.boCSSHDR=getParam('cssheader',curNode.title);
curNode.IEbugfix=(getParam('hideselects',curNode.title)=='on')?true:false;
curNode.fixX=parseInt(getParam('fixedrelx',curNode.title));
curNode.fixY=parseInt(getParam('fixedrely',curNode.title));
curNode.absX=parseInt(getParam('fixedabsx',curNode.title));
curNode.absY=parseInt(getParam('fixedabsy',curNode.title));
curNode.offY=(getParam('offsety',curNode.title)!='')?parseInt(getParam('offsety',curNode.title)):10;
curNode.offX=(getParam('offsetx',curNode.title)!='')?parseInt(getParam('offsetx',curNode.title)):10;
curNode.fade=(getParam('fade',curNode.title)=='on')?true:false;
curNode.fadespeed=(getParam('fadespeed',curNode.title)!='')?getParam('fadespeed',curNode.title):0.04;
curNode.delay=(getParam('delay',curNode.title)!='')?parseInt(getParam('delay',curNode.title)):0;
if (getParam('requireclick',curNode.title)=='on') {
curNode.requireclick=true;
document.all?curNode.attachEvent('onclick',showHideBox):curNode.addEventListener('click',showHideBox,false);
document.all?curNode.attachEvent('onmouseover',hideBox):curNode.addEventListener('mouseover',hideBox,false);
}
else {// Note : if requireclick is on the stop clicks are ignored
if (getParam('doubleclickstop',curNode.title)!='off') {
document.all?curNode.attachEvent('ondblclick',pauseBox):curNode.addEventListener('dblclick',pauseBox,false);
}
if (getParam('singleclickstop',curNode.title)=='on') {
document.all?curNode.attachEvent('onclick',pauseBox):curNode.addEventListener('click',pauseBox,false);
}
}
curNode.windowLock=getParam('windowlock',curNode.title).toLowerCase()=='off'?false:true;
curNode.title='';
curNode.hasbox=1;
}
else
curNode.hasbox=2;
}
function getParam(param,list) {
var reg = new RegExp('([^a-zA-Z]' + param + '|^' + param + ')\\s*=\\s*\\[\\s*(((\\[\\[)|(\\]\\])|([^\\]\\[]))*)\\s*\\]');
var res = reg.exec(list);
var returnvar;
if(res)
return res[2].replace('[[','[').replace(']]',']');
else
return '';
}
function Left(elem){
var x=0;
if (elem.calcLeft)
return elem.calcLeft;
var oElem=elem;
while(elem){
if ((elem.currentStyle)&& (!isNaN(parseInt(elem.currentStyle.borderLeftWidth)))&&(x!=0))
x+=parseInt(elem.currentStyle.borderLeftWidth);
x+=elem.offsetLeft;
elem=elem.offsetParent;
}
oElem.calcLeft=x;
return x;
}
function Top(elem){
var x=0;
if (elem.calcTop)
return elem.calcTop;
var oElem=elem;
while(elem){
if ((elem.currentStyle)&& (!isNaN(parseInt(elem.currentStyle.borderTopWidth)))&&(x!=0))
x+=parseInt(elem.currentStyle.borderTopWidth);
x+=elem.offsetTop;
elem=elem.offsetParent;
}
oElem.calcTop=x;
return x;
}
var ah,ab;
function applyStyles() {
if(ab)
oDv.removeChild(dvBdy);
if (ah)
oDv.removeChild(dvHdr);
dvHdr=document.createElement("div");
dvBdy=document.createElement("div");
CBE.boCSSBDY?dvBdy.className=CBE.boCSSBDY:defBdyStyle();
CBE.boCSSHDR?dvHdr.className=CBE.boCSSHDR:defHdrStyle();
dvHdr.innerHTML=CBE.boHDR;
dvBdy.innerHTML=CBE.boBDY;
ah=false;
ab=false;
if (CBE.boHDR!='') {
oDv.appendChild(dvHdr);
ah=true;
}
if (CBE.boBDY!=''){
oDv.appendChild(dvBdy);
ab=true;
}
}
var CSE,iterElem,LSE,CBE,LBE, totalScrollLeft, totalScrollTop, width, height ;
var ini=false;
// Customised function for inner window dimension
function SHW() {
if (document.body && (document.body.clientWidth !=0)) {
width=document.body.clientWidth;
height=document.body.clientHeight;
}
if (document.documentElement && (document.documentElement.clientWidth!=0) && (document.body.clientWidth + 20 >= document.documentElement.clientWidth)) {
width=document.documentElement.clientWidth;
height=document.documentElement.clientHeight;
}
return [width,height];
}
var ID=null;
function moveMouse(e) {
//boxMove=true;
e?evt=e:evt=event;
CSE=evt.target?evt.target:evt.srcElement;
if (!CSE.hasbox) {
// Note we need to scan up DOM here, some elements like TR don't get triggered as srcElement
iElem=CSE;
while ((iElem.parentNode) && (!iElem.hasbox)) {
scanBO(iElem);
iElem=iElem.parentNode;
}
}
if ((CSE!=LSE)&&(!isChild(CSE,dvHdr))&&(!isChild(CSE,dvBdy))){
if (!CSE.boxItem) {
iterElem=CSE;
while ((iterElem.hasbox==2)&&(iterElem.parentNode))
iterElem=iterElem.parentNode;
CSE.boxItem=iterElem;
}
iterElem=CSE.boxItem;
if (CSE.boxItem&&(CSE.boxItem.hasbox==1)) {
LBE=CBE;
CBE=iterElem;
if (CBE!=LBE) {
applyStyles();
if (!CBE.requireclick)
if (CBE.fade) {
if (ID!=null)
clearTimeout(ID);
ID=setTimeout("fadeIn("+CBE.fadespeed+")",CBE.delay);
}
else {
if (ID!=null)
clearTimeout(ID);
COL=1;
ID=setTimeout("oDv.style.visibility='visible';ID=null;",CBE.delay);
}
if (CBE.IEbugfix) {hideSelects();}
fixposx=!isNaN(CBE.fixX)?Left(CBE)+CBE.fixX:CBE.absX;
fixposy=!isNaN(CBE.fixY)?Top(CBE)+CBE.fixY:CBE.absY;
lockX=0;
lockY=0;
boxMove=true;
ox=CBE.offX?CBE.offX:10;
oy=CBE.offY?CBE.offY:10;
}
}
else if (!isChild(CSE,dvHdr) && !isChild(CSE,dvBdy) && (boxMove)) {
// The conditional here fixes flickering between tables cells.
if ((!isChild(CBE,CSE)) || (CSE.tagName!='TABLE')) {
CBE=null;
if (ID!=null)
clearTimeout(ID);
fadeOut();
showSelects();
}
}
LSE=CSE;
}