Menu
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?
737
like 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.com/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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
