Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

    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.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •