Intercambio de imagen en un div en forma dinamica

isabelramirezmontoya · #1 (**permalink**) 08/11/2013, 16:40

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<html>
 
<head>
<title>Cambiar imagen en DIV</title>
 
<script language="javascript">
 
function visible()
{
    var ventana = document.getElementById('capa');
    ventana.style.display = 'block';
}
 
function invisible()
{
    var ventana = document.getElementById('capa');
    ventana.style.display = 'none';
}
 
function ver_imagen(src)
{
document.getElementById("img1").src = src;
}
 
</script>
 
</head>
 
<body>
 
<a href="javascript:visible()">Visible</a> 
<br>
<a href="javascript:invisible()">Invisible</a> 
 
<?php
 
$imagen1 = "leon1.jpg";
$imagen2 = "leon2.jpg";
$imagen3 = "leon3.jpg";
$imagen4 = "leon4.jpg";
$imagen5 = "leon5.jpg";
 
echo '<div id="capa" align="center">';
echo '<img id="img1" src="http://images/'.$imagen1.'">';
 
echo '<br>';
 
echo '<img src="http://images/'.$imagen1.'" width="15" height="15" onclick="ver_imagen(this.src)">';
echo ' ';
echo '<img src="http://images/'.$imagen2.'" width="15" height="15" onclick="ver_imagen(this.src)">';
echo ' ';
echo '<img src="http://images/'.$imagen3.'" width="15" height="15" onclick="ver_imagen(this.src)">';
echo ' ';
echo '<img src="http://images/'.$imagen4.'" width="15" height="15" onclick="ver_imagen(this.src)">';
echo ' ';
echo '<img src="http://images/'.$imagen5.'" width="15" height="15" onclick="ver_imagen(this.src)">';
echo '</div>';
?>
 
</body>
 
</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<html>
 
<head>
<title>Cambiar imagen en DIV</title>
 
<script language="javascript">
 
function visible($animal)
{
    var ventana = document.getElementById('capa');
    ventana.style.display = 'block';
}
 
function invisible()
{
    var ventana = document.getElementById('capa');
    ventana.style.display = 'none';
}
 
function ver_imagen(src)
{
document.getElementById("img1").src = src;
}
 
</script>
 
</head>
 
<body>
 
<a href="javascript:visible($animal)">Visible</a> 
<br>
<a href="javascript:invisible()">Invisible</a> 
 
<?php
 
$imagen1 = "$animal.jpg";
$imagen2 = "$animal.jpg";
$imagen3 = "$animal.jpg";
$imagen4 = "$animal.jpg";
$imagen5 = "$animal.jpg";
 
echo '<div id="capa" align="center">';
echo '<img id="img1" src="http://images/'.$imagen1.'">';
 
echo '<br>';
 
echo '<img src="http://images/'.$imagen1.'" width="15" height="15" onclick="ver_imagen(this.src)">';
echo ' ';
echo '<img src="http://images/'.$imagen2.'" width="15" height="15" onclick="ver_imagen(this.src)">';
echo ' ';
echo '<img src="http://images/'.$imagen3.'" width="15" height="15" onclick="ver_imagen(this.src)">';
echo ' ';
echo '<img src="http://images/'.$imagen4.'" width="15" height="15" onclick="ver_imagen(this.src)">';
echo ' ';
echo '<img src="http://images/'.$imagen5.'" width="15" height="15" onclick="ver_imagen(this.src)">';
echo '</div>';
?>
 
</body>
 
</html>

Alguna sugerencia, gracias

PHPeros · #2 (**permalink**) 09/11/2013, 07:32

Problema localizado:

Código:

<a href="javascript:visible(<?php echo $animal ?>)">Visible</a>

Tu navegador no sabe nada de PHP, el valor tiene que ser enviado ya desde el servidor

PD: No es recomendable poner JavaScript en enlaces directamente, usa eventos.