Hola,
Mi duda es la siguiente:
Tengo una capa, y me gustaria que cuando pulsara el boton "derecha(>)" se desplazara 5px hacia la derecha. Y cuando pulsara el boton "izquierda(<)" se desplazara 5px hacia la izquierda.
Llevo todo el dia intentandolo sin exito. Aqui dejo mi codigo, a ver si me podeis ayudar en algo.
Código HTML:
<html>
<head>
<style type="text/css">
.capa { position: relative;
margin: auto;
width: 300px;
height: 60px;
background-color: orange;
color: blue;
font-family: arial;
font-size: 12pt;
border-style: solid;
border-color: black;
border-width: 2px;
}
.capa1 {
position: inherit;
margin: 0 auto;
width: 300px;
height: 25px;
}
.derecha {
float: right;
}
</style>
<script type="text/javascript">
function cambiar(){
var conjunto = document.getElementById("capa");
conjunto.style.width="600px";
conjunto.style.height="120px";
conjunto.style.fontSize="14pt";
}
function volver(){
var conjunto = document.getElementById("capa");
conjunto.style.width="300px";
conjunto.style.height="60px";
conjunto.style.fontSize="12pt";
}
function mover(){
var desplaza = document.getElementById("capa");
desplaza.style.marginRight="5px"
return desplaza;
}
function regreso(){
var regresa = document.getElementById("capa");
var posicion = document.getElementsByName("capa")
regresa.style.marginLeft="5px"
return posicion;
}
/*function desplaza (){
var posicion = document.getElementById("capa").marginLeft;
alert("Su posicion es "+posicion);
var posicionN = posicion+marginLeft=200px;
}*/
</script>
</head>
<body>
<div id="capa" class="capa" name="capa" onmouseover="cambiar()" onmouseout="volver()">CONTENIDO DE LA CAPA</div>
<br />
<div id="capa1" class="capa1"><input type="button" name="izquierda" value="<" onclick="regreso()" /> <input type="button" class="derecha" name="derecha" value=">" onclick="mover()" /></div>
</body>
</html> Hay cuatro funciones, dos de ellas son para modificar el tamaño, y las otras dos teoricamente son para que se desplaze.
Entre comentarios he puesto otra idea (que seguramente no estara muy bien desarrollada), para ver si conseguia hacer que se desplazara. La idea era almacenar su posicion en una variable, y en otra variable sumarle 5 px a esa posicion almacenada.
Espero vuestros consejos.
Saludos, gracias de antemano.