Sustituir una imagen por otra

azimutisima · #1 (**permalink**) 27/05/2011, 09:49

Muy buenas, ante todo presentarme. Soy nuevo en este foro y llevo poco tiempo en esto de la programación web. Controlo a nivel medio de php, css y html. En lo que estoy un tanto pegado en en javascript.

Os paso a exponer mi problema a ver si me podeis orientar.

Tengo una web de productos hecha en php/css que muestra como se ve en el ejemplo cada producto con su imagen en miniatura, además hay una serie de enlaces a mas imagenes. Si doy click en la imagen en miniatura o en los enlaces me lleva a la imagen en tamaño completo.

[URL=http://imageshack.us/photo/my-images/683/weby.png/][IMG]http://img683.imageshack.us/img683/1526/weby.png[/IMG][/URL]

La modificación que quiero hacer (y que intuyo que se hace en javascript, sino me lo decís) es que quiero que cuando hagan click en los enlaces (1,2,3) se sustituya la imagen en pequeño por la correspondiente al enlace y que sea cuando se le de click a la imagen en pequeño cuando se habra la grande.

Os dejo el trozo de html generado de como está ahora mismo para que os hagais mejor la idea:

Código:

<a href="adjuntos/documento1.pdf"1><img src="img/pdficon.jpg" alt="Descarga PDF Adjunto"></a></div><div id="not_file">
<a href="adjuntos/documento2_1.pdf"1><img src="img/pdficon.jpg" alt="Descarga PDF Adjunto"></a></div><div id="not_file">
<a href="adjuntos/imagen1_1.png"><img height=80 width=80 src=adjuntos/imagen1_1.png alt="Imagen de Noticia TuttiScooter"></a>
<a href="adjuntos/imagen1_2.png">1</a> 
<a ref="adjuntos/imagen1_3.png">2</a> 
<a href="adjuntos/imagen1_4.png">3</a>

Gracias por adelantado, si necesitais cualquier aclaración no teneis más que pedirla.

Un saludo.

Azi

Pd: He subido el pantallazo a imageshack y usando el codigo que de "Mostrar en foro" en la previsializacion se ve perfecto pero al enviarlo me añade las etiquetas[noparse] y no me lo muestra. ¿Como se hace?

Naahuel · #2 (**permalink**) 27/05/2011, 11:06

Bueno 3 cosas:
1- La imagen no funciona (me sale esto: http://imageshack.us/img/blocked_login.jpg )
2- No podés agregar imágenes a tu post porque eres nuevo. Creo que tenés que tener 30 días registrado para poder hacerlo y cierta cantidad mínima de posts.
3- Si entendí correcto, esto es lo que querés:
http://jsbin.com/iwesi3

Es un código que hice rápidito. Podés ver si vas a "Edit" arriba a la derecha el código fuente. Es este:

Código HTML:

Ver original<!DOCTYPE html>
<html>
<head>
<title>JS Bin</title>
</head>
<body>
  
  <p><img width="400" height="400" id="mostrar_aca" src="http://funversion.universia.es/cinetv/reportaje/homer3.jpg" /></p>
  
  <p><a href="http://funversion.universia.es/cinetv/reportaje/homer3.jpg" onclick="cambiarImagen(this.href); return false;">Homero</a>
 <a href="http://www.luiscordero.com/lisa_simpsons/retrato_lisa.jpg" onclick="cambiarImagen(this.href); return false;">Lisa</a>
    <a href="http://2.bp.blogspot.com/_72Pqm35tEiU/SbWFYpp0m4I/AAAAAAAAGbs/zaQ-K_cqY0g/s400/maggie_atp.gif" onclick="cambiarImagen(this.href); return false;">Maggie</a></p>
  
  
</body>
</html>

Y este el javascript:

Código Javascript:

Ver originalfunction cambiarImagen(src){
  document.getElementById('mostrar_aca').src = src;
}

Lo importante es que tu <img> que tendrá las imagenes debe tener el id "mostrar_aca" o alguno que vos quieras. Además, cada enlace debe tener el siguiente atributo onclick:

Código Javascript:

Ver originalcambiarImagen(this.href); return false;

Llama a la función cambiarImagen() pasándole como atributo lo que tiene en el "href". Además tiene un return false que evita que el click en el link haga lo que tiene que hacer (navegar fuera de la página).

Espero esté claro. Un saludo.

azimutisima · #3 (**permalink**) 27/05/2011, 11:14

Gracias, uff que rapido!!!!

lo pruebo y te comento...

Gracias tb por la aclaracion de lo de las imagenes, el caso es que la url de la imagen de ejemplo yo la cargo perfectamente... misterio!.

http://img683.imageshack.us/img683/1526/weby.png

Heiroon · #4 (**permalink**) 27/05/2011, 11:51

cualquier cosa tambien puedes probar con innerHTML...

Siempre es util... Asi lo hago yo al menos!

azimutisima · #5 (**permalink**) 31/05/2011, 06:07

Gracias a los dos por vuestras respuestas. La opción de Naahuel me funcionó bien peeero curiosamente solo en Firefox y no en todas las máquinas que lo he probado, solo en 2 de 5. En las demás no funciona ni en I.E. ni en Opera ni en Firefox. ¿Alguna idea? Esto me pasa tanto en local como subido al servidor.

Es posible que influya alguna configuración de la máquina? Estoy perdido....

Naahuel · #6 (**permalink**) 31/05/2011, 10:44

Probé el ejemplo que te puse en http://jsbin.com/iwesi3 y funciona en todos los navegadores que tengo (FF 4, IE 6 7 y8, Chrome). Tal vez el problema venga en cómo lo estás aplicando vos.

De casualidad no estás usando jQuery para otra cosa en tu proyecto? Si es así podemos facilitar el código y hacerlo con jQuery.

caricatos · #7 (**permalink**) 31/05/2011, 11:03

Hola:

La semántica del tag "a" es enlazar o anclar, y no entiendo porqué se usa tanto para lanzar un script...

Cuando empiecen a detectar cosas como penalizaciones de los buscadores, o problemas de validación, tal vez lo empiecen a considerar...

Cualquier tag vale para lanzar un script (y mejor aún un botón)

Saludos

Naahuel · #8 (**permalink**) 31/05/2011, 11:10

Si, es cierto, aunque en el caso de este script hay una ventaja: Si el script falla o JavaScript está desactivado se podrá navegar a la imagen sin problemas.

Supongo que la razón por la que siempre se utilizan los <a> es por facilidad y porque es lo más natural.

InKarC · #9 (**permalink**) 31/05/2011, 12:21

Cita:

Iniciado por Naahuel

Si, es cierto, aunque en el caso de este script hay una ventaja: Si el script falla o JavaScript está desactivado se podrá navegar a la imagen sin problemas.

Supongo que la razón por la que siempre se utilizan los <a> es por facilidad y porque es lo más natural.

Correcto, en los proyectos siempre uso anclas (<a>) con el href a la imagen o contenido que deberia abrirse a travez de javascript; esto sirve para los buscadores (lease google) indexen el contenido lo mejor posible y tambien para que la pagina funcione lo mejor posible en dispositivos sin javascript.

caricatos · #10 (**permalink**) 31/05/2011, 17:59

Hola:

Me suena que las respuestas son del tipo -agachando la cabeza- ¡Lo siento, yo no quería!...
La verdad es que enlazar a una imagen tiene poco sentido (muy poco), a no ser de que se trate de comentarios de la misma o tal vez descripciones... cosa que bastaría con un buen uso del atributo longdesc...

Saludos

azimutisima · #11 (**permalink**) 01/06/2011, 11:23

Respondiendo a Naahuel

Cita:

De casualidad no estás usando jQuery para otra cosa en tu proyecto? Si es así podemos facilitar el código y hacerlo con jQuery.

Efectivamente uso dos jquerys 1 el jquery genérico y el especifico que me hace de popup para el aviso legal.

A los demás con la polemica de lanzar o no con <a> sinceramente se lo agradezco pero ahora mismo estoy centrado en este problema. Gracias.

ramongonzalezg · #12 (**permalink**) 02/06/2011, 10:03

wenas a todos, soy el compi de azimutisima con el que sufro el problema.

sacando la conclusion de que sea una incompatibilidad entre javaScript y jQuery, ¿como podriamos hacerlo en jQuery?.

gracias por adelantado! ;)

azimutisima · #13 (**permalink**) 02/06/2011, 11:54

Vale ya lo tengo solucionado, se me habia ido una

Código:

y eso me estaba provocando lo comentado anteriormente.

Ya me funciona. Ahora mi duda es que quiero que la imagen mostrada se abra a tamaño completo al hacer click en ella, siguiendo el ejemplo de Naahuel quiero hacer que cada imagen sea un enlace a si misma mas grande. Ahora mismo lo tengo como un enlace pero a la 1.era imagen y yo quiero que sea dinamico osea que tanto lisa, como homer como Maggie sean enlaces a si misma.

Ahora mismo tengo esto:

Código:

<img height=230 width=252 id="mostrar_img" src='imagen1.jpg' alt="XX">

y claro al hacer clic en la imagen se muestra si o si la 1, yo quiero que cuando se cambie el mostrar_img sea un link a la imagen mostrada en ese momento...

Gracias a todos.

Un saludo.

Naahuel · #14 (**permalink**) 02/06/2011, 14:27

Realmente va a depender de cómo quieras abrir la imagen (en la misma ventana, con un lightbox, en una ventana aparte) pero el código en sí sería algo así:
http://jsbin.com/iwesi3/2

Javascript:

Código Javascript:

Ver originalfunction cambiarImagen(src){
 var img_contenedor =  document.getElementById('mostrar_aca');
  img_contenedor.src = src;
  img_contenedor.parentNode.href = src;
}

HTML

Código HTML:

Ver original<!DOCTYPE html>
<html>
<head>
<title>JS Bin</title>
</head>
<body>
  
  <p><a href="http://funversion.universia.es/cinetv/reportaje/homer3.jpg"><img width="200" height="200" id="mostrar_aca" src="http://funversion.universia.es/cinetv/reportaje/homer3.jpg" /></a></p>
  
  <p><a href="http://funversion.universia.es/cinetv/reportaje/homer3.jpg" onclick="cambiarImagen(this.href); return false;">Homero</a>
 <a href="http://www.luiscordero.com/lisa_simpsons/retrato_lisa.jpg" onclick="cambiarImagen(this.href); return false;">Lisa</a>
    <a href="http://2.bp.blogspot.com/_72Pqm35tEiU/SbWFYpp0m4I/AAAAAAAAGbs/zaQ-K_cqY0g/s400/maggie_atp.gif" onclick="cambiarImagen(this.href); return false;">Maggie</a></p>
  
  
</body>
</html>

Lo único que cambió en el html es que se envolvió la imagen en un <a>.

ramongonzalezg · #15 (**permalink**) 04/06/2011, 03:01

la cosa se va complicando jejej

el caso es que este sistema esta dentro de un div el cual representa un producto, el problema siguiente es que cuando tienes varios productos ya se hace un lio porque todos los div trabajan con el mismo id="mostrar_aca".

ya que los productos se muestran desde php+sql he pensado en ponerle como un contador a la etiqueta id hasta 5 ya que 4 es el limite de productos a mostrar por pagina. Algo así: id="mostrar_aca.$x."

de ese modo tendria un sistema de id="mostrar_aca1", id="mostrar_aca2", hasta 5 cada div co un id diferente.

el problema es que me pierdo con la funcion que trabajaría con esos id del 1 al 5

el codigo de la pagina:

Cita:

//recupera las imagenes del producto
$consulta2= mysql_leerregistros('imgproducto','id','0','5',$co nexion,$resultado['id']);
$nfilas2 = mysql_num_rows ($consulta2);
if ($nfilas2 > 0)
{
print ("<div id='imglinks'>\n");
for ($x=1; $x<=$nfilas2; $x++)
{

$resultado2 = mysql_fetch_array ($consulta2);
$adjunto="adjuntos/" . $resultado2['adjunto'];
if ($x==1)
{
$cadena='<div id="prod_img"><a href="'.$adjunto.'"';
$image_large = $cadena . '><img height=230 width=252 id="mostrar_aca" src='.$adjunto. ' alt="Producto Distribuido por TuttiScooter"></a></div>';
print ($image_large);
}
$cadena='<a href="'.$adjunto.'" onclick="cambiarImagen(this.href); return false;">'.$x.'</a> ';
print($cadena);

}
print ("</div>\n");
}

la cosa sería que en la siguiente funcion hubiera una variable para determinar el numero de id que hay, ¿quizas poniendole un contador del 1 al 5 al id="mostrar_aca" simplemente?

Cita:

perdon por el tocho

ramongonzalezg · #16 (**permalink**) 08/06/2011, 08:34

up!

¿alguna sugerencia?

Naahuel · #17 (**permalink**) 08/06/2011, 12:17

Bueno lo hagamos con jQuery.

¿Así?
http://jsbin.com/iwesi3/4

Cosas que debés tener en cuenta:

* Estás generando varios divs "prod_img" y todos tienen ese atributo como ID. El ID debe ser único por lo que te diría que cambies el ID por CLASS.
* Como estamos usando jQuery dejamos de usar el atributo onclick.

Este es el código. Observá que ahora los lanzadores tienen clases y también tiene una clase especial el <a> que contiene a la imagen grande. Tratá de imitar este enmarcado cuando lo generes con PHP:

Código HTML:

Ver original<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    $('.asignar-imagen').click(function(e){
        e.preventDefault();
        var contenedor = $(this).siblings('.contenedor-imagen');
        var imagenNuevaSrc = $(this).attr('href');
        contenedor.attr('href',imagenNuevaSrc).children('img').attr('src',imagenNuevaSrc);
    });
});
</script>
 
