¿Cómo cambiar una imagen al hacer clic en ella?

Luis Martin · 2014-08-14T10:56:45-0500

Hola, estoy intentado hacer lo siguiente, poner una imagen en la entrada colocar una imagen, cuando la persona le haga clic se cambie por otra la cual quedara permanente, es decir si hacen clic en la primera imagen muestre la segunda, pero si hacen clic en la segunda no pase nada.

Me explico:

Imagen1 - Se mostrara hasta que le hagan clic
Imagen2 - Se mostrara luego de la Imagen1 y quedara Permanente

Accion: Mostrar "Imagen1", el usuario hace clic sobre la imagen y cambia por "Imagen2" que se quedara permanentemente.

Alguien sabe que codigo puedo utilizar?

S3RGI0 · 2014-08-14T11:19:20-0500

Puedes usar jquery:

Insertar CODE, HTML o PHP:

$("#idImagen").click(function(event){
  event.preventDefault();
  var nuevaImagen = "www.miimagen.jpg";
  $("#idImagen").attr("src", nuevaImagen);  // o  $(this).attr("src", nuevaImagen);
});

Pero queda en duda esto <quedara Permanente>, si te refieres a que siga navegando en todo el sitio (refresque o vaya a otro lado), no te funcionara ya que solo lo cambia del lado del cliente.

Si lo quieres permanente, deberás usar una cookie para saber si dio click

salu2!

Luis Martin · 2014-08-14T11:53:32-0500

No me funciono, existe alguna forma de hacerlo con html?

cesarneitor · 2014-08-14T11:54:00-0500

tengo una forma con html sencilla para ellos se necesita dos html y dos imágenes entonces el html queda así
<html>
<head>
<title>cambiar imagen</title>
</head>
<body>
<a href="cambiarimagenba.html"><img src="metallica-promo.jpeg"/></a>
</body>
</html>

<html>
<head>
<title>cambiar imagen</title>
</head>
<body>
<a href="cambiarimagenab.html"><img src="Metallica-1.jpg"/></a>
</body>
</html>

donde cambiarimagenab y cambiarimagenba son los html que vas agregando una imagen y cambia con otra
y en imc src le pones la imagen inicial en ab y lo que vas a cambiar en ba

- - - Actualizado - - -

ahh perdon vos querias que la segunda imagen quede permanente . Hice para que al dal click vuelva a la primera imagen entonces el segundo html seria

<html>
<head>
<title>cambiar imagen</title>
</head>
<body>
<img src="Metallica-1.jpg"/>
</body>
</html>

Luis Martin · 2014-08-14T12:12:16-0500

no asi no me funciona, la imagen esta dentro de una entrada :S

- - - Actualizado - - -

nadie mas?

S3RGI0 · 2014-08-14T13:11:02-0500

Asi

Insertar CODE, HTML o PHP:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
      <title>Untitled Document</title>
      <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"></script>   

      <script type="text/javascript">
        $(document).ready(function() {

           $("#imagenId").click(function(event){
            event.preventDefault();
            var nuevaImagen = "http://www.pmipr.org/Resources/Pictures/twitter-logo1.png";
            $("#imagenId").attr("src", nuevaImagen);  // o  $(this).attr("src", nuevaImagen);

          });
        });

      </script>
  </head>

<body>

<img id="imagenId" src="http://img3.wikia.nocookie.net/__cb20130221195222/es.starwars/images/0/07/Facebook_logo.png" />

</body>
</html>

cesarneitor · 2014-08-14T13:40:59-0500

bueno creo que no pusiste bien asi que te paso en un rar por medio de drive aca te comparto el link. Porque a en mi caso funcionó bien
https://docs.google.com/file/d/0B4qrleXne587X0JvcnFDdGc4VXM/edit?usp=drive_web

Kumo · 2014-08-14T13:53:30-0500

Hola, amigo necesitas usar cookies si o si, pues lo que pretendes es hacer permanente el cambio aún después de cerrar la página, por eso te he creado un ejemplo sencillo en jsfiddle donde puedes ver la solución a tu problema:

el link a jsfiddle es este http://jsfiddle.net/0ovz47z7/

Acá está el código del ejemplo:

Insertar CODE, HTML o PHP:

// Para que esto funcione debes descargar el plugin de JQuery jquery.cookie
// https://github.com/carhartl/jquery-cookie o copiar y pegar el código de la sección 1 de este ejemplo

$(function(){
    
    //Usaremos kookies, no veo otra forma de lograrlo
    //leemos la kookie y determinamos si se debe hacer el toggle o no, dependiendo de i ya hemos creado 
    //la cookie o si no está en "false"    
    if(get_toggle()){
        //Si el valor de toggle es verdadero cambiamos la imagen
        toggle_image();
    }else{
        //Si el valor de toggle es falso asignamos la imagen que queremos se muestre inicialmente
        $("#imagen").attr("src", "https://www.google.com.co/images/srpr/logo11w.png"); 
        //asignamos la cookie por si no existe y le asignamos "false"
        $.cookie('toolge_image', 'false');
    };     
    
    //Añadimos un nuevo manejador al evento click de la imagen y usamos "on" para que lo asigne aún cuando la imagen no ha sido añadida al DOM
    $("#imagen").on("click",function(event){
        //Esto previene que se siga propagando el click
        event.preventDefault();        
        
        //Determinamos si se debe hacer toggle a la imagen
        if(!get_toggle()){
            toggle_image();      
        };
        
    });

    $("#imagen").show();
    
});

function get_toggle(){
    return toggle = $.cookie('toolge_image') != undefined && $.cookie('toolge_image') != "false";
};

function toggle_image(){
    $("#imagen").attr("src", "https://fbstatic-a.akamaihd.net/rsrc.php/v2/yt/r/FZaMKqARgC6.png");        
    $.cookie('toolge_image', 'true');    
};

¿Cómo cambiar una imagen al hacer clic en ella?

Luis Martin

S3RGI0

Luis Martin

cesarneitor

Luis Martin

S3RGI0

cesarneitor

Kumo

Temas similares

Privacidad y transparencia

Privacidad y transparencia