Mensajes

Si, lo siento, me acababa de dar cuenta y había modificado, pero ya habías respondido, hehehe

Como puedo hacer para que el animate vuelva otra vez al hacer click, al igual que el togge?

Hola, he estado ojeando la pagina y he sacado de un ejemplo otro posible script y al parecer funciona hehehe

Lo que me gustaría hacer es algo que seguramente es dificil, seria que al volver a darle a la imagen movida, vuelva a la posicion original y vuelva a aparecer la otra imagen que se oculto.

Este es el codigo:

Código (javascript) [Seleccionar] Expandir


$(document).ready(function(){
$("#layer_0").click(function(){
$(this).toggleClass("layer_2");
$("#layer_1").hide();
$( ".layer_2:first" ).animate({ left: 100}, { duration: 1000, step: function( now, fx ){
$( ".layer_2:gt(0)" ).css( "left", now );
}
});
});
});


Lo que hace actualmente, una vez ha terminado de moverse, al volver a darse tan solo muestra la otra imagen sin color.

Lo que necesito es algo parecido al toggle ese pero para el animate...

Entonces me gustaria usar toggle por la posibilidad de que se vuelva a como estaba. Entonces seria usar el script del toggle añadiendole eso? asi?

Código (javascript) [Seleccionar] Expandir


   $(document).ready(function(){
   $("#layer_0").click(function(){
   $(this).toggleClass("layer_2");
   $("#layer_1").hide();
   });
   });

funciona, asi esta bien.

Ahora lo que necesito es mover lateralmente la imagen al hacerle click. Mover, deslizar... mientras vaya moviéndose hacia un lado me sirve, he estado mirando, pero creo que no encuentro la función que necesito. Y cuando termine de mover la imagen mostrar el menu al lado, eso supongo que es igual con el style hidden y usando el toggle, no?

muchas gracias!

Si, al igual que los demás layer_x y los tengo con div, y si son imágenes.

Son 2 imágenes que forman 1, en blanco y negro. Las otras 2 imágenes son las mismas solo que con color y brillantes y también forman 1 imagen, aunque esta cortada en 2.

layer_2 y layer_3 remplazan a layer_0 y layer_1 al pasar el raton por encima y al hacer click.

layer 2 y 3 son en color y lo que quiero hacer es que al hacer click en una de las dos imágenes se cambie (aunque ya esta en color porque al pasar el raton por encima se activa la función hover de css y cambia las imagenes mientras este encima) y la otra imagen que hay al lado se oculte para dejar espacio. Lo primero lo hace perfectamente toggle, lo de ocultar la otra imagen todavia falta por hacerlo.

Son dos imágenes que forman una figura pero partida, cuando se hace click en una se desplaza a un lado y la otra se oculta y aparece un menu al lado de la que se ha desplazado, aparte de cambiar la imagen de blanco y negro a color.

Espero no haberte creado más dudas... hehehhe

Nada, ahora ni siquiera se vuelve a la original, al no ser toggle. Tampoco se quita la otra imagen.

[no funciona]

Vale, con un simple toggle puedo dejar la imagen cambiada por hover fija.

Código (javascript) [Seleccionar] Expandir

$(document).ready(function(){
$("#layer_0").click(function(){
$(this).toggleClass("layer_2");
});
});

Ahora, a la vez que se cambia la imagen (layer 0 por layer 2) quiero que otra imagen se oculte (layer 1), he probado asi, primero con toggleclass primero y segundo con removeclass primero, y también con los dos (this) juntos, pero no funciona

Código (javascript) [Seleccionar] Expandir


$(document).ready(function(){
$("#layer_0").click(function(){
$(this).removeClass("layer_1");
});
$("#layer_0").click(function(){
$(this).toggleClass("layer_2");
});
});
o

Código (javascript) [Seleccionar] Expandir

$(document).ready(function(){
$("#layer_0").click(function(){
$(this).toggleClass("layer_2");
$(this).removeClass("layer_1");
});
});

Solo funciona el toggleclass, la imagen se cambia, pero la otra imagen no se oculta.

Lo ultimo seria al hacer click en una imagen, todo lo anterior, más aparte que se desplace lateralmente la imagen actual, en este caso layer 2 o layer 3 (cada una hacia un lado distinto).

Gracias.

Vale, fallo mio, había puesto mal una cosa.

El problema esque se oculta y ya no se le puede dar click... Tengo que poner que al darle se oculte por ejemplo el layer 0 y que se muestre el layer 2 y con el otro lo mismo, se oculta el layer 1 y se muestra el 3.

¿Tal y como lo tengo estaría bien?

<div id="layer_3" style="visibility:hidden"> añadiendole class="layer_3"???

Si, claro, en el mismo archivo js. El problema es que no hace nada, le doy click a la imagen y nada, solo el efecto hover del css...

Lo tengo tal y como me has dicho: div id y class sin nada mas.

Hola y gracias por responder.

Hmm respecto a lo que comentas sobre el div y el boton, es un diseño gráfico con animaciones y no puedo poner botones por ahí, por eso quería que el propio div o la propia imagen sea el botón y funciona perfectamente, con otro script que usaba antes pero no hacia lo que quería, la imagen se desplazaba instantáneamente al hacerle click, sin hacer la animación.

