Click to move DHTML Item

[Total: 0    Average: 0/5]

This example will move the form (IE only) to the Y coord. that was clicked.

Head Code:

<style> 
.clickablearea{cursor:hand;} 
</style> 

Body Code:

<script> 
function mouseMoved() 
{ 
var eobj,thex,they 
eobj = window.event 
if(eobj.srcElement.className!="clickablearea") 
{ 
thex = eobj.clientX; 
they = eobj.clientY;

document.all.formname1.style.top=they;  // moves the top to where the cursor is clicked.
//document.all.formname1.style.left=thex;

// this updates the next clicks
document.formname1.y1.value+=(document.formname1.y1.value=="")?they:","+they;
document.formname1.x1.value+=(document.formname1.x1.value=="")?thex:","+thex;;
} 
} 

document.onclick=mouseMoved 
</script> 

<form style="position:absolute;" name="formname1" ACTION ="previewXYpage.cfm" METHOD="Post" > 
<table bgcolor="#COCOCO" cellspacing="1" cellpadding="1" border="2"> 
<tr> 
    <td WIDTH=1%><class="clickablearea">This a clickable row</td> 
</tr> 
</table> 

The X Co-Ordinate is <input type="text" width=50 name=x1 value=""><BR> 
The Y Co-Ordinate is <input type="text" width=50 name=y1 value=""> 

<INPUT class="clickablearea" TYPE = "Submit" VALUE ="Enter"> 
<INPUT class="clickablearea" TYPE = "Reset" VALUE ="Clear"> 

</FORM> 

Times Viewed: 0

Leave a Reply

Your email address will not be published. Required fields are marked *