</head>
<body>
  
  
<div id="links">
    <!--contenedor general-->
    <div class="prod_img">
        <!--donde mostrar la imagen-->
        <a class="contenedor-imagen" href="http://funversion.universia.es/cinetv/reportaje/homer3.jpg"><img src="http://funversion.universia.es/cinetv/reportaje/homer3.jpg" /></a>
        
        <!--links para cambiar la imagen-->
        <a class="asignar-imagen" href="http://funversion.universia.es/cinetv/reportaje/homer3.jpg">Homero</a>
        <a class="asignar-imagen" href="http://www.luiscordero.com/lisa_simpsons/retrato_lisa.jpg">Lisa</a>
        <a class="asignar-imagen" href="http://2.bp.blogspot.com/_72Pqm35tEiU/SbWFYpp0m4I/AAAAAAAAGbs/zaQ-K_cqY0g/s400/maggie_atp.gif">Maggie</a>
    </div>
    
    
    
    
    <!--contenedor general-->
    <div class="prod_img">
        <!--donde mostrar la imagen-->
        <a class="contenedor-imagen" href="http://funversion.universia.es/cinetv/reportaje/homer3.jpg"><img src="http://funversion.universia.es/cinetv/reportaje/homer3.jpg" /></a>
        
        <!--links para cambiar la imagen-->
        <a class="asignar-imagen" href="http://funversion.universia.es/cinetv/reportaje/homer3.jpg">Homero</a>
        <a class="asignar-imagen" href="http://www.luiscordero.com/lisa_simpsons/retrato_lisa.jpg">Lisa</a>
        <a class="asignar-imagen" href="http://2.bp.blogspot.com/_72Pqm35tEiU/SbWFYpp0m4I/AAAAAAAAGbs/zaQ-K_cqY0g/s400/maggie_atp.gif">Maggie</a>
    </div>
    
    
    
    
    <!--contenedor general-->
    <div class="prod_img">
        <!--donde mostrar la imagen-->
        <a class="contenedor-imagen" href="http://funversion.universia.es/cinetv/reportaje/homer3.jpg"><img src="http://funversion.universia.es/cinetv/reportaje/homer3.jpg" /></a>
        
        <!--links para cambiar la imagen-->
        <a class="asignar-imagen" href="http://funversion.universia.es/cinetv/reportaje/homer3.jpg">Homero</a>
        <a class="asignar-imagen" href="http://www.luiscordero.com/lisa_simpsons/retrato_lisa.jpg">Lisa</a>
        <a class="asignar-imagen" href="http://2.bp.blogspot.com/_72Pqm35tEiU/SbWFYpp0m4I/AAAAAAAAGbs/zaQ-K_cqY0g/s400/maggie_atp.gif">Maggie</a>
    </div>
</div>
</body>
</html>