No tengo problemas para usar clases en lugar de ids. De todas maneras hay que cambiar bastante.

¿Sabes como puedo hacerlo, probar tu código haciendo que la imagen sea el botón?

Para lo de mover la imagen lateralmente creo que era una función u opción de toggle si no me equivoco...

[index.html]

Hola, llevo un buen rato intentando hacer mover unas imágenes hacia los lados cuando se haga click en ellas. Estoy usando input type button y onclick para el jscript, pero no consigo nada...

La imagen la llamo desde una hoja de estilo con un div y la id de la hoja de estilo, en la hoja de estilo uso hover para que se cambie al pasar el cursor por encima, pero necesito que la segunda imagen (la que aparece al pasar el cursor por encima) sea la que haya a partir del click.

Llevo trasteando un buen rato y no me aclaro:

index.html

Código (html4strict) [Seleccionar] Expandir


<!doctype html>
<html lang="en">
<head>
   <meta charset="utf-8">
   <title>Untitled Document</title>

   <link rel="stylesheet" type="text/css" media="all" href="css/logo.css">
   <link rel="stylesheet" type="text/css" media="all" href="css/foot.css">
   <link rel="stylesheet" type="text/css" media="all" href="css/layer.css">
   <link rel="stylesheet" type="text/css" media="all" href="css/design_menu.css">
   <link rel="stylesheet" type="text/css" media="all" href="css/photo_menu.css">
   <link rel="stylesheet" type="text/css" media="all" href="css/.css">
   
   <script type="text/javascript" src="jscript/jquery-2.1.0.min.js"></script>
   <script type="text/javascript" src="jscript/moveitem.js"></script>
</head>
   
<body>
   <div id="logo"></div>
   <div id="creativos"></div>
   <div id="DADA"></div>
   <div id="rights_reserved"></div>
   <div id="design_company"></div>
   <div id="pro_photo_web_design"></div>
   <div id="layer_0" input type="button" value="Delete Image" onclick="return delImage('layer_0')">
    <div id="layer_2" style="visibility:hidden">
           <table id="design_menu">
               <div id=""></div>
               <div id=""></div>
               <div id=""></div>
               <div id=""></div>
               <div id=""></div>
               <div id=""></div>
           </table>
       </div>
   </div>
<div id="layer_1" input type="button" value="Delete Image" onclick="return delImage2('layer_1')">
    <div id="layer_3" style="visibility:hidden">
           <table id="photo_menu">
               <div id=""></div>
               <div id=""></div>
               <div id=""></div>
               <div id=""></div>
               <div id=""></div>
               <div id=""></div>
           </table>
       </div>
   </div>
</body>
</html>



layer.css

Código (css) [Seleccionar] Expandir


#layer_0 {
background: url(../img/layer/layer-0.png) no-repeat;
position: absolute;
left: 700px;
top: 164px;
width: 599px;
height: 1291px;
z-index: 3;
}

#layer_1 {
background: url(../img/layer/layer-1.png) no-repeat;
position: absolute;
left: 1300px;
top: 170px;
width: 527px;
height: 1291px;
z-index: 3;
}

#layer_0:hover {
background: url(../img/layer/layer-2.png) no-repeat;
}

#layer_1:hover {
background: url(../img/layer/layer-3.png) no-repeat;
}

#layer_2 {
background: url(../img/layer/layer-2.png) no-repeat;
position: absolute;
left: 100px;
top: 170px;
width: 599px;
height: 1291px;
z-index: 3;
}

#layer_3 {
background: url(../img/layer/layer-3.png) no-repeat;
position: absolute;
left: 2000px;
top: 170px;
width: 527px;
height: 1291px;
z-index: 3;
}


el jscript que uso no funciona, pondré una parte por si se puede usar algo, aunque me temo que se va necesitar jquery para todo

Código (javascript) [Seleccionar] Expandir


Element.prototype.remove = function() {
   this.parentElement.removeChild(this);
}
NodeList.prototype.remove = HTMLCollection.prototype.remove = function() {
   for(var i = 0, len = this.length; i < len; i++) {
       if(this[i] && this[i].parentElement) {
           this[i].parentElement.removeChild(this[i]);
       }
   }
}

function delImage(imageID) {

document.getElementById(imageID).remove();

document.getElementById("layer_1").remove();

}


function delImage2(imageID) {

document.getElementById(imageID).remove();

document.getElementById("layer_0").remove();

}


Como ya he dicho, necesito que al hacer click y eliminarse las dos imágenes, aparezca una desplazándose lateralmente desde donde estaba la imagen en la que se hizo click y se quede fija, para más adelante mostrar el menú oculto.

Además, estaba pensando en no eliminar las imágenes, si no ocultarlas. Porque las dos imágenes, son como portadas para los menús, cuando haces click en una se gira hacia el lado (ej.: si se hace click en la imagen del lado derecho, se desplaza a la derecha), la otra se elimina o desaparece (mejor) y aparece un menú con 6 opciones (imágenes con link) y cada opción abre un tabla o tablas sueltas donde van imágenes y texto, en el lado vacío que dejo la imagen que no se clickó y al revés. Entonces quería no eliminarlas para que se pueda volver a dejar como estaba todo, darle click otra vez y que se cierre todo y quede como al principio.

¿Alguien puede ayudarme con este lio?

Muchas gracias!