mover imagenes onclick con jquery

gAb1 · 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 (html4strict) [Seleccionar]


<!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]


#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]


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!

Pablo Videla · 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 (css) [Seleccionar]


.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.

Código (javascript) [Seleccionar]


$(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

Código (html4strict) [Seleccionar]

    <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

Código (html4strict) [Seleccionar]

<input type="button" value="Delete image" onclick="alert('alerta hice click');" />
Eso es un boton

gAb1 · 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...

Pablo Videla · 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 (html4strict) [Seleccionar]

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

Código (html4strict) [Seleccionar]

<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 (javascript) [Seleccionar]



$(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?

gAb1 · 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.

Pablo Videla · 20 Abril 2014, 16:22 PM

Puedes ver la consola del navegador y ver los errores javascript que arroja?

gAb1 · 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"???

Pablo Videla · 20 Abril 2014, 16:49 PM

Código (javascript) [Seleccionar]

$("#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.

gAb1 · 20 Abril 2014, 17:27 PM

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

Código (javascript) [Seleccionar]

$(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]


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

o

Código (javascript) [Seleccionar]

$(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.

Pablo Videla · 20 Abril 2014, 17:31 PM

Código (javascript) [Seleccionar]


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

});
});

Prueba con eso.