Get value from javascript code and save the value to mysql using php

wter · 03-26-2009, 07:53 PM

Hi,i have question here. I have done the JavaScript code with image map highlight that need user click on it. But i do not know how to get the value from the position click and save the value to database using mysql and php.

Here my code:

Code:

<html>
<head>
<style type="text/css">
.tst {
  position:absolute;left:60px;top:20px;width:330px;height:263px;border:solid black 1px;
}

.tst IMG {
 width:330px;height:451px;
}

#tst2 {
  left:480px;
}

.window1 {
  position:absolute;overflow:hidden;visibility:hidden;z-Index:2;width:20px;height:20px;border:solid #FF0000 1px;
}

.window1 DIV{
  position:absolute;width:20px;font-Size:10px;text-Align:center;
}

.window2 {
  position:absolute;overflow:hidden;visibility:hidden;z-Index:2;width:20px;height:20px;border:solid #FF0000 1px;
}

.window2 DIV{
  position:absolute;width:20px;font-Size:10px;text-Align:center;
}

.mask {
  position:absolute;visibility:hidden;z-Index:1;left:0px;top:0px;width:100%;height:100%;

/* Moz */
  opacity: .5;
/* IE5-7 */
  filter: alpha(opacity=50);
/* IE8 */
   -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}
</style>

<script type="text/javascript">

function zxcImageHiLight(id,nu,over){
 var oop=new zxcImgHiLight(id,nu,over);
}

function zxcImgHiLight(id,nu,over){
 this.p=document.getElementById(id);
 this.img=this.p.getElementsByTagName('IMG')[0];
 var divs=this.p.getElementsByTagName('DIV');
 this.win=divs[0];
 this.msk=divs[1]||false;
 this.cnt=1;
 this.ary=[];
 this.over=over||false;
 this.nu=nu||false;
 this.addevt(this.p,'click','hilight');
 
 }

 zxcImgHiLight.prototype.hilight=function(ev){
 var pos=zxcPos(this.img);
 var mse=[ev.clientX-pos[0],ev.clientY-pos[1]];
 var ary=this.ary;

 if (ary.length>4) 
 { 
 	alert("Click time exceed 5 times!");
	return false;
	
 }
 
 if (!this.over){
  for (var z0=0;z0<ary.length;z0++){
   if (mse[0]>zxcLTWH(ary[z0],'left')-zxcLTWH(ary[z0],'width')/2 && 
       mse[0]<zxcLTWH(ary[z0],'left')+zxcLTWH(ary[z0],'width')*1.5 && 
	   mse[1]>zxcLTWH(ary[z0],'top')-zxcLTWH(ary[z0],'height')/2 && 
	   mse[1]<zxcLTWH(ary[z0],'top')+zxcLTWH(ary[z0],'width')*1.5) 
   return;
  }
 }
 var win=zxcES(this.win.cloneNode(false),{position:'absolute',visibility:'visible',left:mse[0]-				         zxcLTWH(this.win,'width')/2+'px',top:mse[1]-zxcLTWH(this.win,'height')/2+'px'},this.p);
 		 this.addevt(win,'click','remove',win)
         zxcES(this.img.cloneNode(false),{position:'absolute',left:-zxcLTWH(win,'left')+'px',top:-         zxcLTWH(win,'top')+'px'},win);
	 
 if (this.nu) zxcES('DIV',{},win,this.cnt++);
 	    this.ary.push(win);
 if (this.msk) zxcES(this.msk,{visibility:'visible'});
}

zxcImgHiLight.prototype.remove=function(ev,win){
 for (var z0=0;z0<this.ary.length;z0++){
  if (this.ary[z0]==win){
   this.p.removeChild(win);
   this.ary.splice(z0,1);
   
   break;
  }
 }

 if (this.msk&&this.ary.length==0) zxcES(this.msk,{visibility:'hidden'});
}

zxcImgHiLight.prototype.addevt=function(o,t,f,p){
 var oop=this;
 if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](e,p);}, false);
 else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](e,p); });
 else {
  var prev=o['on'+t];
  if (prev) o['on'+t]=function(e){ prev(e); oop[f](e,p); };
  else o['on'+t]=o[f];
 }
}

function zxcES(ele,style,par,txt){
 if (typeof(ele)=='string') ele=document.createElement(ele);
 for (key in style) ele.style[key]=style[key];
 if (par) par.appendChild(ele);
 if (txt) ele.appendChild(document.createTextNode(txt));
 return ele;
}

function zxcLTWH(obj,p){
 if (obj.currentStyle) return parseInt(obj.currentStyle[p.replace(/-/g,'')]);
 return parseInt(document.defaultView.getComputedStyle(obj,null).getPropertyValue(p.toLowerCase()));
}

function zxcPos(obj){
 var rtn=[obj.offsetLeft,obj.offsetTop];
 
 while(obj.offsetParent!=null){
  var objp=obj.offsetParent;
  rtn[0]+=objp.offsetLeft-objp.scrollLeft;
  rtn[1]+=objp.offsetTop-objp.scrollTop;
  obj=objp;
 }
 return rtn;

}

function zxcDocS(){
 if (window.event) return [0,0];
 if (!document.body.scrollTop){ return [document.documentElement.scrollLeft,document.documentElement.scrollTop]; }
 else { return [document.body.scrollLeft,zxcsy=document.body.scrollTop]; }
}
</script>

<script type="text/javascript">

function Init(){

 zxcImageHiLight('tst1',true,false);
 zxcImageHiLight('tst2',true,false);
}

</script>
</head>

<body onLoad="Init();" >

<div id="tst1" class="tst" >
<img src="sun2_.jpg"/>
<div class="window1" ></div>
<div class="mask" ></div>
</div>

<div id="tst2" class="tst" >
<img src="sun2_.jpg"/>
<div class="window2" ></div>
</div>
</body>
</html>

Any help would be appreciated.

Thanks.

abduraooft · 03-27-2009, 09:59 AM

Learn some basics of php+ajax techniques

wter · 03-27-2009, 05:55 PM

Thanks for reply. I have seen the tutorial. But i still no idea how to code it.

From above code that i posted :

Code:

var pos=zxcPos(this.img);
 var mse=[ev.clientX-pos[0],ev.clientY-pos[1]];
 var ary=this.ary;

Let said this variable will pass the value to mysql using php. How to do it?