elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: (TUTORIAL) Aprende a emular Sentinel Dongle By Yapis


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  mover imagenes onclick con jquery		0 Usuarios y 2 Visitantes están viendo este tema.
Páginas: [1] 2 3 4 5 Ir Abajo Respuesta Imprimir
Autor Tema: mover imagenes onclick con jquery  (Leído 20,910 veces)
gAb1


Desconectado Desconectado

Mensajes: 731


Ver Perfil
mover imagenes onclick con jquery
« en: 20 Abril 2014, 01:02 am »
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
  1. <!doctype html>
  2. <html lang="en">
  4.     <meta charset="utf-8">
  5.     <title>Untitled Document</title>
  6.  
  7.     <link rel="stylesheet" type="text/css" media="all" href="css/logo.css">
  8.     <link rel="stylesheet" type="text/css" media="all" href="css/foot.css">
  9.     <link rel="stylesheet" type="text/css" media="all" href="css/layer.css">
  10.     <link rel="stylesheet" type="text/css" media="all" href="css/design_menu.css">
  11.     <link rel="stylesheet" type="text/css" media="all" href="css/photo_menu.css">
  12.     <link rel="stylesheet" type="text/css" media="all" href="css/.css">
  13.  
  14.     <script type="text/javascript" src="jscript/jquery-2.1.0.min.js"></script>
  15.     <script type="text/javascript" src="jscript/moveitem.js"></script>
  16. </head>
  17.  
  19.     <div id="logo"></div>
  20.     <div id="creativos"></div>
  21.     <div id="DADA"></div>
  22.     <div id="rights_reserved"></div>
  23.     <div id="design_company"></div>
  24.     <div id="pro_photo_web_design"></div>
  25.     <div id="layer_0" input type="button" value="Delete Image" onclick="return delImage('layer_0')">
  26.     	<div id="layer_2" style="visibility:hidden">
  27.             <table id="design_menu">
  28.                 <div id=""></div>
  29.                 <div id=""></div>
  30.                 <div id=""></div>
  31.                 <div id=""></div>
  32.                 <div id=""></div>
  33.                 <div id=""></div>
  34.             </table>
  35.         </div>
  36.     </div>
  37. 	<div id="layer_1" input type="button" value="Delete Image" onclick="return delImage2('layer_1')">
  38.     	<div id="layer_3" style="visibility:hidden">
  39.             <table id="photo_menu">
  40.                 <div id=""></div>
  41.                 <div id=""></div>
  42.                 <div id=""></div>
  43.                 <div id=""></div>
  44.                 <div id=""></div>
  45.                 <div id=""></div>
  46.             </table>
  47.         </div>
  48.     </div>
  49. </body>
  50. </html>
  51.  
  52.  

layer.css
Código
  1. #layer_0 {
  2. 	background: url(../img/layer/layer-0.png) no-repeat;
  3. 	position: absolute;
  4. 	left: 700px;
  5. 	top: 164px;
  6. 	width: 599px;
  7. 	height: 1291px;
  8. 	z-index: 3;
  9. }
  10.  
  11. #layer_1 {
  12. 	background: url(../img/layer/layer-1.png) no-repeat;
  13. 	position: absolute;
  14. 	left: 1300px;
  15. 	top: 170px;
  16. 	width: 527px;
  17. 	height: 1291px;
  18. 	z-index: 3;
  19. }
  20.  
  21. #layer_0:hover {
  22. 	background: url(../img/layer/layer-2.png) no-repeat;
  23. }
  24.  
  25. #layer_1:hover {
  26. 	background: url(../img/layer/layer-3.png) no-repeat;
  27. }
  28.  
  29. #layer_2 {
  30. 	background: url(../img/layer/layer-2.png) no-repeat;
  31. 	position: absolute;
  32. 	left: 100px;
  33. 	top: 170px;
  34. 	width: 599px;
  35. 	height: 1291px;
  36. 	z-index: 3;
  37. }
  38.  
  39. #layer_3 {
  40. 	background: url(../img/layer/layer-3.png) no-repeat;
  41. 	position: absolute;
  42. 	left: 2000px;
  43. 	top: 170px;
  44. 	width: 527px;
  45. 	height: 1291px;
  46. 	z-index: 3;
  47. }
  48.  
  49.  
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
  1. Element.prototype.remove = function() {
  2.     this.parentElement.removeChild(this);
  3. }
  4. NodeList.prototype.remove = HTMLCollection.prototype.remove = function() {
  5.     for(var i = 0, len = this.length; i < len; i++) {
  6.         if(this[i] && this[i].parentElement) {
  7.             this[i].parentElement.removeChild(this[i]);
  8.         }
  9.     }
  10. }
  11.  
  12. function delImage(imageID) {
  13.  
  14. document.getElementById(imageID).remove();
  15.  
  16. document.getElementById("layer_1").remove();
  17.  
  18. }
  19.  
  20.  
  21. function delImage2(imageID) {
  22.  
  23. document.getElementById(imageID).remove();
  24.  
  25. document.getElementById("layer_0").remove();
  26.  
  27. }
  28.  

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


