...

View Full Version : 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:



<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 (http://www.w3schools.com/PHP/php_ajax_database.asp)

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 :



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?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum