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.
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.
<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>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.
Si te gustó este artículo también te gustará...
excelente, me sac
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.
Muy bueno el aporte es justo lo que estaba buscando!
Muy bueno, me sirvió
Muy bueno, gracias
COMO HACER QUE MIS COMENTARIOS SE PUBLIQUEN EN LA PAG ME URGE SABER
pana de verdad parece que me falta algo en el script si puedes revisarlo tu y decirme que tengo de malo por favor te lo agredesco te mando el codigo:
Intercambiar Imagenes con Menu/List
var _img = new Array();
_img[0] = new Image(); _img[0].src="http://polukeman.atwebpages.com/objetos/3.jpeg";
_img[1] = new Image(); _img[1].src="http://polukeman.atwebpages.com/objetos/2.jpeg";
_img[2] = new Image(); _img[2].src="http://polukeman.atwebpages.com/objetos/4.jpeg";
_img[3] = new Image(); _img[3].src="http://polukeman.atwebpages.com/objetos/6.jpeg";
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["image"].src=_img[_item].src;
}
Seleccionar Imagen
Imagen 1
Imagen 2
Imagen 3
Imagen 4