Foros del Web - Ver Mensaje Individual

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>