Ayuda con funciones en js..

carlic · #1 (**permalink**) 19/12/2009, 09:47

Hola a Todos..

alguien me podria ayudar con algunos codigos para crear una funcion que me permita mover una imagen para varias direcciones controlado por botones..por favor..es que soy nueva con esto y no tengo la mayor idea como hacerlo..

Gracias..

Osdiwe · #2 (**permalink**) 19/12/2009, 10:01

Prueba con jQuery.

Te pongo un enlace a la parte de Effects/animate que te servirá para crear el código que quieres. Mírate bien los ejemplos. Sobretodo el primero, que utiliza dos botones para mover un div a derecha e izquierda. Supongo que esto es lo que estás buscando.

[URL="http://docs.jquery.com/Effects/animate"]http://docs.jquery.com/Effects/animate[/URL]

jackson666 · #3 (**permalink**) 19/12/2009, 10:03

Código HTML:

<html>
<head>
<style type="text/css">
#imagen{position: absolute; top: 0; left: 0;}
</style>
</head>
<body>
<img src="turuta.jpg" alt="algo" id="imagen" />
<form action="#" mehod="GET">
    <input type="button" value="derecha" onclick="derecha();" />
    <input type="button" value="izquierda" onclick="izquierda();" />
    <input type="button" value="arriba" onclick="arriba();" />
    <input type="button" value="abajo" onclick="abajo();" />
</form>

<script type="text/javascript">
var img=document.getElementById("imagen");

var timer;

var contador=0;

function derecha(){

    if(contador<20){

        contador++;

        img.style.left=contador+'px';

        timer=setTimeout("derecha()",50);

    }else{
        clearTimeout(timer);
        contador=0;

    }

}

//el resto te las dejo a vos =)
</script>
</body>
</html>

mhax · #4 (**permalink**) 19/12/2009, 10:37

Espero te sirva, arregla lo ke no te sirva:

Código HTML:

Ver original<!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=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#apDiv1 {
    position:absolute;
    left:224px;
    top:79px;
    width:477px;
    height:382px;
    z-index:1;
}
#apDiv2 {
    position:absolute;
    left:393px;
    top:318px;
    width:143px;
    height:103px;
    z-index:2;
}
#apDiv3 {
    position:absolute;
    left:439px;
    top:328px;
    width:50px;
    height:24px;
    z-index:3;
}
#apDiv4 {
    position:absolute;
    left:405px;
    top:353px;
    width:34px;
    height:24px;
    z-index:4;
}
#apDiv5 {
    position:absolute;
    left:441px;
    top:157px;
    width:20px;
    height:28px;
    z-index:5;
}
#apDiv6 {
    position:absolute;
    left:440px;
    top:377px;
    width:49px;
    height:23px;
    z-index:5;
}
#apDiv7 {
    position:absolute;
    left:488px;
    top:352px;
    width:35px;
    height:24px;
    z-index:6;
}
#imagen {
    position:absolute;
    left:361px;
    top:123px;
    width:183px;
    height:110px;
    z-index:7;
}
-->
</style>
<script language="javascript">
 
  var x=0;
    function derecha(){
         img=document.getElementById("imagen");
         x+=20;
         img.style.left=x+'px';
    }
  
    function izq(){
      img=document.getElementById("imagen");
      x-=20;
      img.style.left=x+'px';
    }
    
    function arriba(){
      img=document.getElementById("imagen");
      x-=20;
      img.style.top=x+'px';   
    }
    
    function abajo(){
      img=document.getElementById("imagen");
      x+=20;
      img.style.top=x+'px';   
    }
</script>
 
</head>
 
<body>
<div id="apDiv2"></div>
<div id="apDiv3">
  <input type="button" onclick="arriba()" value="Arriba" />
</div>
<div id="apDiv4">
  <input type="button" onclick="izq()" value="Izq" />
</div>
<div id="apDiv6">
  <input type="button" onclick="abajo()" value="Abajo" />
</div>
<div id="apDiv7">
  <input type="button" value="Der" onclick="derecha()"/>
</div>
<img alt="imagen" id="imagen"/>
</body>
</html>

carlic · #5 (**permalink**) 19/12/2009, 14:29

muchas gracias..era justo lo que necesitaba..