Tema: Intercambio de imagen en un div en forma dinamica
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 08/11/2013, 16:40
isabelramirezmontoya
 
Fecha de Ingreso: noviembre-2010
Mensajes: 204
Antigüedad: 13 años, 5 meses
Puntos: 1
Intercambio de imagen en un div en forma dinamica
Chicos buenas tardes, quien me da una manito con esta duda por fa

El siguiente codigo hace visible e invisible una capa, en dicha capa puedo cambiar la imagen central por otra (5 imagenes minimizadas). Esto me funciona perfectamente.
Código HTML: 
Ver original
  1. <html>
  2.  
  3. <head>
  4. <title>Cambiar imagen en DIV</title>
  5.  
  6. <script language="javascript">
  7.  
  8. function visible()
  9. {
  10.     var ventana = document.getElementById('capa');
  11.     ventana.style.display = 'block';
  12. }
  13.  
  14. function invisible()
  15. {
  16.     var ventana = document.getElementById('capa');
  17.     ventana.style.display = 'none';
  18. }
  19.  
  20. function ver_imagen(src)
  21. {
  22. document.getElementById("img1").src = src;
  23. }
  24.  
  25. </script>
  26.  
  27. </head>
  28.  
  29. <body>
  30.  
  31. <a href="javascript:visible()">Visible</a> 
  32. <br>
  33. <a href="javascript:invisible()">Invisible</a> 
  34.  
  35. <?php
  36.  
  37. $imagen1 = "leon1.jpg";
  38. $imagen2 = "leon2.jpg";
  39. $imagen3 = "leon3.jpg";
  40. $imagen4 = "leon4.jpg";
  41. $imagen5 = "leon5.jpg";
  42.  
  43. echo '<div id="capa" align="center">';
  44. echo '<img id="img1" src="http://images/'.$imagen1.'">';
  45.  
  46. echo '<br>';
  47.  
  48. echo '<img src="http://images/'.$imagen1.'" width="15" height="15" onclick="ver_imagen(this.src)">';
  49. echo ' ';
  50. echo '<img src="http://images/'.$imagen2.'" width="15" height="15" onclick="ver_imagen(this.src)">';
  51. echo ' ';
  52. echo '<img src="http://images/'.$imagen3.'" width="15" height="15" onclick="ver_imagen(this.src)">';
  53. echo ' ';
  54. echo '<img src="http://images/'.$imagen4.'" width="15" height="15" onclick="ver_imagen(this.src)">';
  55. echo ' ';
  56. echo '<img src="http://images/'.$imagen5.'" width="15" height="15" onclick="ver_imagen(this.src)">';
  57. echo '</div>';
  58. ?>
  59.  
  60. </body>
  61.  
  62. </html>
En el ejemplo la imagen siempre es leon.jpg

Quiero que sea dinamico y para ello necesito pasar el valor de la variable en la funcion a la variable $imagen1.

Lo he intentado de la siguiente forma pero no me funciona:

Código HTML: 
Ver original
  1. <html>
  2.  
  3. <head>
  4. <title>Cambiar imagen en DIV</title>
  5.  
  6. <script language="javascript">
  7.  
  8. function visible($animal)
  9. {
  10.     var ventana = document.getElementById('capa');
  11.     ventana.style.display = 'block';
  12. }
  13.  
  14. function invisible()
  15. {
  16.     var ventana = document.getElementById('capa');
  17.     ventana.style.display = 'none';
  18. }
  19.  
  20. function ver_imagen(src)
  21. {
  22. document.getElementById("img1").src = src;
  23. }
  24.  
  25. </script>
  26.  
  27. </head>
  28.  
  29. <body>
  30.  
  31. <a href="javascript:visible($animal)">Visible</a> 
  32. <br>
  33. <a href="javascript:invisible()">Invisible</a> 
  34.  
  35. <?php
  36.  
  37. $imagen1 = "$animal.jpg";
  38. $imagen2 = "$animal.jpg";
  39. $imagen3 = "$animal.jpg";
  40. $imagen4 = "$animal.jpg";
  41. $imagen5 = "$animal.jpg";
  42.  
  43. echo '<div id="capa" align="center">';
  44. echo '<img id="img1" src="http://images/'.$imagen1.'">';
  45.  
  46. echo '<br>';
  47.  
  48. echo '<img src="http://images/'.$imagen1.'" width="15" height="15" onclick="ver_imagen(this.src)">';
  49. echo ' ';
  50. echo '<img src="http://images/'.$imagen2.'" width="15" height="15" onclick="ver_imagen(this.src)">';
  51. echo ' ';
  52. echo '<img src="http://images/'.$imagen3.'" width="15" height="15" onclick="ver_imagen(this.src)">';
  53. echo ' ';
  54. echo '<img src="http://images/'.$imagen4.'" width="15" height="15" onclick="ver_imagen(this.src)">';
  55. echo ' ';
  56. echo '<img src="http://images/'.$imagen5.'" width="15" height="15" onclick="ver_imagen(this.src)">';
  57. echo '</div>';
  58. ?>
  59.  
  60. </body>
  61.  
  62. </html>

Alguna sugerencia, gracias