Mensajes

Te recomiendo visitar la pagina de jquery y ver la documentación, hay miles de eventos geniales.

A ti para mover la imagen de forma lateral te puede servir el animate()

https://api.jquery.com/animate/

Del mismo link saco lo que necesitas.

Código (javascript) [Seleccionar] Expandir



$( "#right" ).click(function() {
  $( ".block" ).animate({ "left": "+=50px" }, "slow" );
});

$( "#left" ).click(function(){
  $( ".block" ).animate({ "left": "-=50px" }, "slow" );
});


Visita el sitio, te encontraras con mas funciones y propiedades.

Saludos 

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

Lo que quiero hacer es que al hacer click en una de las dos imágenes aparezca en color y la otra imagen que hay al lado se oculte para dejar espacio.

Para reemplazar el estilo ya sabes que es con toggle o usando removeClass y addClass, si quieres ocultar algo puedes usar

Código (javascript) [Seleccionar] Expandir


$("#idDiv").hide();


para volver a mostrarlo puedes usar

Código (javascript) [Seleccionar] Expandir


$("#idDiv").show();


Si quieres ocultar con animacion puedes usar el fadeIn() y el fadeOut() en vez de hide y show()

Ok vamos por parte para que nos entendamos.

layer_0 , es un div con una imagen verdad, quieres que al hacer click, ¿aparezca que div con la imagen? (y quieres hacer desaparecer la imagen de layer_0).

Código (javascript) [Seleccionar] Expandir


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

});
});


Prueba con eso.

Código (javascript) [Seleccionar] Expandir

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

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

QUe si que, me pagaran 15 dolares mensuales por cada modelo que tenga que registrar en la pagina, imaginate cuando haya 50 modelos, sera un ingreso de 750 dolares fijos por esa pagina, me siento bendecido.

Porque no entras en esas paginas y guardas los formatos html, javascript,css creo que se podia entrando a las paginas y colocar guardar pagina como (pagina completa) xD y ahi quedaba como plantilla

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

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

Código (html4strict) [Seleccionar] Expandir

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



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

Lo que puedes hacer es consultar cada X tiempo la petición ajax.

http://www.w3schools.com/js/js_timing.asp

No se si te sirva, pero no se me ocurrio algo mejor 

Bueno, no me manejo mucho con css, y para adaptarme a lo que se, modificaria lo siguiente

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;
}


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


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

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

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