Desconectado Desconectado

Mensajes: 2.274



Ver Perfil WWW
Re: mover imagenes onclick con jquery
« Respuesta #1 en: 20 Abril 2014, 02:45 am »
Bueno, no me manejo mucho con css, y para adaptarme a lo que se, modificaria lo siguiente

Código
  1. .layer_0 {
  2. 	background: url(../img/layer/layer-0.png) no-repeat;
  3. 	position: absolute;
  4. 	left: 700px;
  5. 	top: 164px;
  6. 	width: 599px;
  7. 	height: 1291px;
  8. 	z-index: 3;
  9. }
  10.  
  11. .layer_1 {
  12. 	background: url(../img/layer/layer-1.png) no-repeat;
  13. 	position: absolute;
  14. 	left: 1300px;
  15. 	top: 170px;
  16. 	width: 527px;
  17. 	height: 1291px;
  18. 	z-index: 3;
  19. }
  20.  
  21. .layer_0:hover {
  22. 	background: url(../img/layer/layer-2.png) no-repeat;
  23. }
  24.  
  25. .layer_1:hover {
  26. 	background: url(../img/layer/layer-3.png) no-repeat;
  27. }
  28.  
  29. .layer_2 {
  30. 	background: url(../img/layer/layer-2.png) no-repeat;
  31. 	position: absolute;
  32. 	left: 100px;
  33. 	top: 170px;
  34. 	width: 599px;
  35. 	height: 1291px;
  36. 	z-index: 3;
  37. }
  38.  
  39. .layer_3 {
  40. 	background: url(../img/layer/layer-3.png) no-repeat;
  41. 	position: absolute;
  42. 	left: 2000px;
  43. 	top: 170px;
  44. 	width: 527px;
  45. 	height: 1291px;
  46. 	z-index: 3;
  47. }
  48.  

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.

Código
  1. $(document).ready(function(){
  2. $("#layer3").click(function(){
  3. /*Cada vez que le haces click, se agrega la clase o se elimina dependiendo del estado */
  4. $(this).toggleClass("layer3");
  5. });
  6. });
  7.  

http://api.jquery.com/toggleClass/

Tambien te puede servir, addClass o removeClass dependiendo de lo que quieras en jquery


Se me olvido otra cosa
Código
  1.     <div id="layer_0" input type="button" value="Delete Image" onclick="return delImage('layer_0')">
  2.  
  3.  
Eso no es valido, un div es un div, no es mitad div ni mitad input xD no existe tal cosa

Código
  1. <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
http://pablovidela.wordpress.com

Ajedrez en linea.

http://gameknot.com/#pablovidela
gAb1


Desconectado Desconectado

Mensajes: 731


Ver Perfil
Re: mover imagenes onclick con jquery
« Respuesta #2 en: 20 Abril 2014, 14:58 pm »
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


Desconectado Desconectado

Mensajes: 2.274



Ver Perfil WWW
Re: mover imagenes onclick con jquery
« Respuesta #3 en: 20 Abril 2014, 16:02 pm »
Cita de: gAb1 en 20 Abril 2014, 14:58 pm
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

Código
  1. <div id="layer_0" input type="button" value="Delete Image" onclick="return delImage('layer_0')">
