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.
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.