Intercambiar Imagenes usando Select Menu/LIst
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.
<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 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.
- responder
Enviado por emoticon (no verificado) el Lun, 03/03/2008 - 19:54.Muy bueno el aporte es justo lo que estaba buscando!
- responder
Enviado por Marc (no verificado) el Vie, 05/30/2008 - 05:33.Deja tu comentario