Jason Reed, Administrator
What exactly are you trying to modify in this code? Is it not working at all or does it work but not do something that you desire?
In either case, see if the html code at this link might be more in line with what you are trying to do:
http://www.emanueleferonato.com/2006...th-javascript/
Jason Reed
Empirisoft Software Support Specialist
Member
This code you referenced works fine when called with the custom type in Medialab. How do we now modify this code so the x and y values get stored back into Medialab DATA instead of being displayed on the screen? At the moment there is no "continue" or submit item to return to the next line in the Medialab questionnaire. Thanks so much for your help.
Code so far:
<html>
<head>
<script language="JavaScript">
function point_it(event){
pos_x = event.offsetX?(event.offsetX):event.pageX-document.getElementById("pointer_div").offsetLeft;
pos_y = event.offsetY?(event.offsetY):event.pageY-document.getElementById("pointer_div").offsetTop;
document.getElementById("cross").style.left = (pos_x-1) ;
document.getElementById("cross").style.top = (pos_y-15) ;
document.getElementById("cross").style.visibility = "visible" ;
document.pointform.form_x.value = pos_x;
document.pointform.form_y.value = pos_y;
}
</script>
</head>
<body>
<form name="pointform" method="post">
<div id="pointer_div" onclick="point_it(event)" style = "background-image:url('sun.jpg');width:500px;height:333px;">
<img src="point.gif" id="cross" style="position:relative;visibility:hidden;z-index:2;"></div>
You pointed on x = <input type="text" name="form_x" size="4" /> - y = <input type="text" name="form_y" size="4" />
</form>
</body>
</html>
Jason Reed, Administrator
Check out the html script at this link:
http://www.empirisoft.com/support/sh...t=custom+mouse
Jason Reed
Empirisoft Software Support Specialist
Member
Thanks for your support with this. Using your examples we managed to include an image of a sandpit which when clicked on passes the x and y position of the mouse back to Medialab.
Our code here:
<html>
<head>
<script language="JavaScript">
function point_it(event){
var pos_x=0;
var pos_y=0;
pos_x = event.offsetX?(event.offsetX):event.pageX-document.getElementById("pointer_div").offsetLeft;
pos_y = event.offsetY?(event.offsetY):event.pageY-document.getElementById("pointer_div").offsetTop;
document.getElementById("<ml.varname>_01").value = pos_x;
document.getElementById("<ml.varname>_02").value = pos_y;
document.sandpit.submit();
}
</script>
</head>
<body>
<style>
input.check {height: 50px; width: 50px;}
<ml.styles>
</style>
<form name="sandpit" method="post">
<div id="pointer_div" onclick="point_it(event)" style = "background-image:url('sandpit.jpg');width:928px;height:593px; ">
</div>
<br><br>
<ml.wording>:<br><br>
<input type="hidden" name="<ml.varname>_01"><br>
<input type="hidden" name="<ml.varname>_02"><br>
</form>
</body>
</html>
Jason Reed, Administrator
Awesome! And thanks for posting the html code you used; this will be very helpful for other users to see.
Jason Reed
Empirisoft Software Support Specialist
Posting Permissions
Reply With Quote