Autor
|
Tema: mover imagenes onclick con jquery (Leído 21,163 veces)
|
gAb1
Desconectado
Mensajes: 731
|
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<!doctype html> <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> <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"> <div id="layer_1" input type="button" value="Delete Image" onclick="return delImage2('layer_1')"> <div id="layer_3" style="visibility:hidden">
layer.css#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 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!
|
|
« Última modificación: 21 Abril 2014, 21:44 pm por #!drvy »
|
En línea
|
|
|
|
Pablo Videla
|
Bueno, no me manejo mucho con css, y para adaptarme a lo que se, modificaria lo siguiente .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; }
Para que las propiedades en vez de ser ID CSS, sean clases CSS entonces en tu div que tenga el id layer3 por ejemplo, agregale el class="layer3" ok, lo que tu quieres es cambiar la clase css del div por cada click que se haga en en el div, te voy a dar una idea porque tu problema realmente no lo entendi mucho, pero si entendi que con un click quieres hacer que se quite la clase css del div. Vamos a ver si esto te sirve. $(document).ready(function(){ $("#layer3").click(function(){ /*Cada vez que le haces click, se agrega la clase o se elimina dependiendo del estado */ $(this).toggleClass("layer3"); }); });
http://api.jquery.com/toggleClass/Tambien te puede servir, addClass o removeClass dependiendo de lo que quieras en jquery
Se me olvido otra cosa <div id="layer_0" input type="button" value="Delete Image" onclick="return delImage('layer_0')">
Eso no es valido, un div es un div, no es mitad div ni mitad input xD no existe tal cosa <input type="button" value="Delete image" onclick="alert('alerta hice click');" />
Eso es un boton
|
|
« Última modificación: 21 Abril 2014, 13:40 pm por #!drvy »
|
En línea
|
|
|
|
gAb1
Desconectado
Mensajes: 731
|
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...
|
|
|
En línea
|
|
|
|
Pablo Videla
|
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...
Para mover la imagen lo unico que hace toggle, es por cada click, agregar tu clase css o quitarla (En caso que este la imagen, el css estaría puesto en el div,entonces al hacer click, le quita la clase y desaparece la imagen, si le hace click de nuevo, agrega la clase css y agrega la imagen) Lo que puedes hacer es que el div sea clickeable nada mas, quitale la propiedad de input button y dejalo como div <div id="layer_0" input type="button" value="Delete Image" onclick="return delImage('layer_0')">
Esto dejarlo asi <div id="layer_0" class="layer_0">
De esta forma será un div comun y corriente y no existira boton, si le haces click a la imagen entonces esta desaparecera porque habremos hecho que el div sea clickeable ya que le agregamos el evento jquery de click. Estaré atento a tus dudas, saludos!.
Se me olvidaba otra cosa $(document).ready(function(){ //hacer esto mismo para cada clase $("#layer_3").click(function(){ /*Cada vez que le haces click, se agrega la clase o se elimina dependiendo del estado */ $(this).toggleClass("layer_3"); }); });
Debes repetir eso con cada div con layer que tengas. Con su propio nombre y su propia clase css, entiendes?
|
|
« Última modificación: 21 Abril 2014, 13:41 pm por #!drvy »
|
En línea
|
|
|
|
gAb1
Desconectado
Mensajes: 731
|
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.
|
|
|
En línea
|
|
|
|
Pablo Videla
|
Puedes ver la consola del navegador y ver los errores javascript que arroja?
|
|
|
En línea
|
|
|
|
gAb1
Desconectado
Mensajes: 731
|
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"???
|
|
|
En línea
|
|
|
|
Pablo Videla
|
$("#layer_3").click(function(){ /*Cada vez que le haces click, se agrega la clase o se elimina dependiendo del estado */ $(this).removeClass("layer_3"); $("#layer_1").addClass("layer_1"); });
Juega con el removeClass y addClass y tienes que ir intercambiando las propiedades en cada layer que quieras.
|
|
|
En línea
|
|
|
|
gAb1
Desconectado
Mensajes: 731
|
Vale, con un simple toggle puedo dejar la imagen cambiada por hover fija. $(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 $(document).ready(function(){ $("#layer_0").click(function(){ $(this).removeClass("layer_1"); }); $("#layer_0").click(function(){ $(this).toggleClass("layer_2"); }); });
o $(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.
|
|
« Última modificación: 21 Abril 2014, 13:45 pm por #!drvy »
|
En línea
|
|
|
|
Pablo Videla
|
$(document).ready(function(){ $("#layer_0").click(function(){ $(this).removeClass("layer_1"); $(this).addClass("layer_2"); }); });
Prueba con eso.
|
|
|
En línea
|
|
|
|
|
Mensajes similares |
|
Asunto |
Iniciado por |
Respuestas |
Vistas |
Último mensaje |
|
|
como acceder a mis imagenes y mover imagenes a una carpeta en C:\
Programación Visual Basic
|
ricardovinzo
|
3
|
6,286
|
9 Junio 2008, 00:03 am
por seba123neo
|
|
|
mover Css Jquery
Desarrollo Web
|
David Vans
|
4
|
4,622
|
20 Mayo 2011, 11:08 am
por David Vans
|
|
|
vectores con imagenes y evento onclick
« 1 2 »
PHP
|
Atemu
|
12
|
6,687
|
2 Julio 2013, 19:12 pm
por Atemu
|
|
|
vectores con imagenes y evento onclick
PHP
|
Atemu
|
2
|
1,755
|
26 Junio 2013, 03:30 am
por Atemu
|
|
|
como mover una sección hasta el final de otra con jquery
Desarrollo Web
|
colcrt
|
3
|
2,620
|
16 Marzo 2019, 04:48 am
por #!drvy
|
|