Intercambiar Imagenes usando Select Menu/LIst

Vie, 04/22/2005 - 00:00 : baluart

CommunityMX hace un par de semanas ha publicado un tutorial sobre como rotar imagenes con un Select List/Menu, sin embargo estan cobrando una modica cantidad por leerlo. Pues aquí, nosotros también vamos a mostrar el mismo resultado, aunque tal vés no con el mismo procedimiento.

Siguiendo el ejemplo de esa web, vamos a publicar dos artículos referente a este tema, el primero, en donde haremos uso de una página estática, es decir, una página html en donde el diseño y la información no necesitan de ninguna interacción con alguna base de datos.

Y el segundo en donde si consideraremos el dinamismo de una página PHP y la base de datos MySQL para permitir el intercambio de imágenes de una manera mucho más dinámica.

El objetivo de esto es permitir que nuestros visitantes cambien una imagen que se muestra basada sobre las opciones de una lista, por ejemplo, tenemos una lista de productos y cuando uno selecciona alguno de ellos se muestre su Fotografía. Por lo que damos la alternativa al clásico thumbnails que muestre todos los productos.

Ver ejemplo

<html>
<head>
<title>Intercambiar Imagenes con Menu/List</title>
</head>
<body>
<img src="img/img0.JPG" width="128" height="96" border="0" name="Imagen">
<script>
var _img = new Array();
    _img[0] = new Image(); _img[0].src="img/img0.jpg";
    _img[1] = new Image(); _img[1].src="img/img1.jpg";
    _img[2] = new Image(); _img[2].src="img/img2.jpg";
    _img[3] = new Image(); _img[3].src="img/img3.jpg";
function cambiarA(_obj)
{
if(!_obj)return;
var _index = _obj.selectedIndex;
if(!_index)return;
var _item = _obj[_index].value;
if(!_item)return;
if(_item<0 || _item >=_img.length)return;
document.images["Imagen"].src=_img[_item].src;
}
</script>

<form method="get">
    <select onchange="cambiarA(this)">
      <option value="">Seleccionar Imagen</option>
      <option value="0">Imagen 1</option>
      <option value="1">Imagen 2</option>
      <option value="2">Imagen 3</option>
      <option value="3">Imagen 4</option>
    </select>
</form>

</body>
</html>

Vamos ha empezar creando un JavaScript que se encargue del intercambio de las imagenes.

Creamos un array y lo instanciamos a una variable. El array contendra la ruta a la imagen acorde con el valor que se le asigne.

Creamos una funcion que se encarge de obtener los valores

Y para terminar creamos el Menu/Lista en Html, con sus respectivos valores.

Asi de simple, verdad... en unos días haremos lo mismo pero con PHP y MySQL.

excelente, me sac

responder

Enviado por Daniel (no verificado) el Vie, 08/03/2007 - 11:02.

De momento no conseg

De momento no consegui hacerlo funcionar, lo queria utilizar en la administracion de una web para listar los emoticonos que no han sido añadidos a la base de datos, pero por alguna extraña razon no me funciono, ya lo intentare cuando tenga mas tiempo. De cualquier manera, gracias.