kreftski
04-17-2007, 03:43 AM
Hello there,
I want to use the onmousedown event to 'click and drag' the css background image in my div.
Here is the example of what I have done already: http://kreftski.ctm-gaming.com/drag.html
So I accomplished the first challenge of getting the background to move at all, I then reversed the motion, I will take this out when the click+drag works.
I was thinking of having something like following, but I cant get it to work. I would mean putting all the current js script into a drag() function, then using onmousedown to trigger the onmousemove event in the script. Im having trouble implementing this technique.
<div id="image" onmousedown="drag();"></div>
Any help will be appreciated! Below is the source if you haven't already started reading it.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
padding:0;
margin:0;
}
#image {
width:1000px;
height:500px;
}
-->
</style>
</head>
<body>
<div id="image"></div>
<script language="JavaScript1.2">
<!-- Begin
var IE = document.all?true:false;
if (!IE) document.captureEvents(Event.MOUSEMOVE)
document.onmousemove = getMouseXY;
var tempX = 0;
var tempY = 0;
function getMouseXY(e) {
if (IE) { // grab the x-y pos.s if browser is IE
tempX = event.clientX + document.body.scrollLeft;
tempY = event.clientY + document.body.scrollTop;
}
else { // grab the x-y pos.s if browser is NS
tempX = e.pageX;
tempY = e.pageY;
}
if (tempX < 0){tempX = 0;}
if (tempY < 0){tempY = 0;}
if (tempX > 1000){tempX = 1000}
if(tempY > 500){tempY = 500}
document.getElementById('image').style.background = "url(fullstop_services.jpg) " + "-" + tempX + "px " + "-" + tempY + "px";
return true;
}
// End -->
</script>
</body>
</html>
Thank you!
I want to use the onmousedown event to 'click and drag' the css background image in my div.
Here is the example of what I have done already: http://kreftski.ctm-gaming.com/drag.html
So I accomplished the first challenge of getting the background to move at all, I then reversed the motion, I will take this out when the click+drag works.
I was thinking of having something like following, but I cant get it to work. I would mean putting all the current js script into a drag() function, then using onmousedown to trigger the onmousemove event in the script. Im having trouble implementing this technique.
<div id="image" onmousedown="drag();"></div>
Any help will be appreciated! Below is the source if you haven't already started reading it.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
padding:0;
margin:0;
}
#image {
width:1000px;
height:500px;
}
-->
</style>
</head>
<body>
<div id="image"></div>
<script language="JavaScript1.2">
<!-- Begin
var IE = document.all?true:false;
if (!IE) document.captureEvents(Event.MOUSEMOVE)
document.onmousemove = getMouseXY;
var tempX = 0;
var tempY = 0;
function getMouseXY(e) {
if (IE) { // grab the x-y pos.s if browser is IE
tempX = event.clientX + document.body.scrollLeft;
tempY = event.clientY + document.body.scrollTop;
}
else { // grab the x-y pos.s if browser is NS
tempX = e.pageX;
tempY = e.pageY;
}
if (tempX < 0){tempX = 0;}
if (tempY < 0){tempY = 0;}
if (tempX > 1000){tempX = 1000}
if(tempY > 500){tempY = 500}
document.getElementById('image').style.background = "url(fullstop_services.jpg) " + "-" + tempX + "px " + "-" + tempY + "px";
return true;
}
// End -->
</script>
</body>
</html>
Thank you!