Esto dejarlo asi

Código
  1. <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

Código
  1.  
  2. $(document).ready(function(){
  3. //hacer esto mismo para cada clase
  4. $("#layer_3").click(function(){
  5. /*Cada vez que le haces click, se agrega la clase o se elimina dependiendo del estado */
  6. $(this).toggleClass("layer_3");
  7. });
  8. });
  9.  
  10.  

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
http://pablovidela.wordpress.com

Ajedrez en linea.

http://gameknot.com/#pablovidela
gAb1


Desconectado Desconectado

Mensajes: 731


Ver Perfil
Re: mover imagenes onclick con jquery
« Respuesta #4 en: 20 Abril 2014, 16:20 pm »
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


Desconectado Desconectado

Mensajes: 2.274



Ver Perfil WWW
Re: mover imagenes onclick con jquery
« Respuesta #5 en: 20 Abril 2014, 16:22 pm »
Puedes ver la consola del navegador y ver los errores javascript que arroja?
En línea
http://pablovidela.wordpress.com

Ajedrez en linea.

http://gameknot.com/#pablovidela
gAb1


Desconectado Desconectado

Mensajes: 731


Ver Perfil
Re: mover imagenes onclick con jquery
« Respuesta #6 en: 20 Abril 2014, 16:27 pm »
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


Desconectado Desconectado

Mensajes: 2.274



Ver Perfil WWW
Re: mover imagenes onclick con jquery
« Respuesta #7 en: 20 Abril 2014, 16:49 pm »
Código
  1. $("#layer_3").click(function(){
  2. /*Cada vez que le haces click, se agrega la clase o se elimina dependiendo del estado */
  3. $(this).removeClass("layer_3");
  4. $("#layer_1").addClass("layer_1");
  5. });

Juega con el removeClass y addClass y tienes que ir intercambiando las propiedades en cada layer que quieras.
En línea
http://pablovidela.wordpress.com

Ajedrez en linea.

http://gameknot.com/#pablovidela
gAb1


Desconectado Desconectado

Mensajes: 731


Ver Perfil
Re: mover imagenes onclick con jquery
« Respuesta #8 en: 20 Abril 2014, 17:27 pm »
Vale, con un simple toggle puedo dejar la imagen cambiada por hover fija.

Código
  1. $(document).ready(function(){
  2. $("#layer_0").click(function(){
  3. $(this).toggleClass("layer_2");
  4. });
  5. });

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
  1. $(document).ready(function(){
  2. $("#layer_0").click(function(){
  3. $(this).removeClass("layer_1");
  4. });
  5. $("#layer_0").click(function(){
  6. $(this).toggleClass("layer_2");
  7. });
  8. });
o
Código
  1. $(document).ready(function(){
  2. $("#layer_0").click(function(){
  3. $(this).toggleClass("layer_2");
  4. $(this).removeClass("layer_1");
  5. });
  6. });

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


Desconectado Desconectado

Mensajes: 2.274



Ver Perfil WWW
Re: mover imagenes onclick con jquery
« Respuesta #9 en: 20 Abril 2014, 17:31 pm »
Código
  1. $(document).ready(function(){
  2. $("#layer_0").click(function(){
  3. $(this).removeClass("layer_1");
  4. $(this).addClass("layer_2");
  5.  
  6. });
  7. });
  8.  

Prueba con eso.
En línea
http://pablovidela.wordpress.com

Ajedrez en linea.

http://gameknot.com/#pablovidela
Páginas: [1] 2 3 4 5 Ir Arriba Respuesta Imprimir 

Ir a:  

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,199 Último mensaje 9 Junio 2008, 00:03 am
por seba123neo
mover Css Jquery
Desarrollo Web 		David Vans 4 4,577 Último mensaje 20 Mayo 2011, 11:08 am
por David Vans
vectores con imagenes y evento onclick « 1 2 »
PHP 		Atemu 12 6,617 Último mensaje 2 Julio 2013, 19:12 pm
por Atemu
vectores con imagenes y evento onclick
PHP 		Atemu 2 1,746 Último mensaje 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,588 Último mensaje 16 Marzo 2019, 04:48 am
por #!drvy
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines