How to move an image with mouse?
onmousedown and onmousemove are the events to handle right?
<html>
<body>
<script type="text/javascript">
funcion good()
{
document.getElementById("omna");
document.getElementById("omna).style.position="absolute";
document.getElementById("omna").style.top=somevalue; 'these keeps changing
document.getElementById("omna").style.left=somevalue; ' these keeps changing
}
</script>
<img id="omna" src"/something.jpg" onmousedown="highlight() onmousemove="good()" onmousedown="stop()"> 'not working
</body>
</html>
How to use mousedown event on image? and with the mousedown event(I mean with the mousedown on the image), it should constantly run mousemove event function in JavaScript and when mouseup even occurs it should stop.
How do I loop through mousemove event continuously ? unable to make it out. I found some solutions on google but unable to figure it out the syntax and all. If somehow you post the same please explain me your solution.
Sorry forgot to tell you that my mousedown and the mousevents aren't working. Some people suggest use anchor tag to that is that okay ? and why mouseevents are working for an image?
How to move an image with mouse?
onmousedown and onmousemove are the events to handle right?
<html>
<body>
<script type="text/javascript">
funcion good()
{
document.getElementById("omna");
document.getElementById("omna).style.position="absolute";
document.getElementById("omna").style.top=somevalue; 'these keeps changing
document.getElementById("omna").style.left=somevalue; ' these keeps changing
}
</script>
<img id="omna" src"/something.jpg" onmousedown="highlight() onmousemove="good()" onmousedown="stop()"> 'not working
</body>
</html>
How to use mousedown event on image? and with the mousedown event(I mean with the mousedown on the image), it should constantly run mousemove event function in JavaScript and when mouseup even occurs it should stop.
How do I loop through mousemove event continuously ? unable to make it out. I found some solutions on google but unable to figure it out the syntax and all. If somehow you post the same please explain me your solution.
Sorry forgot to tell you that my mousedown and the mousevents aren't working. Some people suggest use anchor tag to that is that okay ? and why mouseevents are working for an image?
2 Answers
Reset to default 8like this:
<html>
<head>
<style>
html,body {
height:100%;
}
</style>
<script type="text/javascript">
var omnaEl,dragData=null;
function window_onload() {
omnaEl=document.getElementById("omna")
if(window.addEventListener) {
omnaEl.addEventListener('mousedown',startDrag,false);
document.body.addEventListener('mousemove',drag,false);
document.body.addEventListener('mouseup',stopDrag,false);
}
else if(window.attachEvent) {
omnaEl.attachEvent('onmousedown',startDrag);
document.body.attachEvent('onmousemove',drag);
document.body.attachEvent('onmouseup',stopDrag);
}
}
function startDrag(ev) {
if(!dragData) {
ev=ev||event;
dragData={
x: ev.clientX-omnaEl.offsetLeft,
y: ev.clientY-omnaEl.offsetTop
};
};
}
function drag(ev) {
if(dragData) {
ev=ev||event;
omnaEl.style.left=ev.clientX-dragData.x+"px";
omnaEl.style.top=ev.clientY-dragData.y+"px";
}
}
function stopDrag(ev) {
if(dragData) {
ev=ev||event;
omnaEl.style.left=ev.clientX-dragData.x+"px";
omnaEl.style.top=ev.clientY-dragData.y+"px";
dragData=null;
}
}
</script>
</head>
<body onload='window_onload();'>
<img id="omna" src="http://t0.gstatic./images?q=tbn:ANd9GcRi-8XnnXwAZmz_5R5LHRHMNlnYYHCP4WqRdu6vhf_ru8wLK9XB3IrNrwix"
width="100px" height="100px" unselectable="on" style="position:absolute;user-select:none;-moz-user-select:none;-webkit-user-select:none;"/>
</body>
</html>
Yes, these are the right events, but a few things to keep in mind:
- Don't use
onmousemovestyle event bindings that need to be specified in the markup. Read this to get more background on javascript event handling. - In conjunction with javascript, you will most probably need some help from css. Take it - don't rely on javascript to do all the heavy lifting.
- If you're experienced with javascript (know how the language behaves) then I suggest you use jquery to do the heavy lifting (like event binding, attribute setting etc) - it will make your code more concise.
Cheers!