Move Images with Javascript

Question

Move Images with Javascript

Navigation

#1 by (4 votes)

0

I would like an example of how you could move an HTML image using JavaScript. For example, the image is in a position, when touching a button it moves. Thanks!

javascript html

asked by anonymous 05.07.2016 / 17:28

1 answer

How to protect myself from this PHP Backdoor? Validate string in number with php

score 4 · Answer 1

Since I do not know if you want only one button to move to only one side, I have an example moving to 4 sides with 4 buttons, follow the code:

<html>
<head>
<title>Demo of changing position of an Image in JavaScript</title>
<script language='JavaScript' type='text/JavaScript'>
<!--
function move_img(str) {
var step=50; // change this to different step value
switch(str){
case "down":
var x=document.getElementById('i1').offsetTop;
x= x + step;
document.getElementById('i1').style.top= x + "px";
break;

case "up":
var x=document.getElementById('i1').offsetTop;
x= x -step;
document.getElementById('i1').style.top= x + "px";
break;

case "left":
var y=document.getElementById('i1').offsetLeft;
y= y - step;
document.getElementById('i1').style.left= y + "px";
break;

case "right":
var y=document.getElementById('i1').offsetLeft;
y= y + step;
document.getElementById('i1').style.left= y + "px";
break;
}
}
//-->
</script>
</head>
<body>
<img src=images/help.jpg id='i1' style="position:absolute; left: 500; top: 100;">
<br><br><br><br>
<input type=button onClick=move_img('up') value='Up'>
<br>
<input type=button onClick=move_img('left') value='Left'>
<input type=button onClick=move_img('right') value='right'>
<br>
<input type=button onClick=move_img('down') value='down'>
<br><br> Return to <a href=image-move.php>image move tutorial</a>
</body>
</html>

Example of this working code: link

NOTE: You can also move the image more or less, changing the step variable where 50 is how much it will move.