Skip to main content
adicionou 141 caracteres ao conteúdo
Fonte Link
Falion
  • 1,9mil
  • 2
  • 19
  • 30

Já que não sei se você quer somente um botão para movimentar para somente um lado,tenho um exemplo movimentando aos 4 lados com 4 botões,segue o código :

<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>

Exemplo deste código funcionando : http://www.plus2net.com/javascript_tutorial/image-move-demo.php

OBS : Você também pode caso quiser que a imagem se mova mais ou até menos, mudar na variável step aonde 50 é o quanto ela irá mover.

Já que não sei se você quer somente um botão para movimentar para somente um lado,tenho um exemplo movimentando aos 4 lados com 4 botões,segue o código :

<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>

Exemplo deste código funcionando : http://www.plus2net.com/javascript_tutorial/image-move-demo.php

Já que não sei se você quer somente um botão para movimentar para somente um lado,tenho um exemplo movimentando aos 4 lados com 4 botões,segue o código :

<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>

Exemplo deste código funcionando : http://www.plus2net.com/javascript_tutorial/image-move-demo.php

OBS : Você também pode caso quiser que a imagem se mova mais ou até menos, mudar na variável step aonde 50 é o quanto ela irá mover.

Fonte Link
Falion
  • 1,9mil
  • 2
  • 19
  • 30

Já que não sei se você quer somente um botão para movimentar para somente um lado,tenho um exemplo movimentando aos 4 lados com 4 botões,segue o código :

<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>

Exemplo deste código funcionando : http://www.plus2net.com/javascript_tutorial/image-move-